HTML 格式的注册表

HTML 表单是当今众多网站中的重要组成部分，可用于多种目的，例如用户身份验证、注册、反馈收集等。这些表格有助于从您网站的访问者那里收集有价值的数据和信息。

HTML 表单是使用称为“控件”的特殊元素构建的。这些控件包含一系列选项，例如文本区域、单选按钮、复选框和提交按钮，使用户能够有效地输入详细信息。用户可以通过输入文本、选择特定项目以及通过与这些控件交互来执行其他相关操作来修改所提供的信息。表单完成后，就可以提交，从而导致不同的结果，例如数据添加、传输、重定向到另一个页面，甚至将详细信息存储在数据库中。

HTML 表单是一种吸引网站访问者的交互式且用户友好的方式。它们促进用户和网站所有者之间的无缝沟通和数据交换，使企业能够收集重要的见解并增强用户体验。

如何创建 HTML 表单？

创建 HTML 表单涉及使用

元素，用作表单内容的容器。与其他 HTML 元素（例如

、

和 ）一起，您可以设计功能齐全的表单。此外，CSS 还可用于增强外观和用户体验。 注意： 如果您是 Web 开发新手并希望学习如何编写基本 HTML 代码，我们有一篇关于用 HTML 设计网页的文章。它提供了编写 HTML 代码的分步指南。

本文讨论的 HTML 网页设计要点是：

1. 如何设置您的项目？
2. 如何从 HTML 结构开始？
3. 如何向正文添加内容？
4. 如何构建内容？
5. 如何保存 HTML 文件？
6. 如何查看您的网页？

以下是 HTML 表单的基本语法。

语法：

form elements like submit or reset buttons, input, text area etc.

HTML 格式的注册表示例

让我们看一些使用 HTML 的注册表单示例：

示例1：简单注册表

这是创建简单 HTML 注册表单的示例。

代码：

<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
.container {
width: 400px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #333;
margin-top: 0;
}
p {
text-align: center;
color: #777;
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 10px;
color: #333;
}
input[type="text"],
input[type="password"] {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
hr {
margin-top: 20px;
margin-bottom: 20px;
border: 0;
border-top: 1px solid #ccc;
}
a {
color: #337ab7;
text-decoration: none;
}
button[type="submit"] {
display: block;
width: 100%;
padding: 10px;
margin-top: 20px;
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
}
button[type="submit"]:hover {
background-color: #45a049;
}
.container.signin {
text-align: center;
color: #777;
}
</style>

Register Here

Please fill in the details to create an account with us.

---

Enter Email Password Confirm Password

---

By creating an account you agree to our Terms & Privacy.

Register

Already have an account? Sign in.

输出：

注册表：验证

为了确保用户输入他们的电子邮件地址，我们将添加一个验证代码，如果他们尝试在未填写电子邮件字段的情况下提交表单，无论输入密码和确认信息如何，都会触发弹出窗口。

元素中的关键字‘required’表示该元素必须被填充。我们将此关键字添加到我们的文本字段“电子邮件”中，然后查看下面的结果；

<input type="text" placeholder="Enter Email" name="email" required>

同样，您需要对密码和确认密码字段进行操作。

<input type="password" placeholder="Enter Password" name="pwd" required>
<input type="password" placeholder="Confirm Password" name="confirm" required>

输出：

示例2：求职登记表

以下是用 HTML 创建职位申请注册表的示例。

代码：

<title>Job Application Registration Form</title>
<style>
body {
font-family: Calibri, sans-serif;
background-color: #72b7f4;
}
h2 {
color: #232729;
text-align: center; /* Center align the title */
}
form {
background-color: #bfddf7;
max-width: 500px;
margin: 0 auto;
padding: 30px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
label {
display: block;
margin-bottom: 10px;
color: #333333;
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="file"] {
width: 100%;
padding: 10px;
border: 1px solid #cccccc;
border-radius: 4px;
box-sizing: border-box;
margin-bottom: 15px;
background-color: #ffffff; /* Set background color to white */
}
select {
width: 100%;
padding: 10px;
border: 1px solid #cccccc;
border-radius: 4px;
box-sizing: border-box;
margin-bottom: 15px;
}
input[type="submit"] {
background-color: #1a73e8;
color: #ffffff;
border: none;
padding: 12px 24px;
border-radius: 4px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #0059b3;
}
</style>


<h2 id="Job-Application-Registration">Job Application Registration</h2>

Full Name: Email Address: Phone Number: Resume (PDF or Word): Position Applied: Select Position Frontend Developer Backend Developer Graphic Designer

输出：

示例3：酒店登记表

以下是用 HTML 创建酒店登记表的示例。

代码：

<title>Hotel Registration Form</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0bd9d;
padding: 20px;
}
form {
max-width: 500px;
margin: 0 auto;
background: linear-gradient(to bottom right, #fff, #f1f1f1);
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
label {
display: block;
margin-bottom: 10px;
font-weight: bold;
}
.form-row {
margin-bottom: 20px;
}
.form-row label {
display: block;
margin-bottom: 5px;
}
.form-row input,
.form-row select {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
font-size: 14px;
}
input[type="submit"] {
padding: 10px 20px;
background: linear-gradient(to bottom right, #db4340, #ff6f00);
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
</style>


<img src="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" alt="Hotel Image"   style="max-width:90%">

Name

Email ID

Phone Number

Number of Guests

Check-in Date

Check-out Date

Room Type Select Room Type Single Double Suite

输出：

以上是HTML 格式的注册表的详细内容。更多信息请关注PHP中文网其他相关文章！