概述

html表单：HTML表单用于收集用户输入的数据，并将数据发送到服务器进行处理，创建了一个包含多种表单元素的表单。其中，<label> 标签用来描述表单元素，<input> 标签用来创建表单输入框，<textarea> 标签用来创建多行文本输入框，<button> 标签用来创建提交按钮等等。下面我们一起来学习了解吧

表单标签

HTML提供了几个用于创建表单的标签，包括<form>、<input>、<label>、<select>、<option>、<textarea>和<button>。

<form>标记用于创建表单元素，该元素可以包含一个或多个表单控件，如文本输入、复选框、单选按钮等。

action属性指定表单数据应提交到的URL，method属性指定用于提交的HTTP方法（通常为“GET”或“POST”）。

下面是一个带有文本输入和提交按钮的简单表单示例：

<form action="submit-form.php" method="POST">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <button type="submit">Submit</button>
</form>

在本例中，<label>标记用于使用for属性和id属性将文本输入与其标签相关联。输入的name属性指定将与表单数据一起提交的表单字段的名称。

<select>标记用于创建选项的下拉列表，<option＞标记用于定义每个选项。下面是一个例子：

<label for="color">Favorite color:</label>
<select id="color" name="color">
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>

在本例中，每个选项的value属性指定将与表单数据一起提交的值。

<textarea>标记用于创建多行文本输入。下面是一个例子：

<label for="message">Message:</label>
<textarea id="message" name="message"></textarea>

＜button＞标记用于创建一个按钮，该按钮可用于提交表单或执行其他操作。 下面是一个例子：

<button type="submit">Submit</button>

文本框、密码框和多行文本框

HTML中，文本框、密码框和多行文本框分别使用input元素的不同type属性值来实现。

• 文本框：使用<input type=”text”>标签实现；
• 密码框：使用<input type=”password”>标签实现；
• 多行文本框：使用<textarea></textarea>标签实现。

文本框、密码框和多行文本框是用来接收用户输入的常见表单元素。它们分别使用不同的标签和属性来实现。

1. 文本框

文本框（text box）是用于接受单行文本输入的表单元素。可以通过设置<input>标签的type属性为”text”来创建文本框。例如：

<label for="username">用户名：</label>
<input type="text" id="username" name="username">

上面的示例代码中，id属性定义了文本框的唯一标识符，name属性定义了提交表单时该文本框的名称。

2. 密码框

密码框（password field）是用于接受密码等敏感信息的表单元素，并且会将用户输入的字符隐藏起来。可以通过设置<input>标签的type属性为”password”来创建密码框。例如：

<label for="password">密码：</label>
<input type="password" id="password" name="password">

3. 多行文本框

多行文本框（text area）可用于接收包含多个行的文本输入，例如评论或留言等。可以通过使用<textarea>标签来创建多行文本框，然后使用它的rows和cols属性来指定它的尺寸。例如：

<label for="message">留言：</label>
<textarea id="message" name="message" rows="5" cols="30"></textarea>

上面的示例代码中，rows属性定义了多行文本框的行数，cols属性定义了多行文本框每一行的字符数。

单选框和复选框

HTML中，单选框和复选框是常见的表单元素，用于让用户选择不同选项。它们分别使用<input>标签的不同type属性值来实现。

1. 单选框

单选框（radio button）允许用户在一组选项中选择一个。可以使用相同的name属性来将多个单选框关联起来。当用户勾选其中一个单选框时，其他单选框将自动取消选中状态。可以通过设置<input>标签的type属性为”radio”来创建单选框。例如：

<form>
  <p>请选择性别：</p>
  <label><input type="radio" name="gender" value="M">男士</label>
  <label><input type="radio" name="gender" value="F">女士</label>
  <label><input type="radio" name="gender" value="O">其他</label>
</form>

上面的示例代码中，三个单选框使用相同的name属性，以便将它们关联起来。当用户勾选其中一个单选框时，另外两个单选框将自动取消选中状态。

