HTML 表单的概念
HTML 表单是用户与网站进行交互，收集用户输入信息的窗口。
HTML 表单主要由<form>标签来定义，它是表单的容器，所有的表单元素都要放在这个标签内部。
常见的登录框、注册表单、意见反馈等都是 HTML 表单的应用。
HTML 表单的结构
HTML 表单由<form>标签开始，</form>标签结束，以及包含在内部的表单元素共同组成。
以下是一个基本的 HTML 表单代码：
<form>
<!-- 这里放置表单元素 -->
<label for="username">用户名:</label>
<input type="text" id="username" name="username" required>
<br><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password" required>
<br><br>
<input type="submit" value="注册">
</form><form> 标签的常用属性
- action：指定表单数据提交的 URL，也就是当用户提交表单时，数据会被发送到哪个地址进行处理。例如：
<form action="https://example.com/submit.php">
<!-- 表单元素 -->
</form>- method：指定表单数据的提交方式，常用的有get和post。
- get：将表单数据附加在 URL 后面，适合提交少量数据，如搜索表单。例如：
<form action="https://example.com/search" method="get">
<!-- 表单元素 -->
</form>- post：将表单数据放在 HTTP 请求的主体中，适合提交大量数据，如注册表单。例如：
<form action="https://example.com/register" method="post">
<!-- 表单元素 -->
</form>HTML 常见的表单元素
HTML 表单支持多种表单元素，以下是一些常见的表单元素：
1. 文本输入框（<input type="text">）
文本输入框用于让用户输入单行文本，比如用户名、邮箱等。示例代码如下：
<form action="submit.php" method="post">
<label for="username">用户名：</label>
<input type="text" id="username" name="username">
<br>
<label for="email">邮箱：</label>
<input type="text" id="email" name="email">
<br>
<input type="submit" value="提交">
</form>- label标签：用于为表单元素添加描述性文本，提高表单的可读性。for属性的值要和对应的表单元素的id属性值相同。
- name：用于标识表单元素，提交表单时，服务器会根据这个名称来获取对应的值。
- id：用于唯一标识表单元素，方便 CSS 样式和 JavaScript 脚本操作。
2. 密码输入框（<input type="password">）
密码输入框用于让用户输入密码，输入的内容会以星号或圆点的形式显示。示例代码如下：
<form action="submit.php" method="post">
<label for="password">密码：</label>
<input type="password" id="password" name="password">
<br>
<input type="submit" value="提交">
</form>3. 单选按钮（<input type="radio">）
单选按钮用于让用户从一组选项中选择一个。示例代码如下：
<form action="submit.php" method="post">
<label>请选择您的性别：</label>
<br>
<input type="radio" id="male" name="gender" value="male">
<label for="male">男</label>
<br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女</label>
<br>
<input type="submit" value="提交">
</form>4. 复选框（<input type="checkbox">）
复选框用于让用户从一组选项中选择多个。示例代码如下：
<form action="submit.php" method="post">
<label>请选择您喜欢的水果：</label>
<br>
<input type="checkbox" id="apple" name="fruits" value="apple">
<label for="apple">苹果</label>
<br>
<input type="checkbox" id="banana" name="fruits" value="banana">
<label for="banana">香蕉</label>
<br>
<input type="checkbox" id="orange" name="fruits" value="orange">
<label for="orange">橙子</label>
<br>
<input type="submit" value="提交">
</form>5. 下拉列表（<select">和<option">）
下拉列表用于让用户从一组预定义的选项中选择一个。示例代码如下：
<form action="submit.php" method="post">
<label for="country">请选择您所在的国家：</label>
<select id="country" name="country">
<option value="china">中国</option>
<option value="usa">美国</option>
<option value="uk">英国</option>
</select>
<br>
<input type="submit" value="提交">
</form>- <select>标签是下拉列表的容器。
- <option>标签定义了下拉列表中的每个选项，value属性指定了该选项提交时的值。
6. 文本域（<textarea>）
文本域用于让用户输入多行文本，比如留言、评论等。示例代码如下：
<form action="submit.php" method="post">
<label for="message">请输入您的留言：</label>
<br>
<textarea id="message" name="message" rows="5" cols="30"></textarea>
<br>
<input type="submit" value="提交">
</form>- rows属性指定文本域的行数。
- cols属性指定文本域的列数。
7. 提交按钮（<input type="submit">）
提交按钮用于将表单数据提交到服务器。示例代码前面已经多次出现，这里再简单展示一下：
<input type="submit" value="提交">value属性指定按钮上显示的文本。
评论区 0
发表评论
教程介绍
HTML 超文本标记语言，一种用于创建网页的标准标记语言，在浏览器上运行和解析。
60
章节
211
阅读
0
评论