在 HTML5 中，<form> 标签是构建表单的核心。表单是网站与用户之间交互的重要方式，允许用户输入数据，并通过网络提交这些数据。下面将详细介绍 <form> 标签以及与之相关的常用标签。
<form> 标签
<form> 标签定义了一个表单，用户可以在其中输入数据。以下是其基本属性：
- action：指定表单数据提交到服务器的 URL。
- method：指定表单数据的提交方式，常见的有
get和post。
<form action="submit_form.php" method="post">
<!-- 表单内容 -->
</form>
表单控件标签
表单控件用于收集用户输入的数据。以下是一些常用的表单控件标签：
<input> 标签
<input> 标签是最常用的表单控件，可以创建各种类型的输入字段，如文本框、密码框、单选按钮、复选框等。
- type：指定输入字段的类型，如
text、password、radio、checkbox等。 - name：指定控件的名称，用于在服务器端识别该控件。
文本框（<input type="text">）
<input type="text" name="username" placeholder="请输入用户名">
密码框（<input type="password">）
<input type="password" name="password" placeholder="请输入密码">
单选按钮（<input type="radio">）
<input type="radio" id="male" name="gender" value="male">
<label for="male">男</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女</label>
复选框（<input type="checkbox">）
<input type="checkbox" id="agree" name="agree" value="yes">
<label for="agree">我同意服务条款</label>
<textarea> 标签
<textarea> 标签用于创建多行文本输入框。
<textarea name="message" rows="4" cols="50">
请在此处输入您的消息
</textarea>
<select> 标签
<select> 标签用于创建下拉列表。
<select name="country">
<option value="us">美国</option>
<option value="cn">中国</option>
<option value="jp">日本</option>
</select>
<button> 标签
<button> 标签用于创建按钮，可以用于提交表单或执行其他操作。
<button type="submit">提交</button>
表单验证
HTML5 提供了内置的表单验证功能，可以确保用户输入的数据符合要求。以下是一些常用的验证属性：
- required：指定控件为必填项。
- pattern：指定控件的验证正则表达式。
- minlength、maxlength：指定控件的输入长度限制。
<input type="text" name="username" required pattern="^[a-zA-Z0-9]{5,10}$" minlength="5" maxlength="10">
通过使用这些标签和属性，您可以创建一个功能强大且易于使用的表单。希望本文能帮助您更好地了解 HTML5 中创建表单的常用标签。