用户交互，表单标签(重要)

清疚 2022-06-14 00:25 125阅读 0赞

## 1 使用表单标签，与用户交互 ##

网站怎样与用户进行交互？答案是使用HTML表单(form)。表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。

语法：

讲解：

（1） <form> ：<form>标签是成对出现的，以<form>开始，以</form>结束。

（2） action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。

（3） method ： 数据传送的方式（get/post）。

注意:

(1) 所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在 <form></form> 标签之间（否则用户输入的信息可提交不到服务器上哦！）。

(2) method : post/get 的区别这一部分内容属于后端程序员考虑的问题。感兴趣的小伙伴可以查看本小节的 wiki，里面有详细介绍。

## 2 文本输入框、密码输入框 ##

当用户要在表单中键入字母、数字等内容时，就会用到文本输入框。文本框也可以转化为密码输入框。

语法：

`(1) ``type：`

`   当type="text"时，输入框为文本`输入框`;`

`   当type="password"时,` `输入框为密码输入框。`

`(2) ``name：``为文本框命名，以备后台程序ASP 、PHP使用。`

`(3) ``value：``为文本输入框设置默认值。(一般起到提示作用)`

`举例`：

在浏览器中显示的结果：

[![52e4e9be000152ca05250275.jpg][]][52e4e9be000152ca05250275.jpg]

## 3 文本域，支持多行文本输入 ##

当用户需要在表单中输入大段文字时，需要用到文本输入域。

语法：

`(1) ``<textarea>标签是成对出现的，以<textarea>开始，以</textarea>结束。`

`(2) ``cols ：``多行输入域的列数。`

`(3) ``rows ：``多行输入域的行数。`

`(4) ``在<textarea></textarea>标签之间可以输入默认值。`

`举例`：

<form  method="post" action="save.php">
            <label>联系我们</label>
     <textarea cols="50" rows="10" >在这里输入内容...</textarea>
    </form>

注意：代码中的<label>标签在本章5-9中讲解。

在浏览器中显示结果：

[![52e5b4040001f4af05760367.jpg][]][52e5b4040001f4af05760367.jpg]

注意这两个属性可用css样式的width和height来代替：col用width、row用height来代替。（这两个css样式在以后的章节会讲解）

## 4 使用单选框、复选框，让用户选择 ##

`在使用表单设计调查表时，为了减少用户的操作，使用选择框是一个好主意，html中有两种选择框，即单选框和复选框，两者的区别是单选框中的选项用户只能选择一项，而复选框中用户可以任意选择多项，甚至全选。请看下面的例子:`

`语法：`

(1) type:

当 type="radio" 时，控件为单选框

当 type="checkbox" 时，控件为复选框

(2) value：提交数据到服务器的值（后台程序PHP使用）

(3) name：为控件命名，以备后台程序 ASP、PHP 使用

(4) checked：当设置 checked="checked" 时，该选项被默认选中

如下面代码：

[![52e5f7c60001a23f07360267.jpg][]][52e5f7c60001a23f07360267.jpg]

注意：代码中的<label>标签在本章 5-9 中有讲解。

在浏览器中显示的结果：

[![52e5f8010001159804900257.jpg][]][52e5f8010001159804900257.jpg]

注意:同一组的单选按钮，name 取值一定要一致，比如上面例子为同一个名称“radioLove”，这样同一组的单选按钮才可以起到单选的作用。

## 5 使用下拉列表框，节省空间 ##

下拉列表在网页中也常会用到，它可以有效的节省网页空间。既可以单选、又可以多选。如下代码：

[![52e604590001ae4005270185.jpg][]][52e604590001ae4005270185.jpg]

讲解：

(1) value：

[![52e6037300015a9905030165.jpg][]][52e6037300015a9905030165.jpg]

(2) selected="selected"：

设置selected="selected"属性，则该选项就被默认选中。

在浏览器中显示的结果：

[![52e605340001014804520288.jpg][]][52e605340001014804520288.jpg]

## 6 使用下拉列表框进行多选 ##

