前言
智能表单为HTML5的新增内容
一、智能表单常用的几种属性:
- value:设置文本框里的默认值
- placeholder:占位符(不用删)
- required:设置必填字段
- disabled:禁止用户填写或点击
- novalidate:取消表单验证
- password:密码框
- autofocus:光标聚集
- pattern:正则,设置文本框里面的内容所匹配的格式
- autocomplete:自动完成
- file:文件上传
- datetime-local:日期
- multiple:支持多选,允许上传多个文件
二、使用方法
代码如下(示例)
<form action="" method="GET" id="form1">
<p>
<label>用户名:</label>
<input type="text" name="user1" placeholder="请输入用户名"
required autofocus pattern="^[\u4e00-\u9fa5]{0,}$">
</p>
<p>密码框:<input type="password" name="pwd" placeholder="请输入密码"disabled></p>
<!-- multiple:支持多选,允许上传多个文件 -->
<input type="file" multiple name="">
<input type="submit" value="提交" >
<input type="button" value="普通" disabled>
<input type="button" value="按钮" >
</form>
结果:
form:指定表单以外的元素跟随提交的表单id
<input type="text" name="user2" form="form1">
<form action="" method="GET">
<p>网址:<input type="url"></p>
<p>email邮箱地址:<input type="email"></p>
<!-- step:控制数量的变化步幅 -->
<p>数量:<input type="number" value="0" step="2" min="0" max="50"></p>
<!-- 表示范围的滑块 -->
<p>
范围:0 <input type="range" value="10" min="0" max="100" step="10"> 100
</p>
<p>
颜色:<input type="color" name="">
</p>
<p>
日期:<input type="datetime-local">
</p>
<p>
月份:<input type="month">
</p>
<p>
日期:<input type="date">
</p>
<p>
周:<input type="week">
</p>
<p>
时间:<input type="time">
</p>
<p>
省份:<select name="" id="">
<option value="">河南</option>
<option value="">河北</option>
<option value="">蒙古</option>
<option value="">新疆</option>
</select>
</p>
<p>
身份:<input type="text" list="person">
<datalist id="person">
<option value="">司机</option>
<option value="">警察</option>
<option value="">小学生</option>
<option value="">喷子</option>
</datalist>
</p>
<p>
<select name="" id="">
<option value="">中国</option>
<option value="">巴基斯坦</option>
<option value="">美国</option>
<option value="">日本</option>
</select>
</p>
<!-- label文本提示 -->
<p>
网址:<input type="text" list="site">
<datalist id="site">
<option value="www.baidu.com" label="百度网址"></option>
<option value="www.foidx.com" label="百度"></option>
</datalist>
</p>
<output>结果输出</output>
<input type="submit" value="提交">
结果: