[前端]html5表单元素整理

水深无声 2022-02-16 04:20 288阅读 0赞

### html5表单元素整理 ###

<input> 元素

<select> 元素（下拉列表）

<textarea> 元素（文本域）

<button> 元素(按钮)

**html5新增表单元素**

<datalist> 元素

<keygen> 元素

<output> 元素

### <input> 元素 ###

最重要的表单元素就是 input 元素。  
通过type属性来决定类型,type类型如下:  
  
button 定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）。  
  
checkbox 定义复选框。  
  
file 定义输入字段和 "浏览"按钮，供文件上传。  
  
hidden 定义隐藏的输入字段。  
  
image 定义图像形式的提交按钮。  
  
password 定义密码字段。该字段中的字符被掩码。  
  
radio 定义单选按钮。  
  
reset 定义重置按钮。重置按钮会清除表单中的所有数据。  
  
submit 定义提交按钮。提交按钮会把表单数据发送到服务器。  
  
text 定义单行的输入字段，可在其中输入文本。默认宽度为 20 个字符。

**HTML5增强的表单标签**

email 文本框形式,但是限制内容格式为邮箱格式.  
number 文本框形式,但是限制内容格式为数字.  
range 一个滚轮条.  
![在这里插入图片描述][20190421181631146.png]  
search 文本框形式,输入内容的时候，搜索框后边会自动出现一个小×，点击这个小×，可以清除输入的内容  
![在这里插入图片描述][20190421181922291.png]  
date 选择日期(即年月日)  
week 选择一年的第几周.  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTUxOTk0NDM_size_16_color_FFFFFF_t_70]  
month 选择年月.  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTUxOTk0NDM_size_16_color_FFFFFF_t_70 1]  
url 文本框形式,但是限制内容格式为url.  
color 单击可以选择颜色.  
![在这里插入图片描述][20190421181943119.png]

### <select> 元素（下拉列表） ###

创建下拉列表,下拉选项由子标签<option>定义.

### <textarea> 元素（文本域） ###

创建一个大小可控的文本区.

### <button> 元素(按钮) ###

类似于input的button类型按钮,但是提供了更为强大的功能和更丰富的内容。<button> 与 </button> 标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。例如，我们可以在按钮中包括一个图像和相关的文本，用它们在按钮中创建一个吸引人的标记图像。

### <datalist> 元素 ###

类似文本框,有预设值,可以直接选择也可以输入开头部分,提示完整内容.

### <keygen> 元素 ###

标签规定用于表单的密钥对生成器字段。

当提交表单时，私钥存储在本地，公钥发送到服务器。  
IE不支持.  
[w3c链接][w3c]

### <output> 元素 ###

定义不同类型的输出，比如脚本的输出。 IE不支持.

[20190421181631146.png]: /images/20220216/f027bb72bd9840c6841d2fb085b1bd8c.png
[20190421181922291.png]: /images/20220216/7275fca6cf0343fa9da1f6095da3b84b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTUxOTk0NDM_size_16_color_FFFFFF_t_70]: /images/20220216/6d1b3f431ae04027b30258dd9fa99555.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTUxOTk0NDM_size_16_color_FFFFFF_t_70 1]: /images/20220216/f59e5ce9ddbe4169bb40aea65dc27c92.png
[20190421181943119.png]: /images/20220216/ab85b3cfcd4c42c0b2b7d151e05a7b54.png
[w3c]: http://www.w3school.com.cn/tags/tag_keygen.asp