HTML5---疯狂的表单

HTML5中变化较大之一的是表单，传统的表单，即HTML4之前的表单，我们称之为---表单1.0,在H5中我们把新的表单称之为---表单2.0

注意：表单1.0的所有标签和属性在表单2.0中都是适用的！

表单2.0中有很多新特性，下面从三个方面介绍表单2.0

第一：新的input type----10个，了解！

第二：新的表单标签----4个，掌握！

第一：新的表单属性----11个，重点！

第一：新的input type 

我们熟悉的原来表单1.0的input type有：

<input type="text" />  文本输入框

<input type="password" /> 密码输入框

<input type="checkbox" /> 复选框

<input type="radio" /> 单选框

<input type="fill" /> 文件选择框

<input type="hidden" /> 隐藏框

<input type="submit" /> 提交按钮框

<input type="reset" /> 重置按钮框

<input type="button" />  普通按钮框

.......

表单2.0中新出的10个input type属性有：

<input type="email" />

<input type="number" />

<input type="url" />

<input type="tel" />

<input type="color" />

<input type="range" />

<input type="search" />

<input type="data" />

<input type="month" />

<input type="week" />

以下详细介绍各自的含义和功能：

email：在表单提交时提供了格式验证功能，要求@左右各有一个字符即可，错误提示信息可以定制，但外观无法定制（是窗口）

<input type="email">

number：呈现一个数字输入框，在提交时会验证数字格式，使用min、max、step指定最小值、最大值、步长

<input type="number" min="18" max="60" step="2">

url：提供了URL验证输入框，只要满足字母+冒号即可

<input type="url">

tel：提供了电话号码输入框，在手机浏览器中会弹出数字模拟键盘

<input type="tel">

search：显示一个搜索框，在手机浏览器中会在模拟键盘右下角显示“搜索”按钮

range：显示为一个滑块组件(数值选择组件)，使用min、max、step指定最小值、最大值、步长

<input type="range" min="18" m ax="60" step="2">

color：显示一个颜色选择器

date：显示一个日期选择器

month：显示一个月份选择器

week：显示一个星期选择器

代码如下：

<form action="">
        邮箱名：<input type="email" name="userEmail"/><br/>
        年龄值: <input type="number" name="old"/><br/>
        博客地址：<input type="url" name="userWB"/><br/>
        电话号码:<input type="tel" name="usephone"/><br/>
        请选择: <input type="range" name="chlicel" id="r1"/><br/>    
        请搜索: <input type="search" name="useSearch"/><br/>
        请选择颜色:<input type="color"/><br/>
        年月日:<input type="date"/><br/>
        年月: <input type="month"/><br/>
        年周:<input type="week"/><br/>
    </form>

效果如下：

第二：新的表单元素

表单1.0中的表单元素有：

<input />输入框

<select> <option></option></select>  选择框

<textarea></textarea> 文本域输入框

<button></button> 按钮

.....

表单2.0中新增的4个表单元素：

<datalist><option>XXXX</option></datalist>    数据列表

<progress></progress>  进度条

<meter></meter> 刻度尺、刻度条

<output></output> 输出框

以下详细介绍各自的含义和功能：

(1)datalist：数据列表

可用于为另一个输入框提供静态的输入建议

<datalist id="my-list">

<option>XXXX</option>

</datalist>

<input type="text" list="my-list">

 

  (2)progress：进度条

用于显示某个过程的进度信息，若不指定value，则左右无限滚动；若指定了value，则固定为指定的值

<progress min="0" max="1" value="0.5"></progress>

 

  (3)meter：刻度尺、度量衡

通过不同的颜色显示指定的数值在哪个范围“最优”-“合理”-“危险”范围：

最优值在上下限之间：黄-绿-黄

最优值在下限之下：绿-黄-红

最优值在上限之上：红-黄-绿

<meter min="0" max="100" low="30" high="70" optimum="50" value="60"></meter>

min：最小值

max：最大值

low：合理值中最低限度

high: 合理值中最高限度

optimum:最合适的值

value：当前值 

  (4)output：输出

外观效果与普通的span一样。是语义标签，表示此处的内容是一个计算后的结果的输出。一般可以使用JS根据其它输入域值的改变修改output中的内容。

小计：<output>￥30.00</output>

代码如下：

