HTML - 表单

上一页
下一页

HTML 表单是简单的表单，用于收集用户数据。HTML 表单具有交互式控件和各种输入类型，例如 **文本、数字、电子邮件、密码、单选按钮、复选框、按钮** 等。我们可以在多个网站上看到它的应用，包括注册表单、客户反馈表单、在线调查表单等等。

目录

 

为什么要使用 HTML 表单？

HTML 表单用于收集用户数据并将其发送到服务器。假设我们在 HTML 网页中加入一个表单部分。每当浏览器加载该页面并遇到 <form> 元素时，它将在页面上生成控件，允许用户根据控件类型输入所需的信息。

创建 HTML 表单

HTML 的 <form> 标签用于创建 HTML 表单。还需要一些其他标签来创建实际的表单 - 所有这些标签在本帖中都有简要说明。<form> 元素包含各种预定义的标签和元素，称为表单控件。

语法

<form action = "Script URL" method = "GET|POST">
   form controls like input, textarea etc.
</form>

尝试点击图标 run button 运行按钮以运行以下 HTML 代码以查看输出。

HTML 表单示例

我们使用较少的表单元素创建了两个基本的表单，表单可以用于多种目的，根据目的我们应该设计表单。

创建简单的 HTML 表单

在下面的示例中，我们将创建一个简单的 HTML 表单（登录表单），用户可以在其中使用 <form> 元素和表单控件（如输入、类型和名称）输入其姓名。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Sample HTML Form </title>
</head>
<body>
    <!-- Start of the form element -->
    <form action = " ">
       <!-- various form controls -->
       <label for="first_name">First name:</label>
       <input type = "text" name = "first_name" />
       <br><br>
       <label for="first_name">Last name:</label>
       <input type = "text" name = "last_name" />
       <br><br>
       <input type = "submit">
    </form>
</body>
</html>

带有重定向的 HTML 表单

在前面的示例中，我们设计了一个接受用户输入但不处理数据的表单。但是，在此示例中，当用户输入其姓名并点击“提交”按钮时，他们将被重定向到 Tutorialspoint 的 HTML 教程。仅当提供姓名时才会发生重定向，否则，表单将提示用户输入其姓名。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Sample HTML Form </title>
</head>
<body>
    <!-- Start of the form element -->
    <form action = "" method = "post">
       <!-- various form controls -->
       <label for="first_name">First name:</label>
       <input type = "text" name = "first_name" required/>
       <br><br>
       <label for="first_name">Last name:</label>
       <input type = "text" name = "last_name" required/>
       <br><br>
       <input type = "submit">
    </form>
</body>
</html>

HTML 表单元素

表单元素中可以使用以下元素列表。下面简要描述了所有元素。

1. HTML <form> 元素

HTML 表单标签 用于创建表单元素，此元素是所有其他表单元素的容器。表单元素本身不会创建表单，它是包含其他表单元素的容器。

语法

<form>.....</form>

2. HTML <input> 元素

HTML 输入标签 是表单控件的重要元素，用于从网站收集用户输入，我们可以使用此标签创建输入元素。

语法

<input type = ".."/>

3. HTML <label> 元素

HTML 标签标签 用于创建标签元素，表示 UI（用户界面）中项目的标题，或为表单控件（如文本、文本区域、复选框、单选按钮等）添加标签。

语法

<label>.......</label>

4. HTML <legend> 元素

HTML 图例标签 是元素的第一个子元素，指定 <fieldset> 标签的标题或说明。

语法

<legend>.......</legend>

5. HTML <select> 元素

HTML 选择标签 用于在 HTML 表单中创建下拉菜单，我们可以使用此标签在任何我们想要的地方创建下拉菜单。

语法

<select>....</select>

6. HTML <button> 元素

HTML 按钮标签 是一个交互式元素，用于在 HTML 中创建按钮。

语法

<button>Button</button>

7. HTML <fieldset> 元素

HTML 字段集标签 用于在一个 Web 表单中对多个控件进行分组。通过使用 <fieldset> 标签和 <legend> 标签，表单更容易被用户理解。

语法

   <fieldset>....</fieldset>

8. HTML <datalist> 元素

HTML 数据列表标签 包含一组 <option> 元素，这些元素表示可供选择的推荐选项。

语法

<datalist>....</datalist>

9. HTML <output> 元素

HTML 输出标签 是一个灵活且未充分利用的组件，它使程序员能够在内容中动态显示计算或脚本的结果。

语法

<output> Results... </output>

10. HTML <option> 元素

HTML 选项标签 定义了自动完成的数据列表的元素（由 <datalist> 标签指定），或由 <select> 标签定义的下拉列表的项。

语法

<option>.....</option>

11. HTML <optgroup> 元素

HTML 选项组标签 用于 <select> 元素中，将相关的 <option> 元素组合在一起。

语法

<optgroup>
   <option>..</option>
     .
     .
</optgroup>

12. HTML <textarea> 元素

HTML 文本区域标签 用于表示多行纯文本编辑控件。

语法

<textarea>.......</textarea>

HTML 表单属性

HTML 表单元素还具有提供不同功能的属性，例如重定向到其他网页和自动完成文本。要查看所有表单属性，请参阅 HTML - 表单属性。

HTML 表单示例及代码

在此示例中，我们将使用 HTML 表单元素和每个元素的接受属性创建一个注册表单。我们将使用一些 CSS 属性对表单进行样式设置，您可以在我们的免费 CSS 教程 中学习这些属性。

<!DOCTYPE html>
<html>
    <head>
        <title>HTML Form</title>
        <style>
            body {
                display: flex;
                justify-content: center;
                align-items: center;
                height: 100vh;
                background-color: #f0f0f0;
            }

            form {
                width: 600px;
                background-color: #fff;
                padding: 20px;
                border-radius: 8px;
                box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            }

            fieldset {
                border: 1px solid black;
                padding: 10px;
                margin: 0;
            }

            legend {
                font-weight: bold;
                margin-bottom: 10px;
            }

            label {
                display: block;
                margin-bottom: 5px;
            }

            input[type="text"],
            input[type="email"],
            input[type="password"],
            textarea {
                width: calc(100% - 20px);
                padding: 8px;
                margin-bottom: 10px;
                box-sizing: border-box;
                border: 1px solid #ccc;
                border-radius: 4px;
            }
            input[type="submit"] {
                padding: 10px 20px;
                margin-left: 475px;
                border-radius: 5px;
                cursor: pointer;
                background-color: #04af2f;
            }
        </style>
    </head>
    <body>
        <form>
            <fieldset>
                <legend>
                    Registration Form
                </legend>
                <label>First Name</label>
                <input type="text" name="FirstName" />
                <label>Last Name</label>
                <input type="text" name="LastName" />
                <label>Email id</label>
                <input type="email" name="email"/>
                <label>Enter your password</label>
                <input type="password" name="password"/>
                <label>Confirm your password</label>
                <input type="password"name="confirmPass"/>
                <label>Address</label>
                <textarea name="address"></textarea>
                <input type="submit" value="Submit"/>
            </fieldset>
        </form>
    </body>
</html>

HTML 表单如何工作？

当用户通过点击按钮提交表单时，浏览器会创建一个数据包并将其转发到服务器。接下来，服务器将执行所需的处理并将 HTML 网页形式的响应发送回浏览器。

视频 - HTML 表单

打印页面
上一页
下一页
广告