新增表单属性
form控件主要新增的属性:
-
autocomplete 是否启用表单的自动完成功能，取值：on（默认）、off
-
novalidate 提交表单时不进行校验，默认会进行表单校验
autocomplete属性
概念：autocomplete属性规定input 控件是否启用自动完成功能
语法：
<input type="text" autocomplete="属性值" />属性值：
-
on：默认值。表示开启，浏览器会尝试自动完成输入框中的输入，以提供对以前输入过的值的可能匹配
-
off：表示关闭，禁用浏览器或网页自动填充功能
autocomplete属性适用于所有文本框型的input元素
实例：
<form action="" method="post">
<input type="text" autocomplete="on" list="tips">
<datalist id="tips">
<option value="数学"></option>
<option value="语文"></option>
<option value="英语"></option>
<option value="化学"></option>
</datalist>
</form>运行结果
novalidate属性
概念：novalidate属性就是来禁用form元素的所有文本框内置的验证功能
语法：
<form novalidate>
...
</form>实例：
<form action="" novalidate>
<p>
<label for="email">电子邮件：</label>
<input type="email" name="email" id="email" />
</p>
<p>
<label for="tel">手机号码：</label>
<input type="tel" name="tel" id="tel"/>
</p>
<input type="submit" value="提交" />
</form>运行结果
新增表单input元素属性
新增表单元素属性：
-
autofocus 设置初始焦点元素
-
placeholder 提示文字
-
required 是否必填
-
autocomplete 是否启用该表单元素的自动完成功能，跟上面表单属性一样
-
pattern 使用正则表达式（RegExp后面会讲解），进行数据校验
-
list 使文本元素具有下拉列表的功能，需要配置datalist和option标签一起使用
autofocus属性
概念：autofocus属性来实现文本框自动获取焦点
语法：
<input type='text' autofocus="autofocus" />属性值
-
autofocus：表示文本框自动获取焦点。
autofocus属性适用于所有文本框型的input元素
实例：
<input type="text" autofocus />运行结果
placeholder属性
概念：placeholder属性为文本框添加提示内容
语法：
<input type="text" placeholder="提示内容" />
placeholder属性适用于所有文本框型的input元素
实例：
<input type="text" placeholder="请输入你的账号" />
<br/>
<input type="password" placeholder="请输入你的密码" />运行结果
required属性
概念：required属性来定义文本框输入内容不能为空，如果文本框为空，则不允许提交
语法：
<input type="text" required />required属性适用于所有文本框型的input元素
实例：
<input type="text" required />
<br/>
<input type="submit" value="提交">运行结果
pattern属性
概念：pattern属性为文本框添加验证功能
语法：
<input type="text" pattern="正则表达式" />在新增表单元素那节当中介绍过，email,url,tel这3个类型的input 元素，本质上都内置了pattern属性，因此它们会自动进行相关匹配验证。可以用novalidate属性将其禁用验证机制。
实例：
<input type="text" pattern="^[a-zA-Z]\w{2,9}$" />
<br/>
<input type="submit" value="提交" />运行结果
list属性
概念：使文本具有下拉列表的功能，但需要datalist和option标签一起使用
语法：
<input type="text" list="datalist中的id">
<datalist id="list">
<option value=""></option>
<option value=""></option>
<option value=""></option>
</datalist>实例：
<input type="text" name="city" id="city" list="cityList">
<datalist id="cityList">
<option value="南京"></option>
<option value="北京"></option>
<option value="上海"></option>
<option value="广东"></option>
</datalist>运行结果
