HTML 表单介绍-526互联

HTML 表单介绍

当您想要通过网页来收集一些用户的信息（例如用户名、电话、邮箱地址等）时，就需要用到 HTML 表单。表单可以接收用户输入的信息，然后将其发送到后端应用程序，例如 PHP、Java、Python 等，后端应用程序将根据定义好的业务逻辑对表单传递来的数据进行处理。

表单属于 HTML 文档的一部分，其中包含了如输入框、复选框、单选按钮、提交按钮等不同的表单控件，用户通过修改表单中的元素（例如输入文本，选择某个选项等）来完成表单，通过表单中的提交按钮将表单数据提交给后端程序。

表单的基本语法

在 HTML 中创建表单需要用到<form>标签，具体语法如下所示：

<form action="URL" method="GET|POST">
  表单中的其它标签
</form>

对属性的说明：

**action **属性用来指明将表单提交到哪个页面；
**method **属性表示使用哪个方式提交数据，包括 GET 和 POST 两种方式，它们两者的区别如下：
1. GET：用户点击提交按钮后，提交的信息会被显示在页面的地址栏中。一般情况下，GET 提交方式中不建议包含密码，因为密码被提交到地址栏，不安全。
2. POST：如果表单包含密码这种敏感信息，建议使用 POST 方式进行提交，这样数据会传送到后台，不显示在地址栏中，相对安全。

get和post的区别：

指代不同:

get：从指定的资源请求数据。

post：向指定的资源提交要被处理的数据
规则不同:

get： 请求可被缓存；请求保留在浏览器历史记录中；请求可被收藏为书签；请求不应在处理敏感数据时使用；请求有长度限制；请求应当用于获取数据。

post：请求不会被缓存；请求不会保留在浏览器历史记录中；不能被收藏为书签；请求对数据长度

没有要求。
数据要求不同:

get：当发送数据时，get 方法向 URL 添加数据；URL 的长度是受限制的（URL 的最大长度是

2048 个字符）。与 post 相比，get 的安全性较差，因为所发送的数据是 URL 的一部分。

POST：发送数据无限制。post 比 get更安全，因为参数不会被保存在浏览器历史或 web 服务器

日志中。

get请求的参数 url 可见，而 post 请求的参数 url 不可见。

表单属性

HTML 为<form>标签提供了一些专用的属性，如下表所示：

属性	可选值	描述
accept	MIME_type	HTML5 中不再支持，设置服务器要接收的文件类型
accept-charset	character_set	设置表单数据的字符集（默认为 HTML 文档字符集）
action	URL	设置要将表单提交到何处（默认为当前页面）
autocomplete	on、off	设置是否启用表单的自动完成功能（默认开启）
enctype	application/x-www-form-urlencoded、 multipart/form-data、 text/plain	设置在提交表单数据之前如何对数据进行编码（适用于 method="post" 的情况）
method	get、post	设置使用哪种 HTTP 方法来提交表单数据（默认为 get）
name	text	设置表单的名称
novalidate	novalidate	如果使用该属性，则提交表单时不进行验证
target	_blank、_self、_parent、_top	设置在何处打开 action 属性设定的链接（默认为 _self）

action和 method是最常用的两个属性。

完整的表单包含以下元素

form 用于创建 HTML 表单
input 控件，单标签，可用于设置输入框、单选框、复选框、上传文件、提交按钮等
label 为对应的 input 标签定义标注（可以认为是一个标记或说明）；如果被标注的是输入框，点击标注内容时光标自动在输入框中聚焦
textarea 控件，用于创建多行文本输入框（文本域）
select 用于定义下拉列表，需要与 option 标签结合使用；使用 select 时需要设置 name 属性，用于对提交到服务器的表单数据进行标识
option 定义下拉列表中的项，默认只能选择一项；使用时需要设置 value 属性，提交表单时会将对应的选项值提交到服务器
fieldest 对相关的表单元素进行分组，通常与 legend 标签结合使用
legend 为 fieldest 的分组元素定义标题
button 定义一个按钮，在表单中使用该元素则这个元素具有提交表单的功能；通常在表单中通过 input 标签的 type 属性来设置提交表单的按钮

HTML 表单 - 输入元素

多数情况下被用到的表单标签是输入标签。

输入类型是由 type 属性定义。

接下来我们介绍几种常用的输入类型。

文本域（Text Fields）

文本域通过标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。

<form>
用户名: <input type="text" name="firstname">
</form>

注意:表单本身并不可见。同时，在大多数浏览器中，文本域的默认宽度是 20 个字符。

密码字段

密码字段通过标签来定义:

<form>
密码: <input type="password" name="pwd">
</form>

注意：密码字段字符不会明文显示，而是以星号 ***** 或圆点 . 替代。

单选按钮（Radio Buttons）

标签定义了表单的单选框选项:

<form action="">
    <input id="sex" type="radio" name="sex" value="male">
    <label for="sex">男</label>
    <br>
    <input id="sex2" type="radio" name="sex" value="female">
    <label for="sex2">女</label>
</form>

复选框（Checkboxes）

定义了复选框。

复选框可以选取一个或多个选项：

<form action=""  method="POST">
  <input id="1" type="checkbox" name="vehicle" value="Bike">
  <label for="1">我喜欢自行车</label>
  <br>
  <input id="2" type="checkbox" name="vehicle" value="Car">
  <label for="2">我喜欢小汽车</label>
  <br>
  <input id="3" type="checkbox" name="vehicle" value="Car">
  <label for="2">我喜欢超跑</label>
</form>

提交按钮(Submit)

定义了提交按钮。

