HTML5风采——制作表单

HTML5风采——制作表单

参考《响应式布局设计：HTML5和CSS3实战》

        说到HTML5和CSS3的好处，实在太多了，从众多技术书籍的作者提到HTML5和CSS3便抑制不住的激动刻意看出，这绝对是很有趣的东西！HTML5和CSS3结合起来简直所向披靡，代码越来越精简而高效，不仅带来了很好的用户体验，还给了开发者很大的便捷，保质还“减量”！

        顺便多嘴一下下，作为一个初学者，比起自己琢磨，阅读真的是一个能快速掌握重点知识和常用技巧的办法，就拿做表单来说，打开一个网页后本想模仿一个漂亮的表单，结果发现无从下手，接着当我把这本书啃到表单这部分内容的时候，我简直开心得要跳起来~当然啦，要确定自己真的掌握了，而不是看完就忘，要多练习，不然就等于白看了。
       好，进入正题。

=====================================================================================

<span style="font-family:Arial;font-size:18px;"><form action="#" method="get" autocomplete="off"></span>

<span style="font-family:Arial;font-size:18px;"><input id="" name="" type="text" placeholder="Please write here." required aria-required="true" autofocus /></span>

<span style="font-family:Arial;font-size:18px;"></form></span>

占位字符placeholder="text"

在input元素中使用，其value默认显示为占位符文字，输入框获取焦点时消失，失去焦点后且没输入值时再次显示。

必填项required aria-required="true"

提交表单时若必填项空着，就会显示警告，但警告的方式因不同浏览器和不同输入框类型而不同，该属性不能用于range、color、button、hidden类型的输入框。aria-required="true"是为屏幕阅读器用户而设置的。

自动聚焦autofocus

表单加载完成时有一个表单域被默认聚焦。只能有一个表单域设置autofocus属性。

禁用自动完成autocomplete

追加在form或input元素上，通常autocomplete默认值为on，设置为autocomplete="off"后可以保护敏感数据，或者让用户手动输入信息。

===============================================================================================

定义表单域

<span style="font-family:Arial;"><fieldset></span>

<span style="font-family:Arial;">     <legend>标题</legend></span>

<span style="font-family:Arial;">     <label <span style="color:#ff0000;">for="abc"</span>>Firstname：</label><input id="first_name" <span style="color:#ff0000;">name="abc"</span> type="text" required aria-required /></span>

<span style="font-family:Arial;"></fieldset></span>

fieldset元素定义表单域，legend元素定义表单域的标题，这2个是语义化元素，会显示为一个被边框包裹起来的表单域，若不需要边框就把fieldset元素的边框样式设置为无即可。

label元素定义表单的说明文字,通过用for属性设置一个与对应的input元素一样的name值与input建立联系。

=================================================================================================

list属性与datalist元素

自动补全，只显示匹配部分的值

通过给<datalist>的list设置一个与<input>相同的id值建立联系

<span style="font-family:Arial;font-size:14px;"><label for="abc"></label></span>

<span style="font-family:Arial;font-size:14px;"><input<span style="color:#ff0000;"> list="fish"</span> name="abc" type="tel"/></span>

<span style="font-family:Arial;font-size:14px;"><datalist<span style="color:#ff0000;"> id="fish"</span>></span>

<span style="font-family:Arial;font-size:14px;">    <option>18012345678</option></span>

<span style="font-family:Arial;font-size:14px;">    <option>18112345678</option></span>

<span style="font-family:Arial;font-size:14px;">    <option>18123456789</option></span>

<span style="font-family:Arial;font-size:14px;">    <option>13512345678</option></span>

<span style="font-family:Arial;font-size:14px;">    <option>13532443565</option></span>

<span style="font-family:Arial;font-size:14px;"></datalist></span>

如上，比如我输入180的时候会显示一个备选值，18012345678，如果我输入181则显示option元素中开头是181的列表组，当然，你可以忽略它继续手动输入完整的值。

===========================================================================================

表单输入类型

       输入类型最大的作用就是限制用户的输入数据，也就是说理想情况是用户输入不符合要求的信息时应该显示用户，但事实上是不是这样呢？
       除此之外，输入类型会让触屏设备显示匹配的键盘，比如输入类型为url时键盘上会出现一个“.com”的按键。

===========================================================================================

      提交部分表单信息

       当你不需要提交所有的表单信息时，可以通过在需要提交的input元素中追加一个值为<form>的id值的form属性

       比如我只需要提交下面前2个表单的信息时：

<span style="font-family:Arial;font-size:14px;"><fieldset></span>

<span style="font-family:Arial;font-size:14px;">	<label for="zxc"></label><input name="zxc"  <span style="color:#ff0000;">form="abc"</span>/></span>

<span style="font-family:Arial;font-size:14px;">	<label for="zaq"></label><input name="zaq"  <span style="color:#ff0000;">form="abc"</span>/></span>

<span style="font-family:Arial;font-size:14px;">	<label for="zdr"></label><input name="zdr" /></span>

<span style="font-family:Arial;font-size:14px;">	<form<span style="color:#ff0000;"> id="abc"</span> action="#" method="get"></span>

<span style="font-family:Arial;font-size:14px;">	     <input type="submit" value="GO"/></span>

<span style="font-family:Arial;font-size:14px;">	</form></span>

<span style="font-family:Arial;font-size:14px;"></fieldset></span>

=======================================================================================================================

CSS3中针对表单的伪类选择器

input:required——选择必填表单域
input:focus:invalid——选择当前聚焦且含有非法输入值的表单域

input:focus:valid——选择当前聚焦且含有合法输入值的表单域

我们经常会看到必填表单的红色边框，输入值符合要求时后方有个红色交叉，不符合要求时便有个绿色勾，可用下列代码实现：

<span style="font-family:Arial;font-size:14px;">input:required{</span>

<span style="font-family:Arial;font-size:14px;">border: 1px solid rgba(253, 8, 8, 0.29);</span>

<span style="font-family:Arial;font-size:14px;">}</span>

<span style="font-family:Arial;font-size:14px;">input:focus:invalid{</span>

<span style="font-family:Arial;font-size:14px;">background:url(红色交叉图的地址) no-repeat right;</span>

<span style="font-family:Arial;font-size:14px;">padding-right: 3px;</span>

<span style="font-family:Arial;font-size:14px;">}</span>

<span style="font-family:Arial;font-size:14px;">input:focus:valid{</span>

<span style="font-family:Arial;font-size:14px;">background:url(绿色勾图的地址) no-repeat right;</span>

<span style="font-family:Arial;font-size:14px;">padding-right: 3px;</span>

<span style="font-family:Arial;font-size:14px;">}</span>