HTML 教程 – 第三章：HTML 表单与输入元素-谷穗社区

在HTML中，表单（Forms）是一个重要的组成部分，它允许用户输入数据并将其提交到服务器进行处理。本章将介绍HTML表单的基本结构和常用的输入元素。

一、HTML表单的基本结构

HTML表单由<form>标签定义，并包含多个输入元素（如文本框、复选框、单选按钮等）以及一个提交按钮。表单元素通常被包含在<form>标签的开始和结束标签之间。

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8">  
    <title>HTML 表单</title>  
</head>  
<body>  
    <form action="/submit_form" method="post">  
        <!-- 输入元素将在这里 -->  
        <input type="submit" value="提交">  
    </form>  
</body>  
</html>

在上面的示例中，<form>标签的action属性指定了提交表单时数据发送到的URL，而method属性指定了HTTP方法（通常是”get”或”post”）。<input type="submit">定义了一个提交按钮，用户点击后会将表单数据发送到服务器。

二、常用的输入元素

文本输入框（Text Input）

使用<input type="text">来创建文本输入框，用户可以在其中输入文本。
```
<label for="fname">名字:</label><br>  
<input type="text" id="fname" name="fname"><br>
```
密码输入框（Password Input）

使用<input type="password">来创建密码输入框，用户输入的文本会被隐藏（通常显示为点或星号）。
```
<label for="pwd">密码:</label><br>  
<input type="password" id="pwd" name="pwd">
```

单选按钮（Radio Buttons）

使用<input type="radio">来创建单选按钮，用户可以从一组选项中选择一个。

<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>

复选框（Checkboxes）

使用<input type="checkbox">来创建复选框，用户可以选择多个选项。

<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">  
<label for="vehicle1"> 我有一辆自行车</label><br>  
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">  
<label for="vehicle2"> 我有一辆汽车</label><br>

提交按钮（Submit Button）

前面已经提到了<input type="submit">用于创建提交按钮。

下拉列表（Dropdown List）

使用<select>和<option>标签来创建下拉列表。

<label for="cars">选择一辆车:</label>  
<select id="cars" name="cars">  
  <option value="volvo">Volvo</option>  
  <option value="saab">Saab</option>  
  <option value="mercedes">Mercedes</option>  
  <option value="audi">Audi</option>  
</select>

文本区域（Textarea）

使用<textarea>标签来创建多行文本输入区域。

<label for="message">留言:</label><br>  
<textarea id="message" name="message" rows="4" cols="50">  
默认文本...  
</textarea>

隐藏输入（Hidden Input）

使用<input type="hidden">来创建隐藏输入字段，用户看不到，但表单提交时会发送数据。

三、表单验证

虽然HTML5提供了一些基本的表单验证功能（如required、minlength、maxlength等属性），但更复杂的验证通常需要使用JavaScript或服务器端语言来实现。

四、总结

在本章中，我们介绍了HTML表单的基本结构和常用的输入元素。通过组合这些元素，你可以创建出各种复杂的表单，以满足用户的输入

文章版权归作者所有，未经允许请勿转载。

THE END

代码
# HTML教程