数据结构
网络
关系型数据库管理系统(RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学如何使用CSS创建响应式表单？
要使用CSS创建响应式表单，我们将使用HTML 表单元素，例如带有type属性和标签的HTML 输入标签。我们将使用CSS属性设计创建的表单，并使用媒体查询使其具有响应性。我们将逐步了解使用css创建响应式表单的过程。
在这篇文章中，我们拥有表单元素，我们的任务是使用CSS创建一个响应式表单。
创建响应式表单的步骤
我们将遵循以下步骤来创建一个响应式表单。
使用HTML创建表单结构
- 我们使用input标签创建了六个输入字段来收集用户信息，并为相应的输入字段添加了labels。
- 然后，我们将它们包装在两个div中，每个div包含三个标签和输入字段，构成两列。我们将所有这些元素包装在一个名为container的div中。
- 最后，我们使用input标签和type属性创建了一个提交按钮。
<h2>
Creating Responsive Form with CSS
</h2>
<div class="container">
<div class="formContainer">
<div class="container">
<div>
<label for="fname">Full Name</label>
<input type="text" id="fname" name="firstname"
placeholder="Enter Name" />
<label for="email"> Email</label>
<input type="text" id="email" name="email"
placeholder="[email protected]" />
<label for="uname">Username</label>
<input type="text" id="uname" name="username"
placeholder="Enter User Name" />
</div>
<div>
<label for="pass">Password</label>
<input type="text" id="pass" name="pwd"
placeholder="Enter Password" />
<label for="cnfpass">Confirm Password</label>
<input type="text" id="cnfpass" name="cnfpwd"
placeholder="Confirm Password" />
<label for="pass">D.O.B</label>
<input type="text" id="dob" name="dob"
placeholder="dd-mm-yyyy" />
</div>
</div>
<input type="submit" value="Submit" />
</div>
</div>
使用CSS进行响应式设计
- 我们使用container通过display属性将其设置为flexbox，使用justify-content使表单元素均匀分布。CSS gap属性在分隔输入字段的div元素之间添加间隙。
- 然后，我们使用margin属性设置标签的顶部和底部边距，并使用display属性将标签用作块元素。
- 我们使用formContainer类来设计包含所有输入字段和标签的容器，方法是设置其背景颜色和文本颜色，使用border-radius属性创建圆角容器，并设置padding。
- 然后，我们使用属性选择器“input[type="text"]”来设计所有输入字段。我们将输入字段的宽度设置为100%，占据可用空间，设置底部边距、边框和用于曲线边缘的边框半径以及输入字段的填充。
- 类似地，我们使用属性选择器来设计提交按钮，方法是设置其背景颜色、字体大小和光标为指针，填充、宽度和用于曲线边缘按钮的边框半径。悬停时，它会使用hover伪类更改其背景和文本颜色。
- 最后，我们使用@media查询实现响应式。我们将屏幕的最大宽度设置为600像素，即对于屏幕宽度小于600像素的情况，表单布局将更改。它将使用flex-direction属性将输入字段逐列显示，而不是并排显示。
body {
font-family: Verdana, sans-serif;
font-size: 15px;
padding: 8px;
}
* {
box-sizing: border-box;
}
.container {
display: flex;
flex-wrap: wrap;
padding: 20px;
justify-content: space-around;
}
.container div {
gap: 10px;
}
label {
margin: 15px 0px 15px 0px;
display: block;
}
.formContainer {
background-color: #031926;
color: white;
padding: 5px 20px 15px 20px;
border-radius: 3px;
}
input[type="text"] {
display: inline-block;
width: 100%;
margin-bottom: 20px;
padding: 12px;
border: 1px solid #ccc;
border-radius: 3px;
}
input[type="submit"] {
width: 100%;
border-radius: 3px;
background-color: #031926;
color: white;
padding: 12px 20px;
border: none;
cursor: pointer;
font-size: 18px;
}
input[type="submit"]:hover {
background-color: white;
color: #031926;
}
@media (max-width: 600px) {
.container {
flex-direction: column;
}
}
完整示例代码
以下是实现上述两个步骤以使用CSS创建响应式表单的完整示例代码。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: Verdana, sans-serif;
font-size: 15px;
padding: 8px;
}
* {
box-sizing: border-box;
}
.container {
display: flex;
flex-wrap: wrap;
padding: 20px;
justify-content: space-around;
}
.container div {
gap: 10px;
}
label {
margin: 15px 0px 15px 0px;
display: block;
}
.formContainer {
background-color: #031926;
color: white;
padding: 5px 20px 15px 20px;
border-radius: 3px;
}
input[type="text"] {
display: inline-block;
width: 100%;
margin-bottom: 20px;
padding: 12px;
border: 1px solid #ccc;
border-radius: 3px;
}
input[type="submit"] {
width: 100%;
border-radius: 3px;
background-color: #031926;
color: white;
padding: 12px 20px;
border: none;
cursor: pointer;
font-size: 18px;
}
input[type="submit"]:hover {
background-color: white;
color: #031926;
}
@media (max-width: 600px) {
.container {
flex-direction: column;
}
}
</style>
</head>
<body>
<h1>
Creating Responsive Form with CSS
</h1>
<div class="container">
<div class="formContainer">
<div class="container">
<div>
<label for="fname">Full Name</label>
<input type="text" id="fname" name="firstname"
placeholder="Enter Name" />
<label for="email"> Email</label>
<input type="text" id="email" name="email"
placeholder="[email protected]" />
<label for="uname">Username</label>
<input type="text" id="uname" name="username"
placeholder="Enter User Name" />
</div>
<div>
<label for="pass">Password</label>
<input type="text" id="pass" name="pwd"
placeholder="Enter Password" />
<label for="cnfpass">Confirm Password</label>
<input type="text" id="cnfpass" name="cnfpwd"
placeholder="Confirm Password" />
<label for="pass">D.O.B</label>
<input type="text" id="dob" name="dob"
placeholder="dd-mm-yyyy" />
</div>
</div>
<input type="submit" value="Submit" />
</div>
</div>
</body>
</html>
结论
在本文中，我们学习了如何使用CSS创建响应式表单。首先，我们使用表单元素创建了表单的基本HTML结构，然后使用CSS进行设计并使表单具有响应性。
更新于：2024年10月3日
4K+ 次浏览
广告