HTML 格式的注册表-html教程-PHP中文网

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

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

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

如何创建 HTML 表单？

创建 HTML 表单涉及使用

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

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

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

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

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

语法：

<form action = "URL" method = "GET or POST">
form elements like submit or reset buttons, input, text area etc.
</form>

登录后复制

HTML 格式的注册表示例

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

示例1：简单注册表

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

代码：

<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<form>
<div class="container">
<h1>Register Here</h1>
<p>Please fill in the details to create an account with us.</p>
<hr>
<label for="email"><b>Enter Email</b></label>
<input type="text" placeholder="Enter Email" name="email">
<label for="pwd"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="pwd">
<label for="confirm"><b>Confirm Password</b></label>
<input type="password" placeholder="Confirm Password" name="confirm">
<hr>
<p>By creating an account you agree to our <a href="#">Terms & Privacy</a>.</p>
<button type="submit" class="registerbtn"><strong>Register</strong></button>
</div>
<div class="container signin">
<p>Already have an account? <a href="#">Sign in</a>.</p>
</div>
</form>
</body>
</html>

登录后复制

输出：

HTML 格式的注册表

注册表：验证

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

元素中的关键字‘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>

登录后复制

输出：
HTML 格式的注册表

示例2：求职登记表

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

代码：

<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<h2>Job Application Registration</h2>
<form action="/apply" method="POST">
<label for="name">Full Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email Address:</label>
<input type="email" id="email" name="email" required>
<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone" required>
<label for="resume">Resume (PDF or Word):</label>
<input type="file" id="resume" name="resume" accept=".pdf,.doc,.docx" required>
<label for="position">Position Applied:</label>
<select id="position" name="position" required>
<option value="">Select Position</option>
<option value="frontend-developer">Frontend Developer</option>
<option value="backend-developer">Backend Developer</option>
<option value="graphic-designer">Graphic Designer</option>
</select>
<input type="submit" value="Submit Application">
</form>
</body>
</html>

登录后复制

输出：
HTML 格式的注册表

示例3：酒店登记表

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

代码：

<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<img src="image.jpg" alt="Hotel Image" style="display: block; margin: 0 auto 20px; width: 500px;">
<form>
<div class="form-row">
<label for="name">Name</label>
<input type="text" id="name" name="name">
</div>
<div class="form-row">
<label for="email">Email ID</label>
<input type="email" id="email" name="email">
</div>
<div class="form-row">
<label for="phone">Phone Number</label>
<input type="tel" id="phone" name="phone">
</div>
<div class="form-row">
<label for="guests">Number of Guests</label>
<input type="number" id="guests" name="guests">
</div>
<div class="form-row">
<label for="check-in">Check-in Date</label>
<input type="date" id="check-in" name="check-in">
</div>
<div class="form-row">
<label for="check-out">Check-out Date</label>
<input type="date" id="check-out" name="check-out">
</div>
<div class="form-row">
<label for="room-type">Room Type</label>
<select id="room-type" name="room-type">
<option value="">Select Room Type</option>
<option value="single">Single</option>
<option value="double">Double</option>
<option value="suite">Suite</option>
</select>
</div>
<input type="submit" value="Submit">
</form>
</body>
</html>

登录后复制

输出：

HTML 格式的注册表