1.表单含义

表单是网页中的一个交互区域，专门用于收集用户所提供的数据。

2.表单标签

标签名标签含义常用属性单/双标签
form表单action:用于指定表单的提交地址（与后端人员沟通）
target:用于控制表单提交后，如何打开页面，常用值如下：
- _self:在本窗口打开
- _blank:在新窗口打开
method:用于控制表单的提交方式，GET/POST/DELETE/PUT 等		双
input输入框type:设置输入框的类型，有多种类型可以设置，目前使用的是 text，表示普通文本；
name:用于指定提交数据的名字，变量名		单
button按钮双
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
       
    <meta charset="UTF-8" />
       
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       
    <title>表单_基本结构</title>
  </head>
  <body>
       
    <form action="https://www.baidu.com/s" target="_self" method="get">
              <input type="text" name="wd" />        
      <button>去百度搜索</button>    
    </form>
       
    <hr />
       
    <form action="https://search.jd.com/search" target="_blank">
              <input type="text" name="keyword" />        
      <button>去京东搜索</button>    
    </form>
  </body>
</html>

3.表单中常用控件

3.1 文本输入框

1
<input type="text" />

常用属性如下

  • name:数据的名称
  • value:输入框的默认输入值
  • maxlength:输入框最大可输入长度

3.2 密码输入框

1
<input type="password" />

常用属性如下

  • name:数据的名称
  • value:输入框的默认输入值(一般不用，无意义)
  • maxlength:输入框最大可输入长度

3.3 单选框

1
2
<input type="radio" name="gender" value="male" checked />男
<input type="radio" name="gender" value="female" />女

常用属性如下

  • name:数据的名称，注意：想要单选效果，多个input标签的name属性要一致
  • value:提交的数据
  • checked:让该单选框被默认选中

3.4 复选框

1
2
3
<input type="checkbox" name="hobby" value="run" />跑步
<input type="checkbox" name="hobby" value="bike" checked />骑车
<input type="checkbox" name="hobby" value="photo" />摄影

常用属性如下

  • name:数据的名称
  • value:提交的数据
  • checked:让该单选框被默认选中

3.5 隐藏域

1
<input type="hidden" name="tag" value="ZDSS" />

作用：用户不可见的一个输入区域，提交表单时，携带一些固定的数据，可以用于防止简单的脚本攻击
常用属性如下

  • name:数据的名称
  • value:提交的数据

3.6 提交按钮

1
2
3
4
<!-- 确认按钮_第一种写法 -->
<button type="submit">确认</button>
<!-- 确认按钮_第二种写法 -->
<input type="submit" value="点我提交" />

注意

  • button标签的type属性，默认值是submit
  • button标签不要指定name
  • input标签编写的按钮，使用``

3.7 重置按钮

1
2
3
4
<!-- 重置按钮_第一种写法 -->
<button type="reset">重置</button>
<!-- 重置按钮_第二种写法 -->
<input type="reset" value="点我重置">

注意：

  • button不要指定name属性
  • input标签编写的按钮，使用value属性指定按钮文字

3.8 普通按钮

1
2
3
4
<!-- 普通按钮_第一种写法  -->
<input type="button" value="检测账户是否被注册">
<!-- 普通按钮_第二种写法  -->
<button type="button">检测账户是否被注册</button>

3.9 文本域

1
<textarea name="other" cols="22" rows="4">文本域</textarea>

常用属性:

  • rows属性：
  • cols属性：指定默认显示的列数，会影响文本域的宽度。
  • 不能编写type属性，其他属性与普通文本输入框一致。

3.10 下拉框

1
2
3
4
5
6
7
8
<select name="place">
	<option value="景">北京</option>
	<option value="沪">上海</option>
	<option value="粤">广东</option>
	<option value="浙">浙江</option>
	<option value="苏">江苏</option>
	<option value="川" selected>四川</option>
</select>

常用属性：

  • name属性：指定数据的名称
  • option标签设置value属性，如果没有value属性，提交的数据是option中间的文字；如果设置了value属性，提交的数据就是value的值（建议设置value属性）
  • option标签设置了selected属性，表示默认选中。

4.禁用表单控件

给表单控件的标签设置disabled既可禁用表单控件

  • input、textarea、button、select、option都可以设置disabled属性

5.label 标签

label标签可与表单控件相关联，关联之后点击文字，与之对应的表单控件就会获取焦点。
两种与label关联方式如下：

  • 让label标签的for属性的值等于表单控件的id
  • 把表单控件套在label标签里面。
1
2
3
4
5
6
<label for="account">账户：</label>
<input id="account" type="text" name="account" value="" maxlength="10"><br>
<label>
	密码：
	<input id="password" type="password" name="pwd" value="" maxlength="10">
</label>

6.fieldset 与 legend 的使用

fieldset可以为表单控件分组，legend标签是分组的标题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<fieldset>
	<legend>主要信息</legend>
	<label for="account">账户：</label>
	<input id="account" type="text" name="account" value="" maxlength="10"><br>
	<label>
		密码：
		<input id="password" type="password" name="pwd" value="" maxlength="10">
	</label>
	<br>
	性别：
	<label>
		<input type="radio" name="gender" value="male" checked>男
	</label>
	<label>
		<input type="radio" name="gender" value="female">女
	</label>
</fieldset>

7.表单总结

标签名标签语义常用属性单/双标签
form表单action属性：表单要提交的地址
target属性：跳转的新地址的打开方式，值:_self、_blank
method属性：请求方式，可选值：GET,POST		双
input多种形式的表单控件type:指定表单控件的类型。
可选值：text,password,radio,checkbox,hidden,submit,reset,button等
name:指定数据的名称
value:
对于输入框：指定默认输入的值
对于单选和复选框：实际提交的数据
对于按钮：显示按钮的文字
disabled:设置表单控件不可以
maxlength:用于输入框，设置最大可输入长度
checked:用于单选按钮和复选框，默认选中		单
textarea文本域name:指定数据名称
rows:指定默认显示的行数，影响文本域的高度
cols:指定默认显示的列数，影响文本域的宽度
双
select下拉框name:指定数据名称
disabled:设置表单控件不可用		双
option下拉框的选项value:该选项事件提交的数据（不指定 value，会把标签中的内容作为提交数据）
selected:默认选中
disabled:设置表单控件不可用		双
button按钮type：设置按钮的类型，值:submit(默认)，reset，button
disabled:设置表单控件不可用		双
label与表单控件做关联for:值要与关联的表单控件的ID值相同双
fieldset表单控件分组双
legend分组名称双