表单的基本结构
| 标签名 | 标签语义 | 常用属性 | 单/双标签 |
| form | 表单 | action：用于指定表单的提交地址（需与后端人员沟通确定） method：用于控制表单的提交方式 target：用于控制表单如何打开页面，常用值如下：_self：在本页签打开页面 _blank:在新页签打开页面 | 双 |
| input | 输入框 | type：设置输入框类型 name：用于指定提交数据的名字（需与后端人员沟通确定） | 单 |
| button | 按钮 | type：用于设置按钮的属性 | 双 |
示例代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>html表单基本结构</title>
</head>
<body>
<form action="https://www.baidu.com/s" method="get">
<input type="text" name="wd">
<button>去百度搜索</button>
</form>
<!--分割线-->
<hr>
<form action="https://search.jd.com/search">
<input type="text" name="keyword">
<button>去京东搜索</button>
</form>
</body>
</html>表单常用控件
文本输入框
<input type="text" name="account" value="搜索" maxlength="10">常用属性如下：
name属性：数据的名称
value属性：输入框的默认输入值
maxlength属性：输入的最大字数限制
密码框
<input type="password" name="pwd" maxlength="10"常用属性如下：
name属性：数据的名称
value属性：输入框的默认输入值（一般不用，无意义）
maxlength属性：输入的最大字数限制
单选框
<input type="radio" name="gender" value="male" checked>男
<input type="radio" name="gender" value="female">女常用属性如下：
name属性：数据的名称，但要注意：想要多个单选效果，多个radio的name属性值要保持一致
value属性：提交的数据值
checked属性：让该单选按钮默认选中
复选框
<input type="checkbox" name="hobby" value="smoking" checked>抽烟
<input type="checkbox" name="hobby" value="drinking">喝酒
<input type="checkbox" name="hobby" value="perm">烫头常用属性如下：
name属性：数据的名称
value属性：提交的数据值
checked属性：复选按钮默认选中
隐藏域
作用：用户不可见的输入区域，提交表单时可以携带一些固定数据。能够得知信息来源，从而判断是否存在恶意行为。
<input type="hidden" name="from" value="toutiao">常用属性如下：
name属性：指定数据的名称
value属性：指定的真正提交的数据
提交按钮
<!-- 确认按钮1 -->
<button>确认</button>
<!-- 确认按钮2 -->
<input type="submit" value="提交">注意：
button标签的type属性的默认值为submit
button标签不需要指定name属性
input标签编写的按钮，使用value属性指定按钮文字
重置按钮
<!--重置按钮1 -->
<button type="reset">重置</button>
<!-- 重置按钮2 -->
<input type="reset" value="点我重置">注意：
button标签不需要指定name属性
input标签编写的按钮，使用value属性指定按钮文字
普通按钮
<!-- 普通按钮 -->
<button type="button">检测账户是否被注册</button>
注意：
普通按钮的type属性值为button，不写type属性则默认为submit
文本域
<textarea name="other" cols="20" rows="5"></textarea>常用属性如下：
rows属性：指定默认显示的行数，影响文本域高度
cols属性：指定默认显示的列数，影响文本域宽度
不能编写type属性
下拉框
<select name="place">
<option value="粤">广东</option>
<option value="鲁" selected>山东</option>
<option value="陕">陕西</option>
<option value="桂">广西</option>
</select>常用属性及注意事项：
name属性：指定数据名称
option标签设置value属性，如果没有value属性，提交的数据为option标签的标签体；如果设置了value属性，提交的数据为value属性的属性值
option标签设置了selected属性，表示默认选中
从以上标红加粗的字体可以看出，value属性的属性值不是固定的。
完整代码
<!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="搜索" maxlength="10"><br>
<!--密码输入框-->
密码：<input type="password" name="pwd" maxlength="10"><br>
<!-- 单选框-->
性别：<input type="radio" name="gender" value="male" checked>男
<input type="radio" name="gender" value="female">女<br>
<!--多选框-->
爱好：
<input type="checkbox" name="hobby" value="smoking" checked>抽烟
<input type="checkbox" name="hobby" value="drinking">喝酒
<input type="checkbox" name="hobby" value="perm">烫头<br>
<!-- 隐藏域 -->
<input type="hidden" name="from" value="toutiao"><br>
<!-- 文本域 -->
其他:
<textarea name="other" cols="20" rows="5"></textarea><br>
<!-- 下拉框 -->
<select name="place">
<option value="粤">广东</option>
<option value="鲁" selected>山东</option>
<option value="陕">陕西</option>
<option value="桂">广西</option>
</select>
<!-- 确认按钮1 -->
<!-- <button>确认</button>-->
<!-- 确认按钮2 -->
<input type="submit" value="提交">
<!--重置按钮1 -->
<!-- <button type="reset">重置</button> -->
<!-- 重置按钮2 -->
<input type="reset" value="点我重置">
<!-- 普通按钮 -->
<button type="button">检测账户是否被注册</button>
</form>
</body>
</html>结果展示：
表单禁用控件
给表单设置一个disabled即可禁用
input，textarea，button，select，option都可以设置disabled属性
<input disabled type="text" name="account" value="搜索" maxlength="10">结果展示 ：
此时账户一栏的输入框禁止输入任何字符
label标签
label标签可与表单控件相关联，关联之后点击文字，与之对应的表单控件就会获取焦点。
两种与label关联方式如下：
1、让label标签的for属性的值等于表单控件的id
2、把表单控件套在label标签里
图片展示
fieldset与legend的使用
直接上代码：
<!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 type="text" name="account" value="搜索" id="zhanghu" maxlength="10" checked><br>
<label>
密码：<input type="password" name="psw" maxlength="10">
</label>
<br>
性别：
<input type="radio" name="gender" value="male" id="nan" checked>
<label for="nan">男</label>
<label>
<input type="radio" name="gender" value="famale">女
</label>
</fieldset>
<fieldset>
<legend>
附属信息
</legend>
爱好：<input type="checkbox" name="hobby" value="smoking" id="chouyan">
<label for="chouyan">抽烟</label>
<label>
<input type="checkbox" name="hobby" value="drinking" checked>喝酒
</label>
<label>
<input type="checkbox" name="hobby" value="perm">烫头
</label><br>
<label for="qita">其他</label>
<textarea name="other" id="qita" cols="10" rows="5"></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">
<input type="submit" value="确认">
<button type="reset">重置</button>
<input type="button" value="检测账户是否被注册" disabled>
</form>
</body>
</html>结果展示：
可以看出经过fieldset与legend标签的修饰，表单更加明了清楚，当然，运用也很简单，只需要将相关内容嵌套到fiedset中去。ps：不能在legend标签中写表单的内容。
如有不足之处，欢迎大家指出，感谢支持！！！！
标签：name,标签,知识,value,表单,HTML,按钮,属性 From： https://blog.csdn.net/2402_87445758/article/details/145299237