如何创建 HTML 注册表单

2025年3月17日 | 阅读 7 分钟

引言

HTML 注册表单是用户界面的一部分，它包含用于收集个人数据的输入字段，包括性别、联系信息、电子邮件地址和密码。这些字段默认使用 CSS 进行显示和验证。

方法

HTML 页面上的注册表单包括名字、姓氏、电子邮件地址、密码和其他输入字段。
通过将 CSS 样式应用于布局、间距、颜色、边框和元素对齐方式的视觉组合，可以更好地实现这些效果。
它通过一个 flexbox 带来一个恒定的显示，该 flexbox 在视口内水平和垂直地居中表单。
为了确保在提交表单之前完成所有必填字段，已将 required 属性应用于输入字段。
提交后，表单数据将通过一个可单击的按钮发送到服务器，该按钮已与 CSS 连接。

注册页面的 HTML 结构

为了更好地理解，我们将在以下各节中概述该过程。

首先，我们将创建一个 html 文件，该文件将使用此基本 HTML 代码作为模板。<head> 标签打开，并且紧接着是 <title> 标签。当当前网页的标题显示在标签的名称中时，<title> 标签中包含的信息将显示出来。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Register</title> 
  </head>	
  <body></body>
</html>

现在，让我们在 <body> 元素内添加一个 表单顶部<form> 标签。表单底部我们将使用 <form> 标签来包含我们的表单。HTML 中的表单标签确保可以使用它们来构建任何表单。表单的 action 和 method 是表单标签除了其他属性之外的最基本的期望属性。为了让系统知道提交后数据应该到哪里去，会指定 action 属性，我们使用 URL 作为表单。此外，相反，属性的左侧是 method，它表示应该使用 GET 和 POST 等 HTTP 方法来传递表单数据。我们将在表单中插入 2 个 div 标签以标准化字段。在这里，标题、描述、输入和提交按钮可以在一个 division 中找到。

标签内的代码显示如下

<form>
      <div></div>
      <div></div>
</form>

在接下来的步骤中，我们将操作第一个 div 标签内部。首先，为我们的表单添加一个标题和描述。在 <h1> 标签中为我们的注册表单写入“注册”作为标题。接下来，在 <p> 标签中写入“请填写此表格进行注册”作为表单的描述。<p> 标签通常用于创建长段落或文本描述，而 <h1>, <h2>, <h3>, 和 <h4> 被设计为标题或标题标签。

<form>
      <div>
        <h1>Register</h1>
        <p>Fill out the form to register.</p>
      </div>
      <div></div>
</form>

输出

How to Create a Registration Form in HTML

现在让我们包含密码、电子邮件地址和用户名字段，以及用于再次输入密码的另一个字段。这些以两个输入标签和标签的形式添加。用户的信息通过 <input> 标签插入，而输入字段通过 <label> 标签进行标记。该 label 标签的一个属性给出了相关实体的性质。<label> 标签内的 <b> 标签现在使粗体文本变粗。input 标签的主要属性有五个。

type 表示输入字段中输入的数据类型。它可以包含字符、文本、电子邮件、密码等。例如，如果 type 设置为 number，则用户将无法在输入框中输入文本。
placeholder 为用户提供有关输入字段中预期数据类型的快速指示。一旦用户开始输入数据，它就会消失。
表单提交后，输入字段中的实体由其 name 引用。
id，顾名思义，它充当元素的唯一标识符。
required 属性是一个布尔值，指示用户是否必须输入数据。用户必须在指示了 required 属性的任何字段中提交数据；否则，网页将显示默认错误消息。正如您在下面看到的，我们为输入用户名创建了一个标签和输入字段对。

<form>
      <div>
        <h1>Register</h1>
        <p> Fill out the form to register.</p>
        <!-- label for username -->
        <label for="username"><b>Username</b></label> 
        <!-- input field for username -->
        <input
          type="text"
          placeholder="Enter username."
          name="username"
          id="username"
          required
        />
      </div>
      <div></div>
    </form>

输出

如下所示，我们还可以包含一个标签，对应于密码、电子邮件地址和重复密码的输入字段。

  <form>
      <div>
        <h1>Register</h1>
        <p> Fill out the form to register.</p>
        <!-- label and input for username -->
        <label for="username"><b>Username</b></label>
        <input
          type="text"
          placeholder="Enter username"
          name="username"
          id="username"
          required
        />
        <!-- label and input for email -->
        <label for="email"><b>Email</b></label>
        <input
          type="text"
          placeholder="Enter Email"
          name="email"
          id="email"
          required
        />
        <!-- label and input for password -->
        <label for="pwd"><b>Password</b></label>
        <input
          type="password"
          placeholder="Enter Password"
          name="pwd"
          id="pwd"
          required
        />
        <label for="pwd-repeat"><b>Repeat Password</b></label>
        <input
          type="password"
          placeholder="Repeat Password"
          name="pwd-repeat"
          id="pwd-repeat"
          required
        />
      </div>
      <div></div>
    </form>

输出

然后，如下面的示例代码所示，提交的用户将在第一个 division 中获得一个提交按钮，以发送他们在注册表中填写的信息。

