换种姿势学习HTML5之二：HTML5中的表单1-职坐标

换种姿势学习HTML5之二：HTML5中的表单1

沉沙 2018-10-31 来源：阅读 1606 评论 0

摘要：本篇教程探讨了换种姿势学习HTML5之二：HTML5中的表单1，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通。

本篇教程探讨了换种姿势学习HTML5之二：HTML5中的表单1，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通。

1.新增表单元素与属性
————————————————————————————————————————————————————————
placeholder——是指当文本框（<input type=“text”>或<textarea>）处于未输入状态时文本框中显示的输入提示。当文本框处于未输入状态并且未获取光标焦点时，模糊显示输入提示文字。
<label>搜索：<input type="text" placeholder="请输入搜索项"></label>

效果图：

list——该属性的值为某个datalist元素的id。
Datalist——也是HTML5中新增元素，该元素类似于选择框（select），但是当用户想要设置的值不在选择列表之内时，允许其自行输入。该元素本身并不显示，而是当文本框获得焦点时以提示输入的方式显示。为了避免在没有支持该元素的浏览器上出现显示错误，可以用CSS等将它设定为不显示。它们的用法见下面和autocomplete合用的例子。
autocomplete——用来保护敏感数据，避免本地浏览器对它们进行不安全的存储。可以指定“on”、“off”与“”（不指定）这三种值。不指定时，使用浏览器的默认值（取决于各浏览器的定）。把该属性设为on时，可以显示指定候补输入的数据列表。使用detailst元素与list属性提供候补输入的数据列表，自动完成时，可以将该detailst元素中的数据作为候补输入的数据在文本框中自动显示。
效果图：
代码：

  1  <p>打开autocomplete：<input type="text" name="mr" autocomplete="on" list="testing"/>
  2  <p>关闭autocomplete：<input type="text" name="mr" autocomplete="off" list="testing"/>
  3  <datalist id="testing" style="display:none">
  4   <option value="111222333">111222333</option>
  5     <option value="111222233">111222233</option>
  6     <option value="111233333">111233333</option>
  7  </datalist>

min和max特性——可以将range输入框的数值输入范围限定在最低值和最高值之间。默认的min为0，max为100。输入型控件会根据设置的参数对值范围做出相应调整。例如，创建一个表示型大小的range控件，值范围从0%至100%，代码如下所示：
<input id="confidence" name="mr" type="range" min="0" max="100" value="0">

step——对于输入型控件，设置其step特性能够制定输入值递增或递减的梯度。
例如，按如下方式表示型大小range控件的step特性设置为5：
<input id="confidence" name="mr" type="range" min="0" max="100" step="5" value="0">

设置完成后，控件可接受的输入值只能是初始值与5的倍数之和。也就是说只能输入0、5、10…..100，至于是输入框还是滑动条输入则
由浏览器决定。
Step特性的默认值取决于控件的类型。对于range控件，step默认值为1。为了配合step特性，HTML5引入了stepUp和stepDown两个函数对其进行控制。这两个函数的作用分别是根据step特性的值来增加或减少控件的值。

required——一旦为某输入型控件设置了required特性，那么此项必填，否则无法提交表单。
用法：
<input type="text" id="firstname" name="mr" required>


2.增加与改良的input元素种类
————————————————————————————————————————————————————————
email类型——一种专门用来输入email地址的文本框。
作用说明：提交时如果该文本框中内容不是email地址格式的文字则不允许提交，但是它不检查email地址是否存在。
类型属性：email类型的文本框具有一个multiple属性，它允许在该文本框中是用逗号隔开的有效email地址的一个列表。
使用方法：
<p>Email address:<input type="email" name="e1" multiple>
<p>useless Email Address:<input type="email" name="ue1">

效果图：（IE上没啥表示，这是Firefox上的效果）
url类型——和上面的差不多，自带检查功能

各种时间类型——
作用：方便输入
作用说明：在Opera浏览器中，当该文本框获得焦点时，显示日历，可以在日历中选择日期进行输入。
注意：不是所有的都有用，自己在使用的浏览器上测验

  1  <p>Email address:<input type="email" name="e1" multiple/>
  2  <p>useless Email Address:<input type="email" name="ue1"/>
  3  <p>data-type:<input name="data1" type="date" value="2015-10-4"/>
  4  <p>time-type:<input name="time1" type="time" value="10:00"/>
  5 
  6  <p>datetime-type:<input name="datetime1" type="datetime"/>
  7  <p>datetime-local:<input name="datetime-local1" type="datetime"/>
  8  <p>month-type:<input name="month1" type="month" value="2015-10"/>
  9  <p>week-type:<input name="week1" type="week" value="2015-W28"/>

search类型——Search类型的input元素是一种专门用来输入搜索关键词的文本框。Search类型与text类型仅仅在外观上有区别。（经测验，好像目前来讲，都没区别。。。）
tel类型——被设计为用来输入电话号码的专用文本框。它没有特殊的校验规则，它甚至不强调只输入数字，因为很多电话号码常常带有额外的字符，例如44-1234567。但是在实际开发中可以通过pattern属性来指定对于输入的电话号码格式的验证。

number类型——Number类型的input元素是一种专门用来输入数字的文本框，并且在提交时会检查其中的内容是否为数字。它与min、max、step属性能很好地协作。
显示：在Opear中，它显示为一个微调器控件，将不能超出最大限制和最小限制（如果指定了的话），并且根据step中指定的增量来增加，当然用户也可以输入一个值。
range类型——range类型的input元素是一种只允许输入一段范围内数值的文本框，它具有min属性与max属性，可以设定最小值与最大值（默认为0与100），它还具有step属性，可以指定每次拖动的步幅。在Opera浏览器中，用滑动条的方式进行值的指定
示例：
<p>number-type<input name="number-type" type="number" value="10" step="5" min="0" max="130"/>
<p>音量调节 <input name="r1" type="range" value="50" min="0" max="100" step="2"/>