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>

原文地址:https://www.cnblogs.com/han201388/p/5735314.html