1 表单是什么
表单用于收集用户输入的数据并提交给服务器，由 form 标签包裹所有表单元素。
1.1 form 标签核心属性
action：数据提交的目标地址，填服务器接口或网址。method：提交方式，常用get（数据拼接在网址上）和post（数据在请求体中，更安全）。
2 input 标签
input 是单标签，通过 type 属性切换不同的输入类型，是表单中最核心的标签。
2.1 type 类型总览
| type 值 | 说明 |
|---|---|
text | 普通文本输入框 |
password | 密码框，内容显示为圆点 |
radio | 单选框 |
checkbox | 多选框 |
file | 文件上传域 |
hidden | 隐藏域，用户看不见但会随表单提交 |
submit | 提交按钮 |
button | 普通按钮，无默认行为 |
reset | 重置按钮，清空表单数据 |
image | 图片按钮，功能同 submit |
2.2 常用属性
| 属性 | 说明 |
|---|---|
name | 提交时的字段名，服务器通过它识别数据，必填 |
value | 输入框的默认值 / 提交给服务器的实际值 |
placeholder | 输入框的提示文字，输入后消失 |
size | 文本框显示的宽度（字符数） |
maxlength | 最多能输入的字符数 |
disabled | 禁用，不能修改也不会提交 |
readonly | 只读，不能修改但会提交 |
checked | 单选框 / 多选框默认选中，可简写不写值 |
multiple | 文件域支持多选文件 |
3 单选框与多选框
3.1 radio — 单选框
同一组单选框的 name 必须完全一致，浏览器靠 name 判断哪些选项互斥：
<input type="radio" name="gender" value="男"> 男
<input type="radio" name="gender" checked="checked" value="女"> 女3.2 checkbox — 多选框
同一组多选框 name 也保持一致，checked 表示默认勾选：
<input type="checkbox" name="hobbies" value="唱"> 唱
<input type="checkbox" name="hobbies" checked value="跳"> 跳4 select 下拉列表
select 是下拉选择框，option 是每一个选项，selected 属性表示默认选中，multiple 属性允许多选：
<select name="home">
<option value="北京">北京</option>
<option value="杭州" selected>杭州</option>
</select>5 textarea 多行文本框
用于输入大段文字，rows 控制显示行数，cols 控制显示列数（宽度）：
<textarea name="info" rows="20" cols="80">
自我介绍
</textarea>6 完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>1. 表单初体验</h1>
<form action="http://www.baidu.com" method="get">
用户名称: <input type="text" size="2" maxlength="2" placeholder="请输入用户名称(提示文字)" name="username"> <br>
用户名称: <input type="text" disabled value="disabled 不能修改，也不让提交" name="username2"> <br>
用户名称: <input type="text" readonly value="readonly不让修改，能提交" name="username3"> <br>
用户密码: <input type="password" name="password"> <br>
用户性别: <input type="radio" name="gender" value="男"> 男
<input type="radio" name="gender" checked="checked" value="女"> 女
<br>
兴趣爱好: <input type="checkbox" name="hobbies" value="唱"> 唱
<input type="checkbox" name="hobbies" checked value="跳"> 跳
<input type="checkbox" name="hobbies" value="rap"> rap
<input type="checkbox" name="hobbies" checked value="篮球"> 篮球
<br>
家庭地址:
<select name="home">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
<option value="深圳">深圳</option>
<option value="杭州" selected>杭州</option>
<option value="西安">西安</option>
<option value="武汉">武汉</option>
</select>
<br>
用户头像:
<input type="file" name="head" multiple>
<br>
<input type="hidden" name="id" value="1024">
<br>
自我介绍:
<textarea name="info" rows="20" cols="80">
自我介绍
</textarea>
<br>
<input type="submit" value="用户注册">
<input type="button" value="我是一个普普的按钮罢了">
<input type="reset" value="重置数据">
<input type="image" src="./img1.jpg" width="50px" value="图片按钮">
</form>
</body>
</html>