HTML5新增的表单属性

时间:2022-11-06 14:31:01

HTML5新增的表单属性

  • 整理时间:2017-10-4 整理人:info#haixia.net(将#替换成@,来信必复)
序号 属性名称 描述
1 placeholder 占位符,类似于value属性,设置默认值可提示信息
2 autofocus 自动焦点,页面渲染时自动获取焦点
3 required 必填项,如果为空则无法提交并将焦点自动定位在上面
4 pattern 对输入内容进行正则验证
5 list 限定输入内容的列表,列表由标签创建
6 height和width <input type="image">input类型为图像时,设置图像的宽高
7 min、max和step input类型为数字或日期类型时,设置取值范围与步长(间隔)
8 novalidate 用在<form>标签中,提交时不对数据进行验证
  • 1、placeholder:设置提示信息或默认值

    <input type="text" name="name" placeholder="用户名不能为空">
  • 2、autofocus 自动获取输入焦点

    <input type="text" name="name" placeholder="用户名不能为空" autofocus>
  • 3、required 设置字段为必填项

    <input type="text" name="name" placeholder="用户名不能为空" required>
  • 4、pattern 正则表达式验证,更精准地控制用户输入

序号 模式 描述 实例
1 [] 限定范围 [0-9]、[a-z]、[A-Z][0-9a-zA-Z]
2 {} 限定数量 {3}必须为3个,{3,6}3个到6个之间,{3,}至少3个
3 ^ 限制开头 ^php[0-9][a-z]{2,5} php开头跟一个数字再跟2个5个字母,例如:php5aaa
4 $ 限制结尾 [0-9]{2}[a-z]{3}abc$

注释:pattern 属性适用于以下 <input> 类型:text, search, url, telephone, email 以及 password 。

<input type="text" name="country" pattern="[A-Za-z]{3}" placeholder="三字母国家代码(不分大小写)"
  • 5、list:list的属性值与datalist的id值必须一致,实现datalist列表与控件绑定

    <label for="search">搜索:</label>
    <input type="text" id="search" list="keyword">
    <datalist id="keyword">
    <option value="html">html</option>
    <option value="css">css<option>
    <option value="javascript">javascript</option>
    <option value="php">php</option>
    <option value="python">python</option>
    </datalist>
  • 6、width和height:只需要设置其中一个即可,另一个等比例缩放

    <input type="image" src="1.jpg" width="50" alt="提交">
  • 7、min\max\step:区间与步长设置

    工资:<input type="number" name="number" min="1200" max="12000" step="500">
  • 8、novalidate:提交时放弃数据验证

    <form action="addEdit.php" method="post" novalidate>