<form>
      <div>
        <h1>Register</h1>
        <p> Fill out the form to register.</p>
        <label for="username"><b>Username</b></label>
        <input
          type="text"
          placeholder="Enter username"
          name="username"
          id="username"
          required
        />

        <label for="email"><b>Email</b></label>
        <input
          type="text"
          placeholder="Enter Email"
          name="email"
          id="email"
          required
        />

        <label for="pwd"><b>Password</b></label>
        <input
          type="password"
          placeholder="Enter Password"
          name="pwd"
          id="pwd"
          required
        />
        <label for="pwd-repeat"><b>Repeat Password</b></label>
        <input
          type="password"
          placeholder="Repeat Password"
          name="pwd-repeat"
          id="pwd-repeat"
          required
        />
        <!-- submit button -->
        <button type="submit">Register</button>
      </div>
      <div></div>
 </form>

输出

最后，我们可以通过在 <p> 标签内的文本周围添加 <a> 标签将用户从表单标签内嵌套的第二个 div 路由到登录页面，如下所示

 <form>
      <div>
        <h1>Register</h1>
        <p> Fill out the form to register.</p>
        <label for="username"><b>Username</b></label>
        <input
          type="text"
          placeholder="Enter username"
          name="username"
          id="username"
          required
        />

        <label for="email"><b>Email</b></label>
        <input
          type="text"
          placeholder="Enter Email"
          name="email"
          id="email"
          required
        />

        <label for="pwd"><b>Password</b></label>
        <input
          type="password"
          placeholder="Enter Password"
          name="pwd"
          id="pwd"
          required
        />

        <label for="pwd-repeat"><b>Repeat Password</b></label>
        <input
          type="password"
          placeholder="Repeat Password"
          name="pwd-repeat"
          id="pwd-repeat"
          required
        />
        <button type="submit">Register</button>
      </div>
      <div>
        <p>Already have an account? <a href="#">Log in</a>.</p>
      </div>
 </form>

输出

注册页面的 CSS 样式

注册表单的基本框架已成功构建。现在我们将使用 CSS 为表单设置样式，使其看起来更好。

创建 CSS 文件后，我们应该将其链接到我们的 HTML 文件。

 <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./styles.css">
    <title>Register</title>
  </head>
<body style="background-color:powderblue;">
</body>
Let us start by adding a few fundamental styles to the form, as indicated below. To add the required styles, choose the <form> tag inside the CSS.
form{
    display: flex;
    flex-direction: column;
    align-items: center;
}

现在让我们给表单内的第一个 div 标签一个名为“container”的类并应用它。这是显示的 HTML 代码

<form>
      <div class="container">
        <h1>Register</h1>
        <p> Fill out the form to register.</p>
        <label for="username"><b>Username</b></label>
        <input
          type="text"
          placeholder="Enter username"
          name="username"
          id="username"
          required
        />
        <label for="email"><b>Email</b></label>
        <input
          type="text"
          placeholder="Enter Email"
          name="email"
          id="email"
          required
        />
        <label for="pwd"><b>Password</b></label>
        <input
          type="password"
          placeholder="Enter Password"
          name="pwd"
          id="pwd"
          required
        />
        <label for="pwd-repeat"><b>Repeat Password</b></label>
        <input
          type="password"
          placeholder="Repeat Password"
          name="pwd-repeat"
          id="pwd-repeat"
          required
        />
        <button type="submit">Register</button>
      </div>
      <div>
        <p>Already have an account? <a href="#">Log in</a>.</p>
      </div>
 </form>

输出

分配给“container”类的匹配样式列出如下。简而言之，它占据 25vw 的宽度，并将所有字段垂直排列成行。

.container{
    display: flex;
    flex-direction: column;
    width: 25vw;
}

然后，如下所示，将标题和描述定位在表单的中心。

h1, p{
    text-align: center;
}

表单的基本样式几乎完成了。如上所示，我们现在可以为输入字段添加所需的字体和间距。

/* font family is added */
body {
  font-family: Arial, Helvetica, sans-serif;
}
form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.container {
  display: flex;
  flex-direction: column;
  width: 25vw;
}

h1, p {
  text-align: center;
}

/* desired spacing for input fields */
input {
  margin: 0.25em 0em 1em 0em;
}

现在让我们使我们的输入字段更具吸引力。

input {
  margin: 0.25em 0em 1em 0em;
  outline: none;
  padding: 0.5em;
  border: none;
  background-color: rgb(225, 225, 225);
  border-radius: 0.25em;
  color: black;
}

最后，让我们为我们的提交按钮提供一些基本样式，如下所示，其中包括悬停功能。

/* styles for button */
button {
  padding: 0.75em;
  border: none;
  outline: none;
  background-color: rgb(68, 18, 232);
  color: white;
  border-radius: 0.25em;
}

/* hover functionality for button */
button:hover {
  cursor: pointer;
  background-color: rgb(41, 4, 164);
}

最后，注册表单已经构建完成。

输出

最终的注册表单显示如下

下一主题用于分隔线的 HTML

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

HTML 教程

HTML 属性

HTML 标签列表

HTML5 高级

HTML API

HTML 颜色名称

HTML 杂项

选择题

面试题

如何创建 HTML 注册表单

引言

方法

注册页面的 HTML 结构

注册页面的 CSS 样式

相关帖子

HTML Localhost Index

HTML 超链接

如何在 HTML 中突出显示文本

HTML 居中对齐

如何在 HTML 中使用 Font Awesome 图标

HTML 和 CSS 着陆页

HTML required 属性