表单组 - HTML

HTML表单元素允许用户在网页中输入信息和交互。表单可以包含多种元素，例如文本字段、下拉框、单选按钮、多选框、提交按钮等。通过使用这些元素，我们可以收集用户数据、接收用户输入、做出决策等。

基本用法

在HTML中创建表单需要使用<form>元素。在<form>标签中，我们可以添加各种表单元素，例如文本框、下拉框、单选按钮和多选框。我们可以使用以下代码创建一个简单的表单。

<form>
  <label for="name">姓名:</label>
  <input type="text" id="name" name="name"><br><br>
  <label for="email">邮箱:</label>
  <input type="email" id="email" name="email"><br><br>
  <label for="website">网址:</label>
  <input type="url" id="website" name="website"><br><br>
  <input type="submit" value="提交">
</form>

这个表单包含三个文本框和一个提交按钮。用户在文本框中输入信息后，可以点击提交按钮将信息提交到服务器。

表单元素

表单中可以有很多不同类型的元素，下面列出了一些常用的表单元素和它们的用法。

文本框

文本框是一个允许用户输入文本信息的表单元素。我们可以使用<input>元素来创建文本框。

<input type="text" name="username" id="username">

文本框的type属性必须设置为"text"来指定文本框类型。我们还可以使用name和id属性来标识文本框。

密码框

密码框是一个特殊的文本框，它会使用星号来表示输入的内容。我们可以使用<input>元素来创建密码框。

<input type="password" name="password" id="password">

密码框的type属性必须设置为"password"来指定密码框类型。我们还可以使用name和id属性来标识密码框。

下拉框

下拉框是一个允许用户选择一个选项的表单元素。我们可以使用<select>元素来创建下拉框。

<select name="fruit" id="fruit">
  <option value="apple">苹果</option>
  <option value="banana">香蕉</option>
  <option value="orange">橙子</option>
</select>

下拉框中包含多个<option>元素，每个元素表示一个选项。选项可以使用value属性来指定它的值，也可以直接在<option>元素内写入选项文本。

单选按钮

单选按钮是一组允许用户选择一个选项的表单元素。我们可以使用<input>元素来创建单选按钮。

<label><input type="radio" name="gender" value="male">男</label>
<label><input type="radio" name="gender" value="female">女</label>

单选按钮必须设置相同的name属性来形成一组，每个按钮可以使用不同的value属性来表示不同的选项。

多选框

多选框是一组允许用户选择多个选项的表单元素。我们可以使用<input>元素来创建多选框。

<label><input type="checkbox" name="hobby" value="music">音乐</label>
<label><input type="checkbox" name="hobby" value="sports">运动</label>
<label><input type="checkbox" name="hobby" value="reading">阅读</label>

多选框必须设置相同的name属性来形成一组，每个多选框可以使用不同的value属性来表示不同的选项。

提交按钮

提交按钮用于将表单数据提交到服务器。我们可以使用<input>元素来创建提交按钮。

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

提交按钮的type属性必须设置为"submit"来指定提交按钮类型。我们可以使用value属性来设置按钮上显示的文本。

总结

HTML表单组件是Web应用中必不可少的交互元素。我们可以使用各种表单元素来收集用户数据和做出决策。虽然这些元素看起来很简单，但它们可以组合在一起创建复杂的交互界面。