一、表单的基本元素

在HTML5中，表单被加强了很多新的特性。我们先来看下表单的基本元素。

1、输入框

输入框是表单中最常用的元素之一，它用于接收用户的输入信息。HTML5新增了一些类型，如email、url等，可以在输入时进行验证，防止用户输入错误的格式。

<input type="text" name="username" placeholder="请输入用户名">

2、下拉列表

下拉列表是一种不同于输入框的表单元素。它可以让用户选择一项或多项值，HTML5也可以设置默认选中项等。

<select name="city">
    <option value="1" selected>上海</option>
    <option value="2">北京</option>
    <option value="3">广州</option>
</select>

3、单选框和复选框

单选框和复选框用于选择一项或多项值，HTML5中可以设置默认选中项等。

<input type="radio" name="gender" value="male" checked>男
<input type="radio" name="gender" value="female">女
<br>
<input type="checkbox" name="hobby" value="reading" checked>阅读
<input type="checkbox" name="hobby" value="music">音乐

二、表单验证

表单验证是HTML5增加的一个非常重要的功能，它可以在用户提交表单时对表单中的数据进行验证，避免用户输入不合法的数据。

1、required属性

required属性可以强制要求用户必须输入某些信息，否则无法提交表单。

<input type="text" name="username" required>

2、pattern属性

pattern属性可以用正则表达式验证用户输入的数据是否符合规则，例如要求用户输入一个6-12位的数字和字母组合。

<input type="text" name="password" pattern="[0-9a-zA-Z]{6,12}">

三、表单设计

表单在网站中的设计也非常重要，一个好的设计可以让用户输入信息的体验更加良好。

1、清晰的标签和提示

在表单中，清晰的标签和提示可以让用户更好地理解需要输入哪些信息，可以减少用户输入错误信息的机会。

<label>用户名:</label>
<input type="text" name="username" placeholder="请输入用户名">

2、良好的布局

对于较长的表单，良好的布局可以避免用户的迷失和混淆，让用户能够快速找到需要输入的信息。

<fieldset>
    <legend>个人信息</legend>
    <label>姓名:</label>
    <input type="text" name="name">
    <br>
    <label>性别:</label>
    <input type="radio" name="gender" value="male">男
    <input type="radio" name="gender" value="female">女
    <br>
    <label>出生日期:</label>
    <input type="date" name="birthday">
    <br>
    <label>联系电话:</label>
    <input type="tel" name="phone">
    <br>
    <label>邮箱:</label>
    <input type="email" name="email">
</fieldset>

四、表单提交

表单提交后，服务器会处理表单中的数据。在HTML5中，我们可以使用下面的语法来进行表单提交。

<form action="提交地址" method="post">
    <!-- 表单元素 -->
    <input type="submit" value="提交">
</form>

其中，action属性指定表单提交的地址，method属性指定表单提交的方式（get或post）。