数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用 CSS 创建注册表单？
要使用 CSS 创建注册表单，我们将使用 HTML 表单。注册表单包含姓名、电子邮件、密码、联系方式以及从用户收集的其他类型的信息。它包含输入字段、按钮和其他表单元素，可以使用 form 标签轻松创建。
在本文中，我们将讨论并了解使用 CSS 创建注册表单的完整过程，包括分步说明和完整的示例代码。
使用 CSS 创建注册表单的步骤
我们将按照以下步骤使用 CSS 创建注册表单。
创建注册表单的结构
- 要创建表单，我们使用了 HTML 表单标签。我们使用 input 标签创建了多个输入字段，并使用 type 属性指定所需的输入字段类型。
- 然后，我们使用 label 标签创建标签来定义每个输入字段。我们还使用 select 标签创建下拉列表，并使用 option 标签指定已创建下拉列表的列表项。
- 最后，我们使用了一个提交按钮，该按钮使用 button 标签创建，用于提交表单。所有这些表单元素都包含在一个 div 容器中。
<h1>Registration Form</h1>
<div class="container">
<form>
<label for="name"><strong>Name</strong></label>
<input type="text" placeholder="Enter Name"
name="name" required>
<label for="email"><strong>Email</strong></label>
<input type="text" placeholder="Enter Email"
name="email" required>
<label for="Phone"><strong>Phone</strong></label>
<input type="tel" placeholder="Enter Number"
name="phone" required>
<label for="psw"><strong>Password</strong></label>
<input type="password" placeholder="Enter Password"
name="psw" required>
<label for="psw-confirm">
<strong>Confirm Password</strong>
</label>
<input type="password" placeholder="Confirm Password"
name="psw-confirm" required>
<label for="dob"><strong>D.O.B</strong></label>
<input type="date" placeholder="Enter DOB" name="dob"
required class="dob">
<label for="gender"><strong>Gender</strong></label>
<select id="gender" name="gender" required>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>
<hr>
<p>By creating an account you agree to our
<a href="#">Terms & Privacy</a>.
</p>
<button type="submit" class="registerbtn">
Register
</button>
<div class="signin">
<p>Already have an account?
<a href="#">Sign in</a>.
</p>
</div>
</form>
</div>
使用 CSS 设计注册表单
- 我们使用通用 选择器 来设置 HTML 文档的字体和字体大小，分别使用 CSS font-family 和 font-size 属性。为了居中标题，我们使用了 text-align 属性。
- 为了在 HTML 文档中居中表单，我们使用了 **container** 类。我们使用 display 属性将其设为弹性容器，然后使用 justify-content 属性将其水平居中。
- 为了设置表单元素的样式，我们使用了 width 来设置表单的宽度，并设置表单的 padding 和 background-color。
- 我们使用 **input, select** 作为元素选择器，通过设置其 margin 和 padding 来设置输入字段和下拉列表的样式。我们使用 border 属性删除了边框。
- 我们使用 :focus 伪类在输入字段处于焦点时删除 outline。我们还分别将 **dob** 和下拉列表的 cursor 属性值设置为 text 和 pointer。
- 为了设置提交按钮的样式，我们使用了 **registerbtn** 类。我们更改了其背景色和文本颜色，设置了 margin 和 padding，删除了其边框，将光标更改为指针，设置了 opacity 值并更改了字体大小。
- 我们对提交按钮使用了 :hover 伪类，并在悬停时设置 opacity 值。最后，我们使用 text-decoration 属性删除了链接的下划线。
* {
box-sizing: border-box;
font-family: Verdana, sans-serif;
font-size: large;
}
h1 {
text-align: center;
}
.container {
display: flex;
justify-content: center;
}
form {
padding: 16px;
width: 400px;
background-color: rgb(255, 254, 195);
}
input,select {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
}
input,select:focus {
outline: none;
}
.dob{
cursor: text;
}
select {
cursor: pointer;
}
hr {
border: 1px solid #f1f1f1;
margin-bottom: 25px;
}
.registerbtn {
background-color: #04af2f;
color: white;
padding: 16px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
font-size: larger;
}
.registerbtn:hover {
opacity: 1;
}
a {
color: dodgerblue;
text-decoration: none;
}
.signin {
background-color: #f1f1f1;
text-align: center;
}
完整的示例代码
以下是实现上述步骤以使用 CSS 创建注册表单的完整示例代码。
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
font-family: Verdana, sans-serif;
font-size: large;
}
h1 {
text-align: center;
}
.container {
display: flex;
justify-content: center;
}
form {
padding: 16px;
width: 400px;
background-color: rgb(255, 254, 195);
}
input,select {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
}
input,select:focus {
outline: none;
}
.dob{
cursor: text;
}
select {
cursor: pointer;
}
hr {
border: 1px solid #f1f1f1;
margin-bottom: 25px;
}
.registerbtn {
background-color: #04af2f;
color: white;
padding: 16px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
font-size: larger;
}
.registerbtn:hover {
opacity: 1;
}
a {
color: dodgerblue;
text-decoration: none;
}
.signin {
background-color: #f1f1f1;
text-align: center;
}
</style>
</head>
<body>
<h1>Registration Form</h1>
<div class="container">
<form>
<label for="name"><strong>Name</strong></label>
<input type="text" placeholder="Enter Name"
name="name" required>
<label for="email"><strong>Email</strong></label>
<input type="text" placeholder="Enter Email"
name="email" required>
<label for="Phone"><strong>Phone</strong></label>
<input type="tel" placeholder="Enter Number"
name="phone" required>
<label for="psw"><strong>Password</strong></label>
<input type="password" placeholder="Enter Password"
name="psw" required>
<label for="psw-confirm">
<strong>Confirm Password</strong>
</label>
<input type="password" placeholder="Confirm Password"
name="psw-confirm" required>
<label for="dob"><strong>D.O.B</strong></label>
<input type="date" placeholder="Enter DOB" name="dob"
required class="dob">
<label for="gender"><strong>Gender</strong></label>
<select id="gender" name="gender" required>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>
<hr>
<p>By creating an account you agree to our
<a href="#">Terms & Privacy</a>.
</p>
<button type="submit" class="registerbtn">
Register
</button>
<div class="signin">
<p>Already have an account?
<a href="#">Sign in</a>.
</p>
</div>
</form>
</div>
</body>
</html>
结论
在本文中，我们了解了如何使用 CSS 创建注册表单，并对代码进行了分步解释。我们使用了 HTML 表单以及表单元素来创建表单，并使用 CSS 来设置注册表单的样式。
更新于: 2024-10-24
3K+ 浏览量
广告