下拉列表也可以进行多选操作，在<select>标签中设置`multiple="multiple"`属性，就可以实现多选功能，在 windows 操作系统下，进行多选时按下`Ctrl`键同时进行`单击`（在 Mac下使用 Command \+单击），可以选择多个选项。如下代码：

[![52e60c020001b7f805000178.jpg][]][52e60c020001b7f805000178.jpg]

在浏览器中显示的结果：

[![52e60c5d00013ced04900257.jpg][]][52e60c5d00013ced04900257.jpg]

## 7 使用提交按钮，提交数据 ##

在表单中有两种按钮可以使用，分别为：提交按钮、重置。这一小节讲解提交按钮：当用户需要提交表单信息到服务器时，需要用到提交按钮。

语法：

`type``：只有当type值设置为submit时，按钮才有提交作用`

`value``：``按钮上显示的文字`

`举例`：

[![52e613350001461604820109.jpg][]][52e613350001461604820109.jpg]

在浏览器中显示的结果：

[![52e6126f0001496a04480218.jpg][]][52e6126f0001496a04480218.jpg]

## 8 使用重置按钮，重置表单信息 ##

当用户需要重置表单信息到初始时的状态时，比如用户输入“用户名”后，发现书写有误，可以使用`重置按钮`使输入框恢复到初始状态。只需要把type设置为"reset"就可以。

语法：

`<input type="reset" value="重置">`

`type``：只有当type值设置为reset时，按钮才有重置作用`

`value``：``按钮上显示的文字`

`举例`：

[![52e618680001a6b204570101.jpg][]][52e618680001a6b204570101.jpg]

在浏览器中显示的结果：

[![52e6189e000186b604480218.jpg][]][52e6189e000186b604480218.jpg]

输入账号

[![52e618bc00015a1004480218.jpg][]][52e618bc00015a1004480218.jpg]

单击重置按钮

## 9 form表单中的label标签 ##

小伙伴们，你们在前面学习表单各种控件的时候，有没有发现一个标签--label，这一小节就来揭晓它的作用。

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

语法：

注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。

例子：

<form>
      <label for="male">男</label>
      <input type="radio" name="gender" id="male" />
      <br />
      <label for="female">女</label>
      <input type="radio" name="gender" id="female" />
      <label for="email">输入你的邮箱地址</label>
      <input type="email" id="email" placeholder="Enter email">
    </form>

[52e4e9be000152ca05250275.jpg]: /images/20220614/ea0d7ec7511441c59537539f2ccedf9d.png
[52e5b4040001f4af05760367.jpg]: /images/20220614/5a190e56898e4ab283c61146ae475bb5.png
[52e5f7c60001a23f07360267.jpg]: /images/20220614/0042142bcd9c413ab3156790005f7d62.png
[52e5f8010001159804900257.jpg]: /images/20220614/a3fa0ea62e784dd98600bd0cc4727cbb.png
[52e604590001ae4005270185.jpg]: /images/20220614/4348f34c5fac4cf18204f0b9720f30d3.png
[52e6037300015a9905030165.jpg]: /images/20220614/9658deb8ef404c5daea10f3ab5afe66a.png
[52e605340001014804520288.jpg]: /images/20220614/08ccb8deb761499d8f92790b81ce58fb.png
[52e60c020001b7f805000178.jpg]: /images/20220614/838307fa69de4877908c3efaa26b8b67.png
[52e60c5d00013ced04900257.jpg]: /images/20220614/ea04d9a511014f5f9caa1ea01d711c9b.png
[52e613350001461604820109.jpg]: /images/20220614/d6f94940b2784247a53be6a80573ec5f.png
[52e6126f0001496a04480218.jpg]: /images/20220614/384b69ec36e0488c8ac5131f21a87215.png
[52e618680001a6b204570101.jpg]: /images/20220614/6969f7b7b81f4334b80a3d0eb7caa688.png
[52e6189e000186b604480218.jpg]: /images/20220614/65e9c8775c9545839ea660c2091f09ee.png
[52e618bc00015a1004480218.jpg]: /images/20220614/1a367f0dacae410fb553f9bccfa08a26.png