<form action="">
        <datalist id="dishe">
            <option value="詹姆斯">詹姆斯</option>
            <option value="科比">科比</option>
            <option value="邓肯">邓肯</option>
        </datalist>
        NBA：<input type="text" list="dishe"/>
        <br/>
        进度条：<progress></progress>

	<br/>
        进度条2：<progress min="0" max="1" value="0.8"></progress><br/>
        <!-- low：下限 high:上限 optimum:最优值-->
        <!-- 最优值在上下限之间,颜色变化：黄-绿-黄-->
        机油量:<meter min="0" max="100" low="30" high="70" optimum="60" value="100"></meter>
        <br/>
        <!-- 最优值在下限之下,颜色变化：绿-黄-红-->
        机油量2:<meter min="0" max="100" low="30" high="70" optimum="60" value="0" id="m1"></meter>
        <br/>
        PM2.5:<meter min="0" max="500" low="100" high="300" optimum="30" value="0" id="m2"></meter>
        <br/>
        <!-- 最优值在上限之上,颜色变化：红-黄-绿-->
        工资数:<meter min="0" max="20000" low="10000" high="70000" optimum="100000" value="0" id="m3"></meter>
        <br/>
        单价：￥15.00
        <button type="button" id="b1">计算</button>:<output id="o1">￥30.00</output>
    </form>

效果如下：

注意：以上表单新元素，仅用于数据展示，不能被提交！

第三：新的表单属性

表单1.0的表单属性：

id  唯一标示

style 样式

title 标题

class 类

name 名称

value 值

type 类型

checked 默认被选中

selected 默认被 选中

disabled 禁止使用

......

表单2.0新增的11个表单属性：

placeholder  占位符

autofocus 自动获得焦点

autocomplete 是否启用自动补全

multiple 多个、多项

form 表单

required 必填

min 最小值

max 最大值

minlength 最小长度

maxlength 最大长度

pattern 正则样式

以下详细介绍各自的含义和功能：

(1)placeholder：占位符

  用于在输入框中显示提示性文字，与value不同，value是可以被提交到服务器的，而placeholder不会被提交

(2)autofocus：自动获得输入焦点

  指定当前元素获得输入焦点

(3)autocomplete：是否启用自动补全功能

  <input autocomplete="off">

(4)multiple：多个/多项

  用于指定input type="file/email"可以有多个输入项，使用英文逗号分隔

  <input type="email" multiple>

 (5)form：表单

  用于指定当前元素(放在表单外部)从属于哪个表单

   <form id="f1"></form>

   <input form="f1">

(6)required：必填

  指定当前输入域内容不能为空

   (7)minlength：最小长度

  限定当前输入域中字符最少个数

(8)maxlength：最大长度

  限定当前输入域中字符最大个数

(9)min：最小值

  限定当前数字输入域中数值最小值

(10)max：最大值

  限定当前数字输入域中数值最大值

(11)pattern：（正则）样式

  限定当前输入域中必须输入符合指定正则表达式的值

  <input name="phone" pattern="1[3578]\d{9}">

注意：min/max 与minlength/maxlength的区别：min/max是数字域上的限制，只能限制数字的大小，而minlength/maxlength是文本域上的限制，是限制字符长度的

代码如下：

<form action="">
        用户名:<input type="text" placeholder="请输入你的用户名" value="请输入你的用户名"/><br/>
        密码:<input type="password" placeholder="请输入你的密码"/><br/>
        自动获得焦点：<input type="text" autofocus/><br/>
        多个邮箱: <input type="email"  name="my-email" multiple/><br/>
        必填: <input type="text" required/><br/>
        限定长度: <input type="text" minlength="6" maxlength="9"/><br/>
        手机号--必须符合正则表达式： <input type="text" name="phone" pattern="1[3578]\d{9}"/>
        <br/>
    </form>
    <!-- 用于指定当前元素（放在表单外部）从属那个表单-->
    外面的表单元素：<input type="text" form="my-form" name="outform"/>


  
  

效果如下：

总结：

H5表单逐渐被应用广泛，但是由于样式是固定的，现在项目开发中一般使用JS代替。

以上最主要记住第三点，表单的新属性，常被使用在验证上

上述示例和效果图，由于截图上传的原因很多都没有展示出来，如果要了解和学习H5表单的特性，自己一定要动手敲代码！！

希望能帮助到你！！