HTML5表单

标签：html5   html   

HTML5中添加了表单方面的诸多功能，包括增加input输入类型、表单元素、form属性和input属性等。

一.新增的Input输入类型：

     email:      <input type="email" name="user_email" />

     url:           <input type="url" name="user_url" />

     number:  <input type="number" name="user_number"  min="1" max="20" step="4" />   max:规定允许的最大值；min:规定允许的最小值；step:规定合法的数字间隔(如果step="4"，则合法的数是-4、0、4、8)；value:规定默认值

    range:     <input type="range" name="user_range" min="1" max="20" step="4" />

    日期类型: date、month、week、time、datetime、datetime-local

    search:   <input type="search" name="user_search" />

    tel:           <input type="tel" name="user_tel" />

    color:      <input type="color" name="user_color" />

二.新增的input属性：

    autocomplete:  帮助用户在input类型的输入框中实现自动完成内容输入，这些Input类型包括：text、search、url、telephone、email、password、datepickers、range和color；该属性值有3种：on、off和空值

    autofocus:         获取页面表单控件焦点，同一个页面只能使用一个autofocus属性值；设置on即获取焦点
                              <input type="text" name="user_name" autofocus="on" />

    list:                    HTML5中新增了一个datalist元素，可以实现数据列表的下拉效果，外观类似autocomplete，用户可从列表中选择，也可自行输入。而list属性用于指定输入框所绑定的datalist元素，其值是某个datalist的id         

请输入城市<input type="text" list="<span style="color:#ff0000;">text_list</span>" name="weblink" />
<datalist id="<span style="color:#ff0000;">text_list</span>">
   <option value="BeiJing">BeiJing</option>
   <option value="QingDao">QingDao</option>
   <option value="QingHai">QingHai</option>
</datalist>

   min、max、step:  新增的min、max、step属性用于为包含数字或日期的Input输入类型规定限制，也就是给这些类型的输入框加一个数值的约束，适用于date、pickers、number和range标签。

   multiple:该属性支持input输入类型中的file类型一次选择多个文件 

 <input type="file" name="img" multiple="multiple" /><span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">   </span>

  patterm:  用于验证Input类型输入框中用户输入的内容是否与自定义的正则表达式相匹配，适用于以下类型的Input标签：text、search、url、telephone、Email、password。
  请输入邮政编码：  <input type="text" name="zip_code" pattern="[0-9]{6}"/>    该行表示输入框规定必须输入6位数的邮政编码

   placeholder:用于为Input类型的输入框提供一种提示。适用于:text、search、url、telephone、Email和password
    请输入邮政编码：  <input type="text" name="zip_code" pattern="[0-9]{6}"/>    

   required:  内容不能为空 。适用于：text、search、url、telephone、Email、password、date pickers、number、checkbox、radio和file
   <input type="text" name="n_name" required="required"/>

HTML5表单

标签：html5   html   

原文地址：http://blog.csdn.net/feter1992/article/details/45918817