6.HTML输入表单标签元素介绍

[TOC]

0x00 前言简述

本章将主要给各位看友介绍表单form中常用的标签元素属性，本节标签一览如下所示:

<form> : 定义供用户输入的 HTML 表单。
<label> : 定义 input 元素的标注。
<input> : 定义输入控件。
<textarea> : 定义多行的文本输入控件。
<button> : 定义按钮。
<select> : 定义选择列表（下拉列表）。
<optgroup> : 定义选择列表中相关选项的组合。
<option> : 定义选择列表中的选项。
<fieldset> : 定义围绕表单中元素的边框。
<legend> : 定义 fieldset 元素的标题。
<datalist> HTML5 : 定义下拉列表。
<output> HTML5 : 定义输出的一些类型。
<keygen> HTML5 : 定义生成密钥。
<isindex> : 定义与文档相关的可搜索索引。HTML5 中不支持

0x00 表单标签元素

form 标签

描述: 表单是一个包含表单元素的区域，表单元素是允许用户在表单中输入内容,其包含 文本框、文本域(textarea)、按钮、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等元素都要放在form标签里面或者进行form的id值的调用，否则提交的数据到不了后端。

属性:

name 属性: 规定表单的名称.
action 属性: 规定当提交表单时向后端URL发送表单数据。
method 属性: 规定提交发送表单时 HTTP 方法，通常为GET或者POST，当然也有可能为其他方法。
accept-charset 属性: 规定服务器可处理的表单数据字符集。
enctype 属性: 规定在向服务器发送表单数据之前如何对其进行编码, 在 POST 请求使用其值为(text/plain、multipart/form-data、application/x-www-form-urlencoded)。
target 属性: 规定在窗口何处打开 action URL。
autocomplete 属性（NEW）: 规定 form 或 input (name: text, search, url, telephone, email, password, date pickers)域应该拥有自动填充功能，在某些浏览中需要开启自动填充才能使其生效, 设置 on 或 off。
novalidate 属性（NEW）: 规定在提交表单时不应该验证 form 或 input 域(name: text, search, url, telephone, email, password, date pickers)域应该拥有自动填充功能，在某些浏览中需要开启自动填充才能使其生效。

示例:

<!-- 1.指定表单提交给后端的地址以及方法，实现自动填充。 -->
<form action="https://api.weiygeeek.top/v2/version.jsp" method="get" autocomplete="on">     <!--启动自动显现上一次输入过的数据,当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项 -->
  <label for="username">First name: </label><input type="text" name="username"/><br/>
  <label for="email">E-mail: </label><input type="email" name="email" autocomplete="off"/>   <!--取消自动显现上一次输入过的数据 -->
</form>

补充扩展

何时使用 Get ? 何时使用 Post ? Get 请求：用于没有敏感信息，且少量数据的提交，其表单数据在页面地址栏中是可见的，例如 action page.php?firstname=Mickey&lastname=Mouse Post 请求：通常用于敏感信息以及大量数据的提交，它更加安全其在页面地址栏中被提交的数据是不可见的。

label 标签

描述: 该元素（标签）表示用户界面中某个元素的说明, 其通常与input连用，它可以标签文本不仅与其相应的文本输入元素在视觉上相关联，也可以点击关联的标签来聚焦或者激活这个输入元素，就像直接点击输入元素一样。

属性:

for : 即和 label 元素在同一文档中的可关联标签的元素的 id
form : 表示与 label 元素关联的 form 元素（即它的表单拥有者）。

示例:

<!-- # 方式1.lable 与 input 属性绑定。 -->
<label for="url">URL: </label> <input type="text" name="url" value="https://blog.weiyigeek.top" />

<!-- # 方式2.将input直接放在label里，此时则不需要 for 和 id 属性，因为关联已隐含存在 -->
<label> URL:
  <input type="text" name="url" value="https://blog.weiyigeek.top" />
</label>

input 标签

