HTML | HTML表单 - IPS99技术分享

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

1. 基本结构

简单梳理：

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

我们先记住表单的整体形式，稍后会对表单控件进行详细讲解。

示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表单_基本结构</title>
</head>
<body>
    <form action="https://www.baidu.com/s">
        <input type="text" name="wd">
        <button>去百度搜索</button>
    </form>
    <hr>
    <form action="https://search.jd.com/search" target="_self" method="get">
        <input type="text" name="keyword">
        <button>去京东搜索</button>
    </form>
    <hr>
    <a href="https://search.jd.com/search?keyword=手机">搜索手机</a>
</body>
</html>

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="smoke">抽烟
<input type="checkbox" name="hobby" value="drink">喝酒
<input type="checkbox" name="hobby" value="perm">烫头

常用属性如下：：

name 属性：数据的名称。

value 属性：提交的数据值。

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

⑤ 隐藏域

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

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

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

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

⑥ 提交按钮

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

注意：

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

button 不要指定 name 属性

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

⑦ 重置按钮

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

注意点：

button 不要指定 name 属性

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

⑧ 普通按钮

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

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

⑨文本域

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

常用属性如下：

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

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

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

⑩ 下拉框

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

常用属性及注意事项：

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

option标签设置 value 属性，如果没有 value 属性，提交的数据是 option 中间的文字；如果设置了 value 属性，提交的数据就是 value 的值（建议设置 value 属性）

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表单_常用控件</title>
</head>
<body>
    <form action="https://search.jd.com/search">
        <!-- 文本输入框 -->
        账户：<input type="text" name="account" value="zhangsan" maxlength="10"><br>
        <!-- 密码输入框 -->
        密码：<input type="password" name="pwd" value="123" maxlength="6"><br>
        <!-- 单选框 -->
        性别：
        <input type="radio" name="gender" value="male">男 
        <input type="radio" name="gender" value="female" checked>女<br>
        <!-- 多选框 -->
        爱好：
        <input type="checkbox" name="hobby" value="smoke" checked>抽烟
        <input type="checkbox" name="hobby" value="drink">喝酒
        <input type="checkbox" name="hobby" value="perm" checked>烫头<br>
        其他：
        <textarea name="other" cols="23" rows="3"></textarea><br>
        籍贯：
        <select name="place">
            <option value="冀">河北</option>
            <option value="鲁">山东</option>
            <option value="晋" selected>山西</option>
            <option value="粤">广东</option>
        </select>
        <!-- 隐藏域 -->
        <input type="hidden" name="from" value="toutiao">
        <br>
        <!-- 确认按钮_第一种写法 -->
        <button type="submit">确认</button>
        <!-- 确认按钮_第二种写法 -->
        <!-- <input type="submit" value="确认"> -->
        <!-- 重置按钮_第一种写法 -->
        <!-- <button type="reset">重置</button> -->
        <!-- 重置按钮_第二种写法 -->
        <input type="reset" value="点我重置">
        <!-- 普通按钮_第一种写法 -->
        <input type="button" value="检测账户是否被注册">
        <!-- 普通按钮_第二种写法 -->
        <!-- <button type="button">检测账户是否被注册</button> -->
    </form>
</body>
</html>

