H5常用的表单属性

H5新增表单属性

属性值	说明
type=“email”	限制用户输入必须为Email类型
type=“url”	限制用户输入必须为URL类型
type=“date”	限制用户输入必须为日期类型
type=“time”	限制用户输入必须为时间类型
type=“month”	限制用户输入必须为月类型
type=“week”	限制用户输入必须为周类型
type=“number”	限制用户输入必须为数字类型
type=“tel”	手机号码（不限制只能输入数字，因为有些特殊电话会有符号）
type=“search”	搜索框
type=“color”	生成一个颜色选择表单

代码：

<form action="">
    <ul>
        <li>邮箱: <input type="email" /></li>
        <li>网址: <input type="url" /></li>
        <li>日期: <input type="date" /></li>
        <li>日期: <input type="time" /></li>
        <li>数量: <input type="number" /></li>
        <li>手机号码: <input type="tel" /></li>
        <li>搜索: <input type="search" /></li>
        <li>颜色: <input type="color" /></li>
        <li> <input type="submit" value="提交"></li>
    </ul>
</form>

手机端效果中，如果是手机号码，那么会显示数字键盘。

新增表单属性

属性	值	说明
required	required	表单拥有该属性表示其内容不能为空，必填
placeholder	提示文本	表单的提示信息，存在默认值将不显示
autofocus	autofocus	自动聚焦属性，页面加载完成自动聚焦到指定表单
autocomplete	off / on	当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。默认已经打开，如 autocomplete=”on “ 关闭 autocomplete =”off”-需要放在表单内同时加上name属性-同时成功提交
multiple	multiple	可以多选文件提交

1. required:必填验证

<form action="">
     用户名: <input type="text" required="required" > <input type="submit" value="提交"> 
</form>

• novalidate:关闭验证
  • 在表单上添加该属性，那么在提交的时候就不会再执行 required验证
• pattern：自定义验证-通过编写正则表达式自定义验证规则 一般和required同时使用
  • 表单事件

2. placeholder:占位符-提示信息

<form action="">
     用户名: <input type="text" placeholder="请输入用户名">
     <input type="submit" value="提交">
</form>

3. autofocus 自动获取焦点
   autofocus：自动获得焦点 (一般页面中放1个)

<form action="">
    用户名: <input type="text" required="required" placeholder="请输入用户名" autofocus="autofocus">
</form>

4. autocomplete 自动完成
   autocomplete 自动完成：自动补全，类似百度搜索框一样，会以下拉菜单形式提示以往输入过的内容

• 当用户在字段开始键入时，浏览器基于之前输入过的值，开始提示
• 默认已经打开 如 autocomplete=on 关闭 autocomplete =off
• 需要放在表单内同时加上name属性

<form action="">
     用户名: <input type="text" name="username" autocomplete="off"> 
     <input type="submit" value="提交"> 
</form>
//注意：代码中需要带上name属性，提交的时候才会将input的内容提交过去

效果如下：

5. multiple:可以多选文件提交

• 结合文件上传标签 <input type="file" > 一起使用
• 以前的input:file只能上传一个文件，现在增加multiple属性即可上传多个文件

<form action="">
    用户名: <input type="text" name="username" > 
    <input type="submit" value="提交"> 
    上传头像: <input type="file" name="" id="" multiple="multiple">
</form>

6. form属性
   在html中，标签是使用来创建供用户输入的html表单，在网页中很常见，比如：注册和登录页面就是用表单实现的。

标签中通常会有很多子元素，用来定义各种交互控件（文本字段、复选框、单选框、提交按钮等等），比如< input>、< button>、< select>、< textarea>等标签。

1. 标签语法格式

<form action="提交地址" method="提交方式">表单内容</form>

说明：表单内容可以是< input>、< textarea>、< button>、< select>、< option>、< optgroup>、< fieldset>、< label>等标签

2. 标签属性

accept：服务器接收到的文件的类型（html5版本也不支持）； accept-charset：服务器可处理的表单数据字符集；
action：当提交表单时向何处发送表单数据；
autocomplete：是否启用表单的自动完成功能，值可以是：on、off，html5新增；
enctype：在向服务器发送表单数据之前如何对其进行编码，method="post"时可以使用，值可以是：multipart/form-data、text/plain等；
method：用于发送表单数据的HTTP方法，值可以是：get、post；
name：规定表单的名称，在xhtml中也废弃，使用id来代替；
novalidate：提交表单时不进行验证，值为：novalidate，html5新增；
target：在何处打开action属性中的地址，值可以是：_blank、_self、_parent、_top；