描述: 该元素用于为基于 Web 的表单创建交互式控件，以便接受来自用户的数据。取决于设备和用户代理不同，表单可以使用各种类型的输入数据和控件。<input> 元素是目前是 HTML 中最强大、最复杂的元素之一，因为它有大量的输入类型和属性组合。

type 属性: 指定该标签值的类型，其类型如下所示: | type类型 | 说明 | | ————– | ————————– | | text | 文本框 | | password | 密码框 | | radio | 单选框 | | checkbox | 多选框 | | email | 邮箱格式 | | tel | 电话格式 | | search | 搜索格式 | | url | Url格式 | | range | 左右范围格式 | | number | 数字加减格式 | | color | 用于指定颜色的控件 | | file | 上传文件 | | hidden | 隐藏Input输入框 | | time | 时间选择器(mobile） | | week、month | 周数、日期选择器 (mobile） | | date | 日期选择器 (mobile） | | datetime | 日期时间选择器 (mobile） | | datetime-local | 输入日期和时间的控件，不包括时区。 | | image | 设置按钮外观 |

示例

1.文本框（Text Fields）、提交按钮(Submit Button)类型, 文本域通过<input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域, 并且当用户单击确认按钮时，表单的内容会被传送到服务端。

<form method="get" action="service.php">
  <label for="first-name">First name:</label>
    <input type="text" name="first-name"><br>   
  <label>Last name: <input type="text" name="last-name"></label>
  <input type="submit" value="确定" name="submit" />    <!-- 提交按钮 -->
  <input type="reset" value="重置" name="reset" />      <!-- 重置按钮 -->
</form>

<!-- 注意：表单本身是不可见的，并且注意一个文本字段的默认宽度是20个字符。 -->

2.密码类型，通过标签 <input type="password"> 来定义, 通常在输入敏感信息时需要使用该标签。

<form action="info.php" method="get">
<label>username:<input type="text" name="username" placeholder="请输入用户名" /></label>  <!--placeholder属性可以提示用户输入-->
<label>password:<input type="password" name="password" placeholder="请输入用户密码" /></label>
</form>
<!-- 注意: 密码字段字符不会明文显示，而是以星号或圆点替代。 -->

WeiyiGeek.上述示例1、2图

3.单选按钮（Radio Buttons）、多选按钮（Checkboxes）类型，通过 <input type="radio|checkbox"> 标签定义了表单单选框选项以及多选按钮。

<!-- 单选框 -->
<form action="info.php" method="post">
  <input type="radio" name="sex" value="male">Male|男<br/>
  <input type="radio" name="sex" value="female">Female|女<br/>
</form>

<!-- 多选框 -->
<form action="service.php" method="get">
  <input type="checkbox" name="vehicle" value="HTML" checked="checked">HTML<br/>
  <input type="checkbox" name="vehicle" value="CSS" checked="checked">CSS<br />
  <input type="checkbox" name="vehicle" value="JS">Javascript<br />
  <input type="submit" value="提交" name="ok"> 
</form>

WeiyiGeek.单选框与多选框结果图

4.email邮箱地址类型，用于应该包含电子邮件地址的输入字段。根据浏览器支持，能够在被提交时自动对电子邮件地址进行验证。

<h4>利用form 发送邮件到 master@weiyigeek.top</h4>
<form action="MAILTO:master@weiyigeek.top" method="post" enctype="text/plain">
  Name:<input type="text" name="name" placeholder="your name"><br>
  E-mail:<input type="email" name="mail" placeholder="your email"><br>
  Comment:<input type="text" name="comment" placeholder="your comment" size="50"><br>
  <input type="submit" value="发送">
  <input type="reset" value="重置">
</form>

<!-- 注意: 某些智能手机会识别 email 类型，并在键盘增加 ".com" 以匹配电子邮件输入。 -->

<form action="/demo/demo_form.asp">
  E-mail:
  <input type="email" name="email">
  <input type="submit">
</form>

WeiyiGeek.邮箱地址输入类型结果图

5.search类型,用于搜索域，比如站点搜索或 Google 搜索，search 域显示为常规的文本域。

<form action="search.asp">
  搜索谷歌：<input type="search" name="blog-search">
  <input type="submit">
</form>

6.tel类型,用于应该包含电话号码的输入字段,目前只有 Safari 8 支持 tel 类型。

<form> Telephone:<input type="tel" name="usrtel"></form>

7.number类型,用于应该包含数字值的输入字段,您能够对数字做出限制，根据浏览器支持，限制可应用到输入字段。

<form>
  Quantity (between 1 and 5):
  <input type="number" name="quantity" min="1" max="5">
  <!-- 按照+10进行加减 -->
  <input type="number" name="points" min="0" max="100" step="10" value="30">
</form>

WeiyiGeek.URL与Number类型示意图

8.url 类型用于应该包含 URL 地址的输入字段。根据浏览器支持，在提交时能够自动验证 url 字段。

<form>
  Blog:<input type="url" name="homepage">
</form>

9.color 类型，用于应该包含颜色的输入字段，根据浏览器支持，颜色选择器会出现输入字段中。

Select your favorite color:
<input type="color" name="favcolor" value="#ff0000">

10.range 类型, 用于应该包含一定范围内的值的输入字段，根据浏览器支持，输入字段能够显示为滑块控件。

Points: 0<input type="range" name="points" min="0" max="10">10

11.image 类型, 用于自定义图片来表示，功能与Bottun差不多。

User name: <input type="text" name="user_name" /><br />
<input type="image" src="http://weiyigeek.top/img/login.jpg" width="99" height="99" />

12.日期时间类型，用于包含日期时间的的输入字段，根据浏览器（给手机端的）支持，日期（时间）选择器会出现输入字段中。

<!-- 语法 -->
<input type="date">  日期的输入字段
<input type="month"> 选择月份和年份
<input type="week">  选择周和年
<input type="time">  选择时间（无时区）
<input type="datetime"> 选择日期和时间（有时区）
<input type="datetime-local"> 选择日期和时间（无时区）

<!-- 示例 -->
生日：<input type="date" name="bday">
生日（月和年）：<input type="month" name="bday_month"><br /><br />
Select a week：<input type="week" name="year_week"><br /><br />
请选取一个时间：<input type="time" name="usr_time"><br /><br />
Birthday (date and time): <input type="datetime" name="bday_time"><br /><br />
Birthday (date and time): <input type="datetime-local" name="bday_time">

WeiyiGeek.示例结果图

13.file 类型，允许用户可以从他们的设备中选择一个或多个文件，选择后这些文件可以使用提交表单的方式上传到服务器上，或者通过 Javascript 代码和文件 API 对文件进行操作，注意该提交必须为POST请求。

<label for="avatar">Choose a profile picture:</label>
<input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg">

<!-- accept 允许的格式 -->
accept=".png, .jpg, .jpeg"
<!-- 
字符串 audio/*，表示“任何音频文件”。
字符串 video/*，表示“任何视频文件”。
字符串 image/*，表示“任何图片文件”。
字符串 .doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document ，表示接受类似于 MS Word 文档的任何文件。
-->

<!-- capture 说明 -->
capture (en-US) 属性是一个字符串（在移动设备上使用才能体现），如果 accept (en-US) 属性指出了 input 是图片或者视频类型，则它指定了使用哪个摄像头去获取这些数据。
值 user 表示应该使用前置摄像头和（或）麦克风，值 environment 表示应该使用后置摄像头和（或）麦克风
<label for="picture">拍张照片你的脸:</label>  
<input type="file"
       name="picture"
       accept="image/*"
       capture="user">
<label for="voice">记录你的声音:</label>
<input type="file"
       name="voice"
       accept="audio/*"
       capture>

<!-- multiple 说明-->
multiple (en-US) 文件 input 允许用户选择多个文件。
<form method="post" enctype="multipart/form-data">
  <label for="file">选择要上传的文件</label>
  <input type="file" id="file" name="file" multiple />
  <button>提交</button>
</form>

textarea 标签

描述: 该元素表示一个多行纯文本编辑控件，当你希望用户输入一段相当长的(可容纳无限数量)、不限格式的文本，例如评论或反馈表单中的一段意见时，这很有用。其默认字体是等宽字体（通常是 Courier）

属性:

autocomplete: 是否使用浏览器的记忆功能自动填充文本（off、on）。
autofocus: 页面加载完毕之后是否自动给本元素添加焦点。
rows: 元素的输入文本的行数（显示的高度）。
cols: 文本域的可视宽度, 必须为正数，默认为 20 (HTML5)。
disabled: 禁用文本域
form: 指定跟自身相关联的表单
maxlength: 允许用户输入的最大字符长度 (Unicode)
minlength: 允许用户输入的最小字符长度 (Unicode)
name: 元素的名称。
placeholder: 向用户提示可以在控件中输入的内容
readonly: 不允许用户修改元素内文本。
required: 提示用户这个元素的内容必填
spellcheck: 该属性设为 true 时，表明该元素会做拼写和语法检查。
wrap: 指定文本换行的方式默认为 soft 在到达元素最大宽度的时候，不会自动插入换行符. 设置为hard时，在文本到达元素最大宽度的时候，浏览器自动插入换行符 (CR+LF) 。

示例:

<!-- 案例1 -->
<label for="story">告诉我们你的故事:</label>
<textarea id="story" name="story" rows="5" cols="33">
It was a dark and stormy night...
</textarea>

<!-- 案例2 -->
<form action="service.php" method="get">
  <p>个人介绍:</p>
  <textarea placeholder="请输入你的个人简介,而且是必须填写得" cols="20" rows="2" required></textarea><br />
  <p>禁用文本框:</p>
  <textarea placeholder="请输入你的个人简介,而且是必须填写得" cols="20" rows="2" disabled>我是一位爱好网络计算机的学生</textarea><br />
  <p>单位介绍:</p>
  <textarea placeholder="唯一极客公司 , 你不能修改" cols="20" rows="3" readonly autofocus ></textarea><br />
  <input type="submit" value="提交" name="submit" />
  <input type="reset" value="重置" name="reset" />
</form>

WeiyiGeek.文本域展示结果图

温馨提示：在文本输入区内的文本行间，用 “%OD%OA” （回车/换行）进行分隔。温馨提示：虽然你通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。

button 标签

描述: 该元素可以如其意定义一个按钮，在其元素内部您可以放置内容，比如文本或图像，这是该元素与使用 <input> 元素创建的按钮之间的不同之处。

属性:

type 属性: 其值可为 button、reset、submit 。
name 属性: button 的名称，与表单数据一起提交。
value 属性: button 的初始值。
formaction 属性: 配合submit类型，将表单里面的数据分别提交到后端文件进行处理。
formenctype 属性: 覆盖 form 元素的 enctype 属性，其值为application/x-www-form-urlencoded、multipart/form-data、text/plain。
formnovalidate 属性: 带有两个提交按钮的表单（进行验证或不进行验证），第一个提交按钮提交数据时带有默认的表单验证，第二个提交按钮提交数据时不进行表单验证。
formmethod 属性: 覆盖原生表单的 HTTP 方法。
formtarget 属性: 表示接收提交的表单后在哪里显示响应（_self,_top,_blank,_parent）

温馨提示: 请始终为 <button> 元素规定 type 属性 (三种类型)，不同的浏览器对 <button> 元素的 type 属性使用不同的默认值，提交的话建议使用input, 但是前者更容易使用css样式。

示例

<!-- 示例1.type 属性 -->
<button type="button" onclick="alert('你好，世界，HTML!')">点我!点我!</button>

<!-- 示例2.formaction 、formenctype 、formnovalidate属性 -->
<form action="info.php" method="get">
  First name: <input type="text" name="fname" /><br>
  <button type="submit">提交</button><br>
  <button type="submit" formaction="demo-info.php" formenctype="text/plain">提交</button>
  <button type="submit" formnovalidate>不验证提交</button>
</form>

综合实践： 示例文件: https://github.com/WeiyiGeek/DevelopLearnig/blob/main/fore-end/HTML/example/study/03.DivisionSection.html