输入限制

SRE实战 互联网时代守护先锋,助力企业售后服务体系运筹帷幄!一键直达领取阿里云限量特价优惠。

 

属性 描述
disabled 规定输入字段应该被禁用。
max 规定输入字段的最大值。
maxlength 规定输入字段的最大字符数。
min 规定输入字段的最小值。
pattern 规定通过其检查输入值的正则表达式。
readonly 规定输入字段为只读(无法修改)。
required 规定输入字段是必需的(必需填写)。
size 规定输入字段的宽度(以字符计)。
step 规定输入字段的合法数字间隔。
value 规定输入字段的默认值。

 

disabled 属性

disabled 属性规定输入字段是禁用的。

被禁用的元素是不可用和不可点击的。

被禁用的元素不会被提交。

 

 

 

<input type="date"> 用于应该包含日期的输入字段。

根据浏览器支持,日期选择器会出现输入字段中。

<!DOCTYPE html>
<html>
<body>
<p>
根据浏览器支持:<br>
当您填写输入字段时会弹出日期选择器。
</p>
<form action="/demo/demo_form.asp">
  生日:
  <input type="date" name="bday">
  <input type="submit">
</form>
<p><b>注释:</b>Firefox 或者
Internet Explorer 11 以及更早版本不支持 type="date"。</p>
</body>
</html>

 

输入类型<input type= / input标签的输入限制 随笔 第1张" title=" 输入类型 / input标签的输入限制 随笔 第1张" src="https://www.liuyixiang.com/zb_users/theme/Lucky/style/image/grey.gif" data-original="https://img.liuyixiang.com/image/2019/5/BnMfIj.png" class="aligncenter myImgClass">

 

 

<input type="color"> 用于应该包含颜色的输入字段。

根据浏览器支持,颜色选择器会出现输入字段中。

<form>
  Select your favorite color:
  <input type="color" name="favcolor">
</form>

输入类型<input type= / input标签的输入限制 随笔 第2张" title=" 输入类型 / input标签的输入限制 随笔 第2张" src="https://www.liuyixiang.com/zb_users/theme/Lucky/style/image/grey.gif" data-original="https://img.liuyixiang.com/image/2019/5/6rANrm.png" class="aligncenter myImgClass">

 

 

 

 

<input type="range"> 用于应该包含一定范围内的值的输入字段。

根据浏览器支持,输入字段能够显示为滑块控件

<form>
  <input type="range" name="points" min="0" max="10">
</form>

 您能够使用如下属性来规定限制:min、max、step、value。

输入类型<input type= / input标签的输入限制 随笔 第3张" title=" 输入类型 / input标签的输入限制 随笔 第3张" src="https://www.liuyixiang.com/zb_users/theme/Lucky/style/image/grey.gif" data-original="https://img.liuyixiang.com/image/2019/5/Qbuyia.png" class="aligncenter myImgClass">

 

 

 

 

<input type="month"> 允许用户选择月份和年份。

根据浏览器支持,日期选择器会出现输入字段中。

<form>
  Birthday (month and year):
  <input type="month" name="bdaymonth">
</form>

输入类型<input type= / input标签的输入限制 随笔 第4张" title=" 输入类型 / input标签的输入限制 随笔 第4张" src="https://www.liuyixiang.com/zb_users/theme/Lucky/style/image/grey.gif" data-original="https://img.liuyixiang.com/image/2019/5/EnmuEb.png" class="aligncenter myImgClass">

 

 

 

 

<input type="week"> 允许用户选择周和年。

根据浏览器支持,日期选择器会出现输入字段中。

<form>
  Select a week:
  <input type="week" name="week_year">
</form>

输入类型<input type= / input标签的输入限制 随笔 第5张" title=" 输入类型 / input标签的输入限制 随笔 第5张" src="https://www.liuyixiang.com/zb_users/theme/Lucky/style/image/grey.gif" data-original="https://img.liuyixiang.com/image/2019/5/EZVVZj.png" class="aligncenter myImgClass">

 

 

 

 

