form表单简介

在html中，表单是经常用到的，用来与用户交互并提交数据。在 Web 网页中，表单用来给访问者填写信息，从而能采集客户端信息，使网页具有交互的功能，例如，用户进行注册和登录页面就是用表单实现的，而表单在网页中主要负责数据采集功能。

标签的语法格式

<form action="提交地址" method="提交方式">表单内容</form>

其中，表单的内容可以是< input>、< textarea>、< button>、< select>、< option>、< optgroup>、< fieldset>、< label>等标签.

表单元素

一个完整的表单包含三个基本组成部分：表单标签、表单域、表单按钮。其中表单标签是指<form>标签本身，它是一个包含表单元素的区域，使用<form></form>定义；表单域是<form>标签中用来收集用户输入的每一项，通常用input标签来定义，input标签有不同的类型，对应用户不同的数据；而表单按钮用来提交<form>表单中的所有信息到服务器。

常见的表单元素如下：

form: 定义供用户输入的表单。
fieldset: 定义域。即输入区加有文字的边框。
legend：定义域的标题，即边框上的文字。
label：定义一个控制的标签。如输入框前的文字，用以关联用户的选择。
input: 定义输入域，常用。可设置type属性，从而具有不同功能。
textarea: 定义文本域，默认可通过鼠标拖动调整大小。
button: 定义一个按钮。
select: 定义一个选择列表，即下拉列表。
option: 定义下拉列表中的选项。

标签属性

下表展示了每个标签的属性以及其对应的功能。

运行示例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>运行示例1</title> 
</head>
<body>
 
<form action="demo-form.php">
名: <input type="text" name="FirstName" value="aaa"><br>
姓: <input type="text" name="LastName" value="bbb"><br>
<input type="submit" value="提交">
</form>
 
<p>点击"提交"按钮，表单数据将被发送到服务器上的“demo-form.php”。</p>
 
</body>
</html>

运行结果

带有复选框的表单

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>运行示例2</title> 
</head>
<body>
 
<form action="demo-form.php" method="get">
  <input type="checkbox" name="vehicle[]" value="Bike"> I have a bike<br>
  <input type="checkbox" name="vehicle[]" value="Car" checked="checked"> I have a car<br>
  <input type="submit" value="提交">
</form>
 
</body>
</html>

运行结果

页面显示选项：

跳转之后的选项：

form表单的相关属性

action：此属性表示提交表单时要执行的操作，通常是将表单数据提交到服务器处理表单数据的文件脚本中。
target：此属性表示在提交表单之后，服务器相应数据在何处显示，默认值是_self，表示在当前窗口显示，值_blank表示在新窗口中显示。
method：此属性表示提交表单时要使用的HTTP方法，可选值有get和post两种，默认值是get。

ladel标签

ladel标签改进了对鼠标用户的可用性，它能够使鼠标点击标签的文本触发输入框获取焦点。也能够使按钮触发点击事件。

其中label标签的for属性指定的字段要与相应input标签的id字段相同，才能生效。也可以不设置for和id字段，则包裹内生效。

所以，如果label标签没有包裹input标签，则必须设置for和id对应字段才能生效；如果label标签包裹了input标签，则可以不设置for和id字段也会生效。

对于form表单暂时就总结这么多，随着学习的深入，之后也将进行更为细致的总结。

form表单的使用总结

form表单简介

标签的语法格式

表单元素

标签属性

运行示例

运行结果

带有复选框的表单

运行结果

form表单的相关属性

ladel标签