HTML5 表单制作教程：元素、属性及示例

HTML5 提供了丰富的表单元素和属性，使表单更加灵活易用。下面是一个简单的 HTML5 表单示例：

<form>
  <label for='name'>姓名：</label>
  <input type='text' id='name' name='name' required>

  <label for='email'>电子邮件：</label>
  <input type='email' id='email' name='email' required>

  <label for='password'>密码：</label>
  <input type='password' id='password' name='password' required>

  <label for='gender'>性别：</label>
  <select id='gender' name='gender' required>
    <option value=''>请选择</option>
    <option value='male'>男</option>
    <option value='female'>女</option>
  </select>

  <label for='birthdate'>出生日期：</label>
  <input type='date' id='birthdate' name='birthdate' required>

  <label for='hobby'>爱好：</label>
  <input type='checkbox' id='reading' name='hobby' value='reading'>
  <label for='reading'>阅读</label>
  <input type='checkbox' id='traveling' name='hobby' value='traveling'>
  <label for='traveling'>旅行</label>
  <input type='checkbox' id='sports' name='hobby' value='sports'>
  <label for='sports'>运动</label>

  <label for='introduction'>自我介绍：</label>
  <textarea id='introduction' name='introduction' rows='5' cols='30' required></textarea>

  <input type='submit' value='提交'>
</form>

在这个表单中，我们使用了以下 HTML5 表单元素和属性：

• input 元素的 type 属性：'text' 表示文本输入框，'email' 表示电子邮件输入框，'password' 表示密码输入框。
• input 元素的 required 属性：表示该输入框是必填项。
• select 元素：表示下拉选择框。
• option 元素：表示下拉选择框的选项。
• input 元素的 type 属性为 'checkbox'：表示复选框。
• textarea 元素：表示多行文本输入框。
• input 元素的 type 属性为 'submit'：表示提交按钮。

在表单中，我们还使用了 label 元素来为每个表单元素添加标签，这样可以使得表单更加易于使用。for 属性与对应表单元素的 id 属性相对应，这样当用户点击标签时，就会自动聚焦到对应的表单元素上。