HTML 表单用于搜集不同类型的用户输入。
一、<form> 标签
<form> 标签用于为用户输入创建 HTML 表单。
表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。
表单用于向服务器传输数据。
（注释：form 元素是块级元素，其前后会产生折行。<input> 元素是最重要的表单元素。）
常见<input>元素的type属性值
| 类型 | 描述 |
|---|---|
| text | 定义常规文本输入。 |
| password | 定义密码输入 |
| submit | 定义提交按钮（提交表单） |
| radio | 定义单选按钮输入（选择多个选择之一） |
| checkbox | 定义复选框 |
二、input元素的type属性值
（1）文本输入
<input type='text'>用于定义文本输入的单行输入字段。
<html> <body> <!-- This is a comment --> <form> First name:<br /> <input type='text' name='firstname'> <br /> Last name:<br /> <input type='text' name='lastname'> </form> </body> </html>
运行结果：
First name: Last name:
（2）密码输入
<input type="password"> 定义密码字段。
password 字段中的字符会被做掩码处理（显示为星号或实心圆）。
<html>
<body>
<!-- 表单处理程序在action属性中指定 -->
<form action="action_page.php">
Username:<br/>
<input type='text' name='username'><br/>
Password:<br/>
<input type='password' name='psw'><br/>
<input type="submit" value="提交查询">
</form>
</body>
</html>
运行结果：
（3）提交按钮
<input type="submit"> 定义用于向表单处理程序（form-handler）提交表单的按钮。
<html>
<body>
<!-- 表单处理程序在action属性中指定 -->
<form action='action_page.php'>
First name:<br />
<!--value值即为默认填写值-->
<input type='text' name='firsname' value='Micky'>
<br />
Last name:<br />
<input type='text' name='lastname' value='Mouse'>
<br />
<input type='submit' value='提交'>
</form>
</body>
</html>
运行结果：
First name:
Last name:
提交
|
action 属性：定义在提交表单时执行的动作。如果省略 action 属性，则 action 会被设置为当前页面。
method 属性：规定在提交表单时所用的 HTTP 方法（默认GET）。
name 属性：规定 input 元素的名称，用于对提交到服务器后的表单数据进行标识。
<form action="action_page.php" method="POST">
PS：只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。
（4）单选按钮输入
<input type="radio"> 定义单选按钮。
<html> <body> <!-- This is a comment --> <form> <input type='radio' name='sex' value='male' checked>Male <!--checked设置预先选定的按钮，即默认选定的按钮--> <br /> <input type='radio' name='sex' value='female'>Female </form> </body> </html>
运行结果：
Male Female
（5）checkbox复选框
<input type="checkbox"> 定义复选框。
复选框允许用户在有限数量的选项中选择零个或多个选项。
<html> <body> <!-- 表单处理程序在action属性中指定 --> <form action="action_page.php"> <input type='checkbox' name='cat' value='CAT'>Cat <br/> <input type='checkbox' name='dog' value='DOG'>Dog </form> </body> </html>
运行结果：
参考：https://www.w3school.com.cn