HTML5 表单

HTML5 表单是 HTML5 中一个重要的特性，它为开发人员提供了更丰富、更灵活的表单功能。

基本语法

HTML5 表单通常由以下组成部分：

• form 元素：表单的容器
• input 元素：输入控件
• label 元素：标签
• select 元素：选择控件
• textarea 元素：文本框
• button 元素：按钮

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required>
  <br>
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" required>
  <br>
  <button type="submit">Submit</button>
</form>

输入控件

HTML5 表单支持多种类型的输入控件，例如文本框、密码框、数字框、日期选择框、电子邮件框、电话框等。以下是一些常用的输入控件类型：

<input type="text" name="username" placeholder="Enter your username">
<input type="password" name="password" placeholder="Enter your password">
<input type="number" name="age" min="18" max="99">
<input type="date" name="birthdate">
<input type="email" name="email">
<input type="tel" name="phone">
<input type="url" name="website">

选择控件

HTML5 表单还支持多种类型的选择控件，例如单选框、复选框、下拉框等。以下是一些常用的选择控件类型：

<label>
  <input type="radio" name="gender" value="male">
  Male
</label>
<label>
  <input type="radio" name="gender" value="female">
  Female
</label>
<br>
<label>
  <input type="checkbox" name="hobby" value="reading">
  Reading
</label>
<label>
  <input type="checkbox" name="hobby" value="music">
  Music
</label>
<br>
<select name="country">
  <option value="china">China</option>
  <option value="usa">USA</option>
  <option value="japan">Japan</option>
</select>

样式

HTML5 表单控件可以使用 CSS 样式来美化。你还可以使用 JavaScript 代码来验证用户输入内容是否正确。

input[type="text"] {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 5px;
}
input[type="submit"] {
  background-color: #f00;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 10px;
  cursor: pointer;
}

结语

HTML5 表单是一个非常强大和有用的功能，它可以帮助开发人员快速地创建各种类型的表单，增强用户交互体验。