<input type="time"> 允许用户选择时间(无时区)。

根据浏览器支持,时间选择器会出现输入字段中。

<form>
  Select a time:
  <input type="time" name="usr_time">
</form>

输入类型<input type= / input标签的输入限制 随笔 第6张" title=" 输入类型 / input标签的输入限制 随笔 第6张" src="https://www.liuyixiang.com/zb_users/theme/Lucky/style/image/grey.gif" data-original="https://img.liuyixiang.com/image/2019/5/qqQ7Zj.png" class="aligncenter myImgClass">

 

 

 

 

<input type="datetime"> 允许用户选择日期和时间(有时区)。Chrome不支持

根据浏览器支持,日期选择器会出现输入字段中。

<form>
  Birthday (date and time):
  <input type="datetime" name="bdaytime">
</form>

输入类型<input type= / input标签的输入限制 随笔 第7张" title=" 输入类型 / input标签的输入限制 随笔 第7张" src="https://www.liuyixiang.com/zb_users/theme/Lucky/style/image/grey.gif" data-original="https://img.liuyixiang.com/image/2019/5/uaEJFr.png" class="aligncenter myImgClass">

 

 

 

<input type="datetime-local"> 允许用户选择日期和时间(无时区)。

<form>
  Birthday (date and time):
  <input type="datetime-local" name="bdaytime">
</form>

输入类型<input type= / input标签的输入限制 随笔 第8张" title=" 输入类型 / input标签的输入限制 随笔 第8张" src="https://www.liuyixiang.com/zb_users/theme/Lucky/style/image/grey.gif" data-original="https://img.liuyixiang.com/image/2019/5/eEvYNr.png" class="aligncenter myImgClass">

 

 

 

 

<input type="email"> 用于应该包含电子邮件地址的输入字段。

 

根据浏览器支持,能够在被提交时自动对电子邮件地址进行验证

 

某些智能手机会识别 email 类型,并在键盘增加 ".com" 以匹配电子邮件输入。

<form action="/demo/demo_form.asp">
  E-mail:
  <input type="email" name="email">
  <input type="submit">
</form>

输入类型<input type= / input标签的输入限制 随笔 第9张" title=" 输入类型 / input标签的输入限制 随笔 第9张" src="https://www.liuyixiang.com/zb_users/theme/Lucky/style/image/grey.gif" data-original="https://img.liuyixiang.com/image/2019/5/QfmIbi.png" class="aligncenter myImgClass">

 

 

 

<input type="search"> 用于搜索字段(搜索字段的表现类似常规文本字段)。

 

<input type="tel"> 用于应该包含电话号码的输入字段。

目前只有 Safari 8 支持 tel 类型。

 

<input type="url"> 用于应该包含 URL 地址的输入字段。

 

根据浏览器支持,在提交时能够自动验证 url 字段。

 

某些智能手机识别 url 类型,并向键盘添加 ".com" 以匹配 url 输入。

 

 

 

<input type="number"> 用于应该包含数字值的输入字段。

能够对数字做出限制

根据浏览器支持,限制可应用到输入字段。

 

<form action="/demo/demo_form.asp">
数量(1 到 5 之间):
<input type="number" name="quantity" min="1" max="5">
<input type="submit">
</form>

 

      输入类型<input type= / input标签的输入限制 随笔 第10张" title=" 输入类型 / input标签的输入限制 随笔 第10张" src="https://www.liuyixiang.com/zb_users/theme/Lucky/style/image/grey.gif" data-original="https://img.liuyixiang.com/image/2019/5/3YRVri.png" class="aligncenter myImgClass">

输入类型<input type= / input标签的输入限制 随笔 第11张" title=" 输入类型 / input标签的输入限制 随笔 第11张" src="https://www.liuyixiang.com/zb_users/theme/Lucky/style/image/grey.gif" data-original="https://img.liuyixiang.com/image/2019/5/z6fiq2.png" class="aligncenter myImgClass">

 

扫码关注我们
微信号:SRE实战
拒绝背锅 运筹帷幄