HTML表单

表单

概念：一个包含交互的区域，用于收集用户提供的数据。

1. 基本结构

简单梳理：

标签名	标签 语义	常用属性	单 / 双 标签
form	表单	action ：用于指定表单的提交地址（需要与后端人员沟通后确定）。 target ：用于控制表单提交后，如何打开页面，常用值如下： _self ：在本窗口打开。 _blank ：在新窗口打开。 method ： 用于控制表单的提交方式，暂时只需了解，在后面 Ajax 的课程中，会详细讲解。	双
input	输入框	type ：设置输入框的类型，目前用到的值是 text ，表示普通文本。 name ：用于指定提交数据的名字，（需要与后端人员沟通后确定）。	单
button	按钮		双

示例代码：

<form action="https://www.baidu.com/s" target="_blank" method="get">
    <input type="text" name="wd">
    <button>去百度搜索</button>
</form>

2. 常用表单控件

① 文本输入框

<input type="text">

常用属性如下：

name 属性：数据的名称。

value 属性：输入框的默认输入值。

maxlength 属性：输入框最大可输入长度。

② 密码输入框

<input type="password">

常用属性如下：

name 属性：数据的名称。

value 属性：输入框的默认输入值（一般不用，无意义）。

maxlength 属性：输入框最大可输入长度。

③ 单选框

<input type="radio" name="sex" value="female">女
<input type="radio" name="sex" value="male">男

常用属性如下：

name 属性：数据的名称，注意：想要单选效果，多个 radio 的 name 属性值要保持一致。

value 属性：提交的数据值。

checked 属性：让该单选按钮默认选中。

④ 复选框

<input type="checkbox" name="hobby" value="fitness">健身
<input type="checkbox" name="hobby" value="study">学习
<input type="checkbox" name="hobby" value="Play a game">打游戏

常用属性如下：：

name 属性：数据的名称。

value 属性：提交的数据值。

checked 属性：让该复选框默认选中。

⑤ 隐藏域

<input type="hidden" name="tag" value="100">

用户不可见的一个输入区域，作用是： 提交表单的时候，携带一些固定的数据。

name 属性：指定数据的名称。

value 属性：指定的是真正提交的数据。

⑥ 提交按钮

<input type="submit" value="点我提交表单">
<button>点我提交表单</button>

注意：

1. button 标签 type 属性的默认值是 submit 。

2. button 不要指定 name 属性

3. input 标签编写的按钮，使用 value 属性指定按钮文字。

⑦ 重置按钮

<input type="reset" value="点我重置">
<button type="reset">点我重置</button>

注意点：

1. button 不要指定 name 属性

2. input 标签编写的按钮，使用 value 属性指定按钮文字。

⑧ 普通按钮

<input type="button" value="普通按钮">
<button type="button">普通按钮</button>

注意点：普通按钮的 type 值为 button ，若不写 type 值是 submit 会引起表单的提交。

⑨文本域

<textarea name="msg" rows="22" cols="3">我是文本域</textarea>

常用属性如下：

1. rows 属性：指定默认显示的行数，会影响文本域的高度。

2. cols 属性：指定默认显示的列数，会影响文本域的宽度。

3. 不能编写 type 属性，其他属性，与普通文本输入框一致。

⑩ 下拉框

<select name="from">
<option value="黑">黑龙江</option>
<option value="辽">辽宁</option>
<option value="吉">吉林</option>
<option value="粤" selected>广东</option>
</select>

常用属性及注意事项：

1. name 属性：指定数据的名称。

2. option 标签设置 value 属性， 如果没有 value 属性，提交的数据是 option 中间的文

字；如果设置了 value 属性，提交的数据就是 value 的值（建议设置 value 属性）

3. option 标签设置了 selected 属性，表示默认选中。

3. 禁用表单控件

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

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

4.label 标签

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

两种与 label 关联方式如下：

        1. 让 label 标签的 for 属性的值等于表单控件的 id 。

        2. 把表单控件套在 label 标签的里面。

5. fieldset 与 legend 的使用（了解）

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

示例：

<fieldset>
    <legend>主要信息</legend>
    <label for="zhanghu">账户：</label>
    <input id="zhanghu" type="text" name="account" maxlength="10"><br>
    <label>
        密码：
        <input id="mima" type="password" name="pwd" maxlength="6">
    </label>
    <br>
    性别：
    <input type="radio" name="gender" value="male" id="nan">
    <label for="nan">男</label>
    <label>
        <input type="radio" name="gender" value="female" id="nv">女
    </label>
</fieldset>

6. 表单总结

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