数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何使用 HTML 和 CSS 创建注册表单？
在本文中，我们将了解**如何使用HTML和CSS创建注册表单**。注册表单允许访问网站的任何新用户进行注册。它包括添加电子邮件 ID、密码、重复密码，以及点击“注册”按钮进行注册。
要允许浏览器保存密码，请点击**记住我**。您还可以提供“条款与政策”链接，以便用户先阅读注册条款。让我们看看如何使用 HTML 和 CSS 创建注册表单。
创建注册表单的步骤
我们使用两个步骤来使用 HTML 和 CSS 创建注册表单。第一步是使用 HTML 创建注册表单的结构。第二步是使用 CSS 样式化注册表单。
步骤 1 - 添加 HTML
以下是创建注册表单的 HTML 代码。这是一个分步过程
- 为表单设置了一个div容器，并使用form元素创建表单。
- 我们为每个输入字段使用了标签，并使用input类型文本设置电子邮件 ID 字段。
- 密码和重复密码字段使用 input 类型密码设置。
- 我们使用了按钮来创建注册按钮，并使用复选框来实现“记住我”功能。
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Sign-Up form with HTML and CSS
</title>
<link rel="stylesheet" href="form.css">
</head>
<body>
<form>
<div class="formContainer">
<h1>Sign Up Form</h1>
<hr>
<label for="email">
<strong>Email</strong>
</label>
<input type="text" placeholder="Enter Email"
name="email" required>
<label for="password">
<strong>Password</strong>
</label>
<input type="password"
placeholder="Enter Password"
name="password" required>
<label for="repeatPassword">
<strong>Repeat Password</strong>
</label>
<input type="password"
placeholder="Repeat Password"
name="repeatPassword" required>
<label>
<input type="checkbox" checked="checked"
name="remember" id="check">
Remember me
</label>
<p>
By creating an account you agree to our
<a href="#" style="color:dodgerblue">
Terms & Privacy</a>.
</p>
<div>
<button type="submit" class="signup">
Sign Up
</button>
</div>
</div>
</form>
</body>
</html>
步骤 2 - 添加 CSS
以下是样式化注册表单的 CSS 代码。以下 CSS 文件样式化了输入字段、注册按钮，应用了填充、字体大小和背景颜色。
* {
box-sizing: border-box
}
body {
font-family: 'Segoe UI', Tahoma,
Geneva, Verdana, sans-serif;
}
/* Styling the form input fields */
input[type=text],
input[type=password] {
width: 100%;
font-size: 28px;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}
label {
font-size: 15px;
}
input[type=text]:focus,
input[type=password]:focus {
background-color: #ddd;
outline: none;
}
hr {
border: 1px solid #f1f1f1;
margin-bottom: 25px;
}
/* Style the Sign Up button */
button {
font-size: 18px;
font-weight: bold;
background-color: rgb(10, 119, 13);
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
/* To change opacity of button upon hovering */
button:hover {
opacity: 1;
}
.formContainer {
padding: 16px;
}
.formContainer p {
font-size: 28px;
}
#check {
margin-bottom: 15px;
}
完整示例代码
以下是完整的代码**使用 HTML 和 CSS 创建注册表单**。
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Sign-Up form with HTML and CSS
</title>
<style>
* {
box-sizing: border-box
}
body {
font-family: 'Segoe UI', Tahoma,
Geneva, Verdana, sans-serif;
}
input[type=text],
input[type=password] {
width: 100%;
font-size: 28px;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}
label {
font-size: 15px;
}
input[type=text]:focus,
input[type=password]:focus {
background-color: #ddd;
outline: none;
}
hr {
border: 1px solid #f1f1f1;
margin-bottom: 25px;
}
button {
font-size: 18px;
font-weight: bold;
background-color: rgb(10, 119, 13);
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
button:hover {
opacity: 1;
}
.formContainer {
padding: 16px;
}
.formContainer p {
font-size: 28px;
}
#check {
margin-bottom: 15px;
}
</style>
</head>
<body>
<form>
<div class="formContainer">
<h1>Sign Up Form</h1>
<hr>
<label for="email">
<strong>Email</strong>
</label>
<input type="text" placeholder="Enter Email"
name="email" required>
<label for="password">
<strong>Password</strong>
</label>
<input type="password"
placeholder="Enter Password"
name="password" required>
<label for="repeatPassword">
<strong>Repeat Password</strong>
</label>
<input type="password"
placeholder="Repeat Password"
name="repeatPassword" required>
<label>
<input type="checkbox" checked="checked"
name="remember" id="check">
Remember me
</label>
<p>
By creating an account you agree to our
<a href="#" style="color:dodgerblue">
Terms & Privacy</a>.
</p>
<div>
<button type="submit" class="signup">
Sign Up
</button>
</div>
</div>
</form>
</body>
</html>
更新于: 2024-07-19
15K+ 浏览量
广告