3.1 表单的基本结构
HTML表单是网页中用于收集用户输入信息的重要元素。一个基本的表单通常由以下部分组成:
<form>标签:定义表单的开始和结束。<input>标签:用于输入数据。<label>标签:为输入字段定义标签。<button>标签:用于提交表单。
下面是一个简单的表单示例:
<form action="/submit_form" method="post">
<label for="username">用户名:</label>
<input type="text" id="username" name="username">
<label for="password">密码:</label>
<input type="password" id="password" name="password">
<button type="submit">登录</button>
</form>
在这个示例中,用户名和密码将被提交到服务器上的 /submit_form 路径。
3.2 输入类型
HTML5 引入了许多新的输入类型,使得表单设计更加灵活和强大。以下是一些常用的输入类型:
text:用于文本输入,如用户名、邮箱等。password:用于密码输入,输入内容会被隐藏。email:用于电子邮箱地址,会自动验证邮箱格式。tel:用于电话号码输入,通常会有数字键盘。number:用于数字输入,可以设置最小值和最大值。
3.3 表单验证
HTML5 提供了内建的表单验证功能,可以确保用户输入的数据符合预期。以下是一些常用的验证属性:
required:表示该字段为必填项。pattern:用于正则表达式验证,可以自定义验证规则。min和max:分别用于设置数字输入的最小值和最大值。
以下是一个带有验证的表单示例:
<form action="/submit_form" method="post">
<label for="username">用户名:</label>
<input type="text" id="username" name="username" required pattern="^[a-zA-Z0-9]+$">
<label for="password">密码:</label>
<input type="password" id="password" name="password" required>
<label for="age">年龄:</label>
<input type="number" id="age" name="age" min="18" max="99">
<button type="submit">登录</button>
</form>
在这个示例中,用户名必须是字母或数字的组合,密码是必填项,年龄必须在 18 到 99 之间。
3.4 框架集
框架集(frameset)用于在浏览器窗口中创建多个并排的框架。以下是框架集的基本结构:
<frameset rows="50%,50%">
<frame src="header.html">
<frame src="content.html">
</frameset>
在这个示例中,窗口被分为两个框架,顶部框架占 50%,底部框架占 50%。每个框架都可以加载不同的 HTML 页面。
3.5 注意事项
- 框架集已被 HTML5 弃用,推荐使用 CSS3 的
grid或flexbox来实现类似的功能。 - 表单验证虽然方便,但并不完全可靠,服务器端验证仍然是必要的。
通过本章的学习,你应该对 HTML 表单和框架集有了更深入的了解。在实际应用中,灵活运用这些知识,可以制作出更加丰富和实用的网页。
