HTML5表单type类型详解

HTML5表单type类型

 

<form action="#" method="post" enctype="multipart/form-data">

 

用户名：<!--（text ，定义单行输入字段，用户可在其中输入文本，默认是20个字符）-->

  <input type="text" name="sub" value="" placeholder="请输入用户名"/><br/>

 <!--注：Placehoder是一个很实用的属性，它能在text框里面显示"请输入用户名"的字眼，可以给体验者一种指引的作用，它在用户键入后，会自动消失，同时只显示用户键入的内容，省去了value属性如果值为"请输入用户名"时，用户在键入前还要把它删除掉的麻烦。-->

 

密&emsp;码：

  <input type="password" name="passwd" placeholder="请输入密码" required /><br>

<!--注：required表示该项是必填项，如果为空，浏览器会自动提醒用户填写，否则不能提交通过。-->

隐藏域： <input type="hidden" name="city" value="gz"/>

 

 上传文件：<input type="file" name="file"/><br/>

<!-- 注意：利用这项功能时，在 form 标签中要指定method属性。要把method 指定为post, enctype属性指定为 multipart/form-data。-->

 

 颜色器：<input type="color"/><br/><br/>

 

日期：<br/>

  <input type="date"/><br/>

  <input type="datetime"/>（未知为何没效果）<br/>

  <input type="time"/><br/>

  <input type="datetime-local"/><br/><br/>

 

 定义日期的月：<br/>

  <input type="month"/><br/><br/>

 

 定义日期的周：<br/>

  <input type="week"/><br/><br/>

 

  邮件：<br/>

  <input type="email"/><br/><br/>

 

数字：<br/>

  ¥<input type="number" min="0" max="10"/><br/>

 

按钮：<br/>

<input type="button" name="ann" value="我是一个按钮"/><br/>

<!-- 注：往往结合JavaScript使用来启动运行脚本。如在button中使用onclick调用JavaScript中function定义的函数内容-->

 

数字字段：<br/>

<input type="range" min="0" max="10"/><br/>

 搜索框 ：<br/>

  <input type="search"/><br/><br/>

 

 定义用于URL的文本字段：<br/>

  <input type="url"/><br/><br/>

 

提交：<br/>

<input type="submit" value="提交"/><br/><br/>

重置：<br/>

<input type="reset"/>

 

</form>