当用户单击确认按钮时，表单的内容会被传送到服务器。表单的动作属性 action 定义了服务端的文件名。

action 属性会对接收到的用户输入数据进行相关的处理:

<form>
  用户名: <input type="text" name="user">
  <input type="submit" value="Submit">
</form>

文本域(textarea )

定义文本域 (一个多行的输入控件)

文本区域中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。

可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小，不过更好的办法是使用 CSS 的 height 和 width 属性。

缩放设置：

禁止缩放：resize: none;
水平缩放：resize: horizontal;
垂直缩放：resize: vertical;
水平垂直缩放：resize: both;

<form>
    文本域：<textarea name="" id="" cols="30" rows="10"></textarea>
</form>

`<label>`标签:

定义了 <input> 元素的标签，一般为输入标题

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

方式一：
- for属性,让标签和指点的input元素建立关联,多数使用在单选或复选
- 给单选或复选后面的文字加入label标签,for属性值是input的id值
方式二：
- 将input元素包含在label标签中
- 如果将input放置在label标签之间,那么for属性就可以不用

注：和单选、复选结合使用，提高用户体验。

 <label for="phone">手机号码</label>
    <input type="tel" name="phone" id="phone">
<br>
    爱好：
    <label><input type="checkbox" name="hobby" value="足球">足球</label>
    <label><input type="checkbox" name="hobby" value="篮球">篮球</label>
    <label><input type="checkbox" name="hobby" value="羽毛球">羽毛球</label>
	<label><input type="checkbox" name="hobby" value="乒乓球">乒乓球</label>

`<fieldset>`、`<legend>` 标签

<fieldset>标签可以将表单内的相关元素分组。

<fieldset>标签会在相关表单元素周围绘制边框。

<legend>元素为 <fieldset>元素定义标题。

<fieldset>
    <legend>测试</legend>
    <p>
        <label for="username">用户名：</label><input type="text" name="username" 				id="username">
    </p>
    <p>
        密码：<input type="password" name="password" placeholder="请输入密码">
    </p>
</fieldset>

`<select>`、`<option>` 标签

<select>定义了下拉选项列表

<option>定义下拉列表中的选项（一个条目）。

size属性用来定义列表中显示的列表项,在select标签设置multiple属性用来定义是否可以多选

selected指定默认选中

<form action="" method="get">
    <p>
        请选择课程:
        <select name="recourse">
            <option value="高等数学" selected>高等数学</option>
            <option value="离散数学">离散数学</option>
            <option value="高等数学">高等数学</option>
            <option value="概率论">概率论</option>
        </select>
    </p>
</form>

`<optgroup>`: 定义选项组

对列表项进行分组并命名,必须使用该标签的label属性才可以命名;

1、把对应的option标签放在optgroup里面

2、给optgroup添加label属性,用以列表组命名

<form action="" method="get">
    <!-- selected指定默认选中 -->
    请选择课程:
    <select name="recouse">
        <!-- optgroup可以进行分组 label="理科"属性命名分组的标题 -->
        <optgroup label="理科">
            <option value="高等数学">高等数学</option>
            <option value="离散数学" selected>离散数学</option>
            <option value="线性代数">线性代数</option>
            <option value="概率论">概率论</option>
        </optgroup>
        <optgroup label="文科">
            <option value="语文">语文</option>
            <option value="历史">历史</option>
            <option value="政治">政治</option>
            <option value="地理">地理</option>
        </optgroup>
    </select>
</form>

HTML5 新的 input 类型

HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。

控件名称	type属性值	描述
电子邮箱	email	包含 e-mail 地址的输入域(有校验)，
拾色器	color	color 类型用在input字段主要用于选取颜色选择你喜欢的颜色:
日期字段	date datetime datetime-local month week time	定义日期字段：包含年月日定义日期字段：（UTC 时间）(仅opera支持) 定义日期字段：包含年月日时分（无时区）定义日期：年月定义年中的周数定义时间
数值框	number	输入类型用于包含数字值的输入字段，可以设置可接受数字的限制。使用min属性和max属性设置最小和最大值 step设置数字间隔如果step=“3” ,那么数值间隔是3
数值滑块空间	range	用于应该包含一定范围内数字值的输入域。。 range 类型显示为滑动条。使用min属性和max属性设置最小和最大值,step设置数字间隔
搜索框	search	用于搜索字段，比如站内搜索或谷歌搜索等。
电话号码框	tel	定义输入电话号码字段,但是不会进行校验
url地址	url	包含 URL 地址的输入字段。会在提交表单时对 url 字段的值自动进行验证。

注意:并不是所有的主流浏览器都支持新的input类型，不过您已经可以在所有主流的浏览器中使用它们了。即使不被支持，仍然可以显示为常规的文本域。

总结

1、我们在表单里面填写的数据，最终以key=value的形式提交给服务器

key：表单控件name属性的值

value：输入的数据 或 选择的选项

2、单选框和复选框的name属性的值必须保持一致

3、单选框和复选框必须提供value属性，用来作为表单提交的值

text文本输入框和passowrd密码框，你输入的内容作为value提交

4、单选框和复选框的默认选中，只需要添加checked属性即可

5、文件上传框可以通过accept属性来限定文件的类型。我们可以通过multiple属性来实现多选。

6、select定义下拉框，option定义下拉框选项，需要给其定义value属性及其值

我们可以通过size属性来控制下拉框显示的数量

通过multiple属性来实现多选

7、下拉框的默认选中，只需要添加selected属性即可

表单

HTML

表单html

表单html-body-form笔记html

表单html-input input html

表单html form api

526互联

HTML 表单介绍