代码改变世界

疯狂的表单-html5新增表单元素和属性

2015-11-27 17:51  文日尧  阅读(9447)  评论(0)  编辑  收藏  举报

疯狂的表单

2015/11/27 16:44:07

从三方面来介绍html5表单的新特性

表单结构更灵活

要提交数据的控件可以布局在form标签之外，看下面的代码，表单元素可以写到form元素之外，只需在元素中加入form="form1"属性，也可提交到form元素指定的服务器地址

<body>
<form action="upload.php" method="post" accept-charset="utf-8" id="form1">
</form>
<input type="text" name="username" value="" form="form1">
<input type="submit" name="sub" value="提交" form="form1">
</body>

新增表单元素

我们以前学过的表单元素包括“text”、“button”、“file”、"radio"等，html5中新增加了一些表单元素，下面列出这些元素及其作用

  • email 类型用于验证email的格式，当提交表单时会自动验证email域的值
  • url 类型用于验证 URL 地址的格式，当提交表单时会自动验证url域的值
  • number 类型会根据你的设置提供选择数字的功能，min属性设置最小值、max属性设置最大值，value属性设置当前值，step属性设定每次增长的值，某些浏览器还不支持
  • range 类型用于应该包含一定范围内数字值的输入域，其会以一个滑块的形式展现，min属性设置最小值、max属性设置最大值，value属性设置当前值，如果没有设置，则其默认值的范围是1-100
  • 日期和时间类型：HTML5 拥有多个可供选取日期和时间的新输入类型：
    date - 选取日、月、年
    month - 选取月、年
    week - 选取周和年
    time - 选取时间（小时和分钟）
    datetime - 选取时间、日、月、年（UTC 时间）
    datetime-local - 选取时间、日、月、年（本地时间）
  • search 类型用于搜索域，比如站点搜索或 Google 搜索，为其加上results="s"属性，则会在搜索框前面加上一个搜索图标
  • tel类型用于验证输入的是否是电话格式的内容，此元素现在还没有浏览器支持
  • color类型会提供一个颜色拾取器，供用户选择颜色，并将用户选择的颜色填充到此元素中

案例如下，大家可以将代码拷贝或者自己编写之后，在浏览器中查看效果

<form action="upload.php" method="post" accept-charset="utf-8" id="form1">        
    <br> 主页:
    <input type="url" name="url" value="" placeholder="个人主页" required>
    <br> 邮箱:
    <input type="email" name="email" value="" placeholder="邮箱" required>
    <br> 生日:
    <input type="date" name="date" value="" required>
    <br> 时间:
    <input type="time" name="time" value="" required>
    <br> 星期:
    <input type="week" name="week" value="" required>
    <br> 年龄:
    <input type="number" name="age" value="">
    <br> 薪水:
    <input type="range" name="range" value="">
    <br> 电话:
    <input type="tel" name="tell" value="" placeholder="都不支持">
    <br> 颜色:
    <input type="color" name="mycolor">
    <br>
    <input type="search" name="key" value="" results="s"><br>
    <input type="submit" name="sub" value="提交" form="form1">
</form>

浏览器的支持情况

chrome：

firefox：

Opera：

Microsoft Edge：

好，我们对微软的进步进行表扬！

新增表单属性

除了新增的表单元素之外，html5中还新增了一些表单属性

新的 form 属性：

autocomplete
novalidate

新的 input 属性：

autocomplete
autofocus
form
form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
height 和 width
list
min, max 和 step
multiple
pattern (regexp)
placeholder
required

在下面的案例中，我们对一些常用的属性做了解释，大家直接看代码和代码旁边的注释，然后对照浏览器的运行结果就理解其意义了

<body>
<!--
placeholder:用于在文本框未输入时提示作用
autofocus:用于控件自动获取焦点
-->
<input type="search" name="key" value="" results="s" placeholder="君乐宝" autofocus="true">
<input type="button" name="" value="搜索">
<br>
<!--
novalidate:在控件中加入了required、emial、url等验证后，如果想让这些验证失效，可以在表单中将novalidate设置为tyue
-->
<form action="upload.php" method="post" accept-charset="utf-8" id="form1" novalidate="true">
    <!--
required:必填
autocomplete:在网页的文本框中输入部分内容或者双节时，经常会看到在下面显示输入过的内容，
这就是html5的新特性：自动完成，如果不想使用此功能，将其设置为off即可
-->
    <input type="text" name="UserName" value="" required autocomplete="off">
    <br>
    <!--
multiple:在选择文件时，默认只能单选，加上这个属性后，则可以使用鼠标选中多个文件进行上传
   -->
    选择文件
    <input type="file" name="upload" value="" multiple="multiple">
    <br>
    <!--
list：这个属性要和datalist元素一起使用，指定此文本框的可选择项，另外其相较于select的优点在于还可以输入
   -->
    区号：
    <input type="text" name="age" value="" list="list1">
    <br>
    <datalist id="list1">
        <option value="0312">保定</option>
        <option value="0311">石家庄</option>
        <option value="010">北京</option>
        <option value="0313">唐山</option>
    </datalist>
    <!--
formaction:可以更改点击此按钮式提交到服务器的处理程序
formmethod:可以更改向服务器提交数据的方式
   -->
    <input type="submit" name="subsave" value="提交">
    <input type="submit" name="subresset" value="更改" formaction="1.php" formmethod="get">
</form>
</body>