HTML5 表单元素

HTML5 表单元素是用于收集用户输入数据的重要工具。在HTML5中，引入了一些新的表单元素和属性，使得表单更加强大和灵活。在本章节中，我们将详细介绍HTML5中常用的表单元素和属性。

输入框

输入框是表单中最基本的元素之一，用于用户输入文本或数字。在HTML5中，有多种类型的输入框可供选择，包括文本框、密码框、数字框等。以下是一些常用的输入框类型及其示例代码：

<input type="text" name="username" placeholder="请输入用户名">
<input type="password" name="password" placeholder="请输入密码">
<input type="number" name="age" min="18" max="100">

下拉框

下拉框用于让用户从预定义的选项中选择一个。在HTML5中，可以使用<select>元素和<option>元素来创建下拉框。以下是一个简单的下拉框示例：

<select name="city">
  <option value="beijing">北京</option>
  <option value="shanghai">上海</option>
  <option value="guangzhou">广州</option>
</select>

单选框和复选框

单选框和复选框用于让用户从多个选项中选择一个或多个。在HTML5中，可以使用<input>元素的type属性来创建单选框和复选框。以下是一个简单的单选框和复选框示例：

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

<input type="checkbox" name="hobby" value="reading"> 阅读
<input type="checkbox" name="hobby" value="traveling"> 旅行
<input type="checkbox" name="hobby" value="cooking"> 烹饪

文本域

文本域用于让用户输入多行文本。在HTML5中，可以使用<textarea>元素来创建文本域。以下是一个简单的文本域示例：

<textarea name="message" rows="4" cols="50" placeholder="请输入留言内容"></textarea>

以上是HTML5中常用的表单元素和属性，通过合理使用这些元素和属性，可以创建出功能强大且用户友好的表单页面。