3. 禁用表单控件

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

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表单_禁用表单控件</title>
</head>
<body>
    <form action="https://search.jd.com/search">
        <!-- 文本输入框 -->
        账户：<input disabled type="text" name="account" value="zhangsan" maxlength="10"><br>
        <!-- 密码输入框 -->
        密码：<input type="password" name="pwd" value="123" maxlength="6"><br>
        <!-- 单选框 -->
        性别：
        <input type="radio" name="gender" value="male">男 
        <input type="radio" name="gender" value="female" checked>女<br>
        <!-- 多选框 -->
        爱好：
        <input type="checkbox" name="hobby" value="smoke" checked>抽烟
        <input type="checkbox" name="hobby" value="drink">喝酒
        <input type="checkbox" name="hobby" value="perm" checked>烫头<br>
        其他：
        <textarea name="other" cols="23" rows="3"></textarea><br>
        籍贯：
        <select name="place">
            <option value="冀">河北</option>
            <option value="鲁">山东</option>
            <option value="晋" selected>山西</option>
            <option value="粤">广东</option>
        </select>
        <!-- 隐藏域 -->
        <input type="hidden" name="from" value="toutiao">
        <br>
        <!-- 确认按钮_第一种写法 -->
        <button type="submit">确认</button>
        <!-- 确认按钮_第二种写法 -->
        <!-- <input type="submit" value="确认"> -->
        <!-- 重置按钮_第一种写法 -->
        <!-- <button type="reset">重置</button> -->
        <!-- 重置按钮_第二种写法 -->
        <input type="reset" value="点我重置">
        <!-- 普通按钮_第一种写法 -->
        <input disabled type="button" value="检测账户是否被注册">
        <!-- 普通按钮_第二种写法 -->
        <!-- <button type="button">检测账户是否被注册</button> -->
    </form>
</body>
</html>

4.label 标签

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

两种与 label 关联方式如下：

让 label 标签的 for 属性的值等于表单控件的 id 。
把表单控件套在 label标签的里面。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表单_label标签</title>
</head>
<body>
    <form action="https://search.jd.com/search">
        <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>
        <br>
        爱好：
        <label>
            <input type="checkbox" name="hobby" value="smoke">抽烟
        </label>
        <label>
            <input type="checkbox" name="hobby" value="drink">喝酒
        </label>
        <label>
            <input type="checkbox" name="hobby" value="perm">烫头
        </label><br>
        <label for="qita">其他：</label>
        <textarea id="qita" name="other" cols="23" rows="3"></textarea><br>
        籍贯：
        <select name="place">
            <option value="冀">河北</option>
            <option value="鲁">山东</option>
            <option value="晋">山西</option>
            <option value="粤">广东</option>
        </select>
        <input type="hidden" name="from" value="toutiao">
        <br>
        <input type="submit" value="确认">
        <input type="reset" value="点我重置">
        <input type="button" value="检测账户是否被注册">
    </form>
</body>
</html>

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>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表单_fieldset与legend</title>
</head>
<body>
    <form action="https://search.jd.com/search">
        <!-- 主要信息 -->
        <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>
        <br>
        <fieldset>
            <legend>附加信息</legend>
            爱好：
            <label>
                <input type="checkbox" name="hobby" value="smoke">抽烟
            </label>
            <label>
                <input type="checkbox" name="hobby" value="drink">喝酒
            </label>
            <label>
                <input type="checkbox" name="hobby" value="perm">烫头
            </label><br>
            <label for="qita">其他：</label>
            <textarea id="qita" name="other" cols="23" rows="3"></textarea><br>
            籍贯：
            <select name="place">
                <option value="冀">河北</option>
                <option value="鲁">山东</option>
                <option value="晋">山西</option>
                <option value="粤">广东</option>
            </select>
        </fieldset>
        <input type="hidden" name="from" value="toutiao">
        <br>
        <input type="submit" value="确认">
        <input type="reset" value="点我重置">
        <input type="button" value="检测账户是否被注册">
    </form>
</body>
</html>

6. 表单总结

标签名	标签语义	常用属性
`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` 属性：指定默认显示的列数，影响文本域的宽度。 `disabled` 属性：设置表单控件不可用。
`select`	下拉框	`name` 属性：指定数据名称 `disabled` 属性：设置整个下拉框不可用。
`option`	下拉框的选项	`disabled` 属性：设置拉下选项不可用。 `value`属性：该选项事件提交的数据（不指定value，会把标签中的内容作为提交数据） `selected` 属性：默认选中。
`button`	按钮	`disabled` 属性：设置按钮不可用。 `type` 属性：设置按钮的类型，值： submit （默认）、 reset 、 button
`label`	与表单控件做关联	`for` 属性：值与要关联的表单控件的ID值相同。
`fieldset`	表单边框

标签：控件,标签,value,表单,HTML,按钮,属性
From： https://www.cnblogs.com/zhangxuegold/p/17589540.html

HTML | HTML表单

相关文章

赞助商

阅读排行