什么是表单
表单是用于收集和接受用户输入的一种方式，也是Web页面中比较重要的交互元素之一。比如我们经常需要输入用户名和密码来登录某个网站，这时候就需要使用表单来收集用户输入的信息。
表单由一组表单元素和一个提交按钮组成。表单元素包括文本输入框、密码输入框、单选按钮、复选框、下拉列表等。
HTML表单基本结构
一个表单基本上包括3个部分：
1.表单头部
表单头部使用<form>标签表示，其中包括3个属性：
method：表单提交的HTTP方法，常见的有GET和POST两种。
action：表单数据提交的URL地址，可以是相对地址或者绝对地址。
enctype：表单数据编码方式，常见的有application/x-www-form-urlencoded和multipart/form-data两种，前者表示把数据按照键值对的方式进行编码，后者表示把数据转化为一种专门的编码格式并且支持文件上传。
注：当method为GET时，表单数据提交时会把数据添加到URL的后面，这样易于URL的分享和收藏，但是会有安全风险；当method为POST时，表单数据提交是通过HTTP请求的请求体传递，数据不会显示在URL上，也更加安全。
2.表单内容
表单内容使用各种表单元素组成，包括文本输入框、密码输入框、单选按钮、复选框、下拉列表等。这些元素使用不同的标签表示，比如<input>、<select>、<textarea>等。
下面我们以一个简单的登录表单为例，在表单中包括两个输入框和一个提交按钮：
<form action="submit.php" method="POST">
<p>用户名：<input type="text" name="username" /></p>
<p>密 码：<input type="password" name="password" /></p>
<p><input type="submit" value="登录" /></p>
</form>
3.表单尾部
表单尾部不是必需的，但可以在其中添加一些辅助元素，例如重置按钮、帮助说明等。表单尾部使用</form>标签表示。
常见的表单元素
下面我们将介绍一些常见的表单元素，以及它们的用法。
1.文本输入框
文本输入框用于输入一行文本，使用<input>标签表示，其中type属性为"text"。另外需要设置name属性，以便在表单提交时能够识别。
<input type="text" name="username" />当输入框需要设定默认值时，我们可以在value属性中指定：
<input type="text" name="username" value="请输入用户名" />当输入框需要设定宽度时，可以使用style属性来指定：
<input type="text" name="username" style="width:200px;" />2.密码输入框
密码输入框和文本输入框类似，只是在输入时显示为星号，使用<input>标签表示，其中type属性为"password"。另外需要设置name属性，以便在表单提交时能够识别。
<input type="password" name="password" />3.单选按钮
单选按钮是用于选择一个选项的元素，使用<input>标签表示，其中type属性为"radio"。需要设置name属性和value属性，以便在表单提交时能够识别。需要注意的是，单选按钮需要指定相同的name属性，以保证只有其中一个按钮被选中。
<input type="radio" name="gender" value="male" checked /> 男
<input type="radio" name="gender" value="female" /> 女
注：上述代码中，checked属性表示默认选中。
4.复选框
复选框是用于选择多个选项的元素，使用<input>标签表示，其中type属性为"checkbox"。需要设置name属性和value属性，以便在表单提交时能够识别。需要注意的是，复选框需要指定相同的name属性，表示它们是同一个分组。
<input type="checkbox" name="hobby" value="reading" checked /> 读书
<input type="checkbox" name="hobby" value="gaming" /> 游戏
注：上述代码中，checked属性表示默认选中。
5.下拉列表
下拉列表是用于选择一个选项的元素，使用<select>标签表示，其中需要设置name属性。每个选项需要使用<option>标签表示，其中需要设置value属性。如果需要设置默认选中，则在<option>标签中添加selected属性。
<select name="city">
<option value="beijing" selected>北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou">广州</option>
</select>
6.提交按钮
提交按钮用于提交表单数据，使用<input>标签表示，其中type属性为"submit"。
<input type="submit" value="提交" />7.重置按钮
重置按钮用于重置表单数据，使用<input>标签表示，其中type属性为"reset"。
<input type="reset" value="重置" />实例：一个简洁的提交表单
下面我们来实现一个简洁的提交表单，包括姓名、性别、邮箱和提交按钮四个元素。
<form action="#" method="POST">
<label>姓名：<input type="text" name="name" required /></label>
<label>性别：<input type="radio" name="gender" value="male" checked />男
<input type="radio" name="gender" value="female" />女</label>
<label>邮箱：<input type="email" name="email" required /></label>
<input type="submit" value="提交" />
</form>
注：上述代码中，label标签用于将文本和输入框关联在一起，使得鼠标点击文本时也能够选中输入框；required属性表示该输入框为必填项。