2. 复选框

复选框（checkbox）允许用户选择多个选项。可以使用相同的name属性来将多个复选框关联起来。当用户勾选其中一个复选框时，其他复选框保持不变。可以通过设置<input>标签的type属性为”checkbox”来创建复选框。例如：

<form>
  <p>请选择语言：</p>
  <label><input type="checkbox" name="lang" value="js">JavaScript</label>
  <label><input type="checkbox" name="lang" value="py">Python</label>
  <label><input type="checkbox" name="lang" value="java">Java</label>
</form>

上面的示例代码中，三个复选框使用相同的name属性，以便将它们关联起来。用户可以勾选多个复选框。

单选框和复选框的值可以通过value属性进行指定，当表单提交时，浏览器会将被选中的单选框或复选框的值作为表单数据提交到服务器并进行处理。

下拉列表框和列表框

HTML中，下拉列表框和列表框是用来显示多个选项的表单元素。它们分别使用不同的标签和属性来实现。

1. 下拉列表框

下拉列表框（dropdown list）可以让用户从多个选项中选择一个选项。可以使用<select>标签来创建下拉列表框，然后使用<option>标签定义每一个选项。例如：

<form>
  <p>请选择城市：</p>
  <select name="city">
    <option value="bj">北京</option>
    <option value="sh">上海</option>
    <option value="gz">广州</option>
    <option value="sz">深圳</option>
  </select>
</form>

上面的示例代码中，四个<option>标签定义了四个选项。其中”value”属性指定每个选项的值，”text”节点指定每个选项的文本内容。当用户点击下拉框时，会出现一个下拉菜单列出所有可用选项，用户可以从中选择一个选项。

2. 列表框

列表框（list box）是另一种显示多个选项的表单元素，与下拉列表框不同的是，列表框可以同时显示多个选项。可以使用<select>标签来创建列表框，然后使用<option>标签定义每一个选项并设置multiple属性为”multiple”来启用多选模式。例如：

<form>
  <p>请选择兴趣爱好：</p>
  <select name="interests" multiple>
    <option value="reading">阅读</option>
    <option value="music">音乐</option>
    <option value="painting">绘画</option>
    <option value="sports">运动</option>
  </select>
</form>

上面的示例代码中，multiple属性指定该列表框启用多选模式。当用户选择一个或多个选项时，这些选项将被高亮显示。

总之，在HTML中可以使用下拉列表框和列表框来为用户提供多个选项让用户选择，并在表单提交时将选择的结果作为表单数据提交到服务器。

按钮和图像按钮

HTML中，按钮和图像按钮是用来触发事件或提交表单的表单元素。它们分别使用<button>标签和<input>标签的不同type属性值来实现。

1. 普通按钮

普通按钮（button）通常用于触发一些事件，例如刷新页面、清空表单等。可以使用<button>标签来创建普通按钮。例如：

<button>点击我</button>

上面的示例代码中，创建了一个简单的按钮，点击按钮会触发一些事件。

2. 提交按钮

提交按钮（submit button）用于将表单数据提交到服务器进行处理。可以使用<input>标签，并将其type属性设置为”submit”来创建提交按钮，例如：

<input type="submit" value="提交">

上面的示例代码中，设置了一个提交按钮，当用户点击该按钮时，浏览器会将表单数据提交到服务器并进行处理。

3. 图像按钮

图像按钮（image button）与普通按钮类似，但它使用图片而不是文本作为按钮的标识。可以使用<input>标签，并将其type属性设置为”image”来创建图像按钮，例如：

<input type="image" src="submit.png" alt="提交">

上面的示例代码中，创建了一个带有图片的图像按钮。当用户单击图像按钮时，浏览器会将表单数据提交到服务器并进行处理。

总结

以上就是今天要讲的内容，本文简单介绍了HTML的表单的知识点，更多内容可以查看THTML官方文档

如果觉得有用，欢迎明天再来，继续合集的下一篇文章学习
遇到问题，私信我！！~~