白骑士的HTML教学进阶篇 2.1 表单与输入

系列目录

上一篇：白骑士的HTML教学基础篇 1.5 列表与表格

        在基础篇中，我们学习了HTML的基本语法、链接与图像、列表与表格的创建。在进阶篇中，我们将探讨更为复杂的HTML功能，首先是表单与输入。表单是用户与网页进行交互的主要方式之一，了解如何创建和使用表单元素可以大大提升网页的功能性。在本篇博客中，我们将介绍如何创建表单，常用的表单元素如输入框、单选按钮、复选框，以及表单的验证与提交。

创建表单

        HTML表单使用‘<form>‘标签来定义，表单元素（如文本框、按钮等）放置在‘<form>‘标签内。表单的基本结构包括‘action‘属性和‘method‘属性。

表单的基本结构

<form action="/submit-form" method="post">
    <label for="name">姓名:</label>
    <input type="text" id="name" name="name">
    <input type="submit" value="提交">
</form>

• ‘action‘：指定表单提交的目标URL。
• ‘method‘：指定提交表单时使用的HTTP方法（常用‘get‘或‘post‘）。

示例：创建一个基本表单

<form action="/submit-form" method="post">
    <label for="email">电子邮件:</label>
    <input type="email" id="email" name="email" required>
    <input type="submit" value="提交">
</form>

常用表单元素

        HTML表单支持多种元素，用于接收用户输入。以下是一些常用的表单元素：

输入框（‘<input>‘）

        ‘<input>‘标签是最常用的表单元素之一，‘type‘属性决定了输入框的类型。

文本输入框

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

密码输入框

<input type="password" name="password" placeholder="输入密码">

电子邮件输入框

<input type="email" name="email" placeholder="输入电子邮件" required>

单选按钮（‘<input type="radio">‘）

        单选按钮用于在多个选项中选择一个。相同的‘name‘属性将这些按钮归为一组。

<label><input type="radio" name="gender" value="male"> 男</label>
<label><input type="radio" name="gender" value="female"> 女</label>

复选框（‘<input type="checkbox">‘）

        复选框允许用户选择多个选项。

<label><input type="checkbox" name="hobby" value="reading"> 阅读</label>
<label><input type="checkbox" name="hobby" value="traveling"> 旅行</label>
<label><input type="checkbox" name="hobby" value="sports"> 运动</label>

表单验证与提交

        表单验证是确保用户提交的数据符合预期格式的重要步骤。HTML提供了多种内建的验证机制，可以在用户提交表单前进行验证。

必填字段

        ‘required‘属性使输入框成为必填项。

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

数据格式验证

        ‘type="email"‘：验证电子邮件格式。

<input type="email" name="email" required>

        ‘pattern‘属性：使用正则表达式进行自定义验证。

<input type="text" name="phone" pattern="[0-9]{10}" placeholder="输入10位电话号码">

提交表单

        表单通常通过一个提交按钮提交。提交按钮使用‘<input type="submit">‘或‘<button type="submit">‘标签创建。

<input type="submit" value="提交">

综合示例：创建一个带有验证功能的表单

<form action="/submit-form" method="post">
    <label for="username">用户名:</label>
    <input type="text" id="username" name="username" required>

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

    <label for="phone">电话号码:</label>
    <input type="text" id="phone" name="phone" pattern="[0-9]{10}" placeholder="输入10位电话号码">

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

总结

        通过本篇博客，我们学习了如何创建HTML表单以及常用的表单元素，如输入框、单选按钮、复选框，并了解了表单验证与提交的基本方法。掌握这些技能，可以帮助你创建功能强大、用户友好的网页。在接下来的文章中，我们将进一步探讨HTML中的多媒体元素和其他高级功能，帮助你更全面地掌握HTML开发技能。欢迎继续关注我们的HTML系列教程，持续提升你的网页开发能力！

下一篇：白骑士的HTML教学进阶篇 2.2 嵌入与多媒体​​​​​​​