Css 简明教程
CSS - Forms
当您想从网站访问者那里收集一些数据时，需要表单。它们有输入字段供用户输入信息、标签用于识别输入字段以及按钮用于提交表单或执行操作。
我们可以通过更改表单元素的外观（例如，文本字段、复选框、单选按钮、下拉菜单和提交按钮）来设置 HTML 表单的样式。
How to Style a Form in CSS?
-
Use Containers: 容器可用于将所有表单元素（例如，文本输入、单选按钮、提交按钮）包装到单个容器中，并对其应用通用样式。
-
对于文本输入： 对于文本输入，您可以根据您的配色主题添加内边距、外边距和背景颜色。您还可以使用焦点伪类来设置输入元素所选状态的样式。
-
悬停效果： 通过使用伪类 :hover，您可以对元素状态（例如，提交按钮）的鼠标悬停设置样式。这会为用户提供动态体验。
-
响应式设计： 通过使用媒体查询，您可以调整表单样式以适应不同的屏幕宽度
-
Transition Effect 此外，您可以为输入标签和按钮使用过渡效果，实现平滑交互
这些是 HTML 表单中最常用的样式。此原则允许您创建一个样式良好且对用户友好的表单。
Styling Input Fields
如上所述，我们可以添加 * padding* 、 * margin* 和 * background-color* 来设置文本输入标签的样式。除此之外，我们还可以更改 * border* 、 * border-radius* 、文本颜色和焦点状态。
Example
在此代码中，我们对文本输入字段应用了所有提到的样式。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
/* CSS styles for input fields */
input {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 2px solid #ccc;
border-radius: 5px;
background-color: #f9f9f9;
color: #333;
font-size: 16px;
box-sizing: border-box;
}
input:focus {
border-color: #66afe9;
outline: none;
box-shadow:
0 0 5px rgba(102, 175, 233, 0.5);
background-color: #fff;
}
</style>
</head>
<body>
<h3>Styled Input Tags</h3>
Name:
<input type="text">
Email:
<input type="email">
Password:
<input type="password">
</body>
</html>Input Field with Icons Inside
我们可以在文本输入元素中添加图标或图像作为占位符，以使我们的表单具有动态性。这通常用于在搜索元素中添加镜头图标。
Example
在示例中，我们使用了 * background-image* 属性来指定图标的链接，并将其呈现在输入框中。有许多网站（如 icon8.com）提供免费的图标链接。
<!DOCTYPE html>
<html>
<head>
<style>
input {
width: 100%;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-image:
url('https://img.icons8.com/?size=100&id=kDqO6kPb3xLj&format=png&color=000000');
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
background-size: 40px 40px;
}
</style>
</head>
<body>
<h2>Input field with an icon inside</h2>
<input type="text" placeholder="Search..">
</body>
</html>Animated Input Field
我们可以使用 css * transition* 属性来制作动态文本输入字段。
input {
transition: all 0.3s ease;
}过渡属性应用于输入，指定所有 CSS 属性（全部）应在 0.3 秒内使用缓动时序函数进行过渡。
Example
在此示例中，我们为文本输入使用了过渡属性，并在获得焦点时添加了样式。
<!DOCTYPE html>
<html>
<head>
<style>
/* Basic styling for input */
input {
border: 2px solid #ccc;
border-radius: 4px;
padding: 12px 20px;
transition: all 0.9s ease;
}
/* Styling when input is focused */
input:focus {
border-color: dodgerblue;
width: 70%;
box-shadow:
0 0 8px 0 rgba(0, 0, 255, 0.2);
}
</style>
</head>
<body>
<h2>Animated Input Field</h2>
<input type="text"
placeholder="Enter your text...">
</body>
</html>Styling Textareas
文本区域允许用户在单个输入框中输入较长的文本。
Example
这是一个样式化的文本区域的示例，它允许用户输入地址。
<html>
<head>
<style>
textarea {
width: 100%;
height: 100px;
font-size: 16px;
color: #938b8b;
padding: 15px;
border: 2px solid;
}
textarea:focus {
box-shadow:
0 0 10px rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
Enter Address
<form>
<textarea>
Address
</textarea>
</form>
</body>
</html>Styling Select Dropdown
在 CSS 中，我们可以更改下拉列表的文本样式、颜色、边距、内边距、边框和阴影效果。请查看以下示例。
Example
在此示例中，我们演示如何设置选择标记的样式。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
height: 150px;
padding: 20px;
}
label {
font-size: 16px;
}
#styled-select {
width: 200px;
padding: 10px;
font-size: 16px;
border: 2px solid #ccc;
border-radius: 4px;
}
#styled-select:focus {
border-color: #007BFF;
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
outline: none;
}
</style>
</head>
<body>
<label> Choose an option: </label>
<select id="styled-select">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
</body>
</html>Styling Checkbox and Radio Button
您可以使用以下 * selectors* 来选择和设置复选框和单选按钮的样式。
input[type="checkbox"] {
property: value;
}
input[type="radio"]{
property: value;
}Example
以下示例演示了这一点：
<html>
<head>
<style>
form {
padding: 20px;
border: 1px solid #ccc;
border-radius: 10px;
max-width: 300px;
margin: 0 auto;
}
label {
font-weight: bold;
margin-top: 10px;
display: block;
}
input[type="radio"],
input[type="checkbox"] {
margin-right: 5px;
vertical-align: middle;
}
/* '+' is Adjacent Sibling Selectors */
input[type="radio"] + label,
input[type="checkbox"] + label {
display: inline-block;
margin-right: 10px;
}
/* Change color of checked option */
input[type="radio"]:checked + label,
input[type="checkbox"]:checked + label {
color: #007BFF;
}
</style>
</head>
<body>
<form>
<label>Radio Buttons: </label>
<input type="radio"
name="gender" value="male">
<label for="male">Male</label>
<input type="radio"
name="gender" value="female">
<label for="female">Female</label>
<br>
<label>Checkboxes:</label>
<input type="checkbox"
name="lang" value="html">
<label for="html">HTML</label>
<input type="checkbox"
name="lang" value="css">
<label for="css">CSS</label>
<input type="checkbox"
name="lang" value="bootstrap">
<label for="html">bootstrap</label>
</form>
</body>
</html>Styling Submit Button
CSS 可用于修改 HTML 页面中按钮的外观。通常使用 CSS 更改按钮的填充、背景颜色、文本颜色、边框和悬停效果。
Example
在此示例中，我们演示如何设置按钮标记的样式。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
background-color: #f0f0f0;
padding: 40px;
height: 150px;
}
.styled-button {
padding: 10px 20px;
font-size: 16px;
color: white;
background-color: #007BFF;
border: none;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
cursor: pointer;
transition: all 0.3s;
}
.styled-button:hover {
background-color: #0056b3;
}
.styled-button:active {
transform: scale(0.5);
}
.styled-button:focus {
outline: none;
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}
</style>
</head>
<body>
<button class="styled-button">
Click Me
</button>
</body>
</html>Fieldset and Legend for Form
-
<fieldset>* 标记用于将几个控件和标签分组在 Web 表单中，它在表单元素周围添加一个矩形框。
-
<legend>* 标记用于指定 <fieldset> 元素的标题。
Example
以下示例演示如何设置 <fieldset> 和 <legend> 元素的样式。
<!DOCTYPE html>
<html>
<head>
<style>
fieldset {
padding: 10px;
}
legend {
font-weight: bold;
color: #0F8D0F;
margin-bottom: 10px;
}
input {
width: calc(100% - 20px);
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>Login</legend>
<label for="username">
Username:
</label>
<input type="text"
id="username" name="username">
<label for="password">
Password:
</label>
<input type="password"
id="password" name="password">
<input type="submit" value="Submit">
</fieldset>
</form>
</body>
</html>Responsive HTML Form
下面是一个简单的响应式表单布局示例。在不同的设备上查看此表单，了解响应性。−
Example
<html>
<head>
<style>
.container {
max-width: 400px;
margin: 0 auto;
padding: 20px;
background-color: #c5e08e;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
margin-bottom: 20px;
color: #34892b;
}
label {
display: block;
font-weight: bold;
font-size: 15px;
margin-bottom: 5px;
color: #070707;
}
input[type="text"],
input[type="email"],
select {
width: 100%;
padding: 15px;
margin-bottom: 15px;
border: 2px solid #ccc;
border-radius: 10px;
background-color: #eff5f5;
}
input[type="submit"] {
width: 100%;
padding: 10px;
background-color: #216e2a;
color: #fff;
border: none;
font-size: 20px;
border-radius: 4px;
cursor: pointer;
}
textarea {
width: 100%;
height: 100px;
padding: 15px;
margin-bottom: 15px;
border: 2px solid #ccc;
border-radius: 10px;
background-color: #eff5f5;
}
input[type="radio"] {
margin-right: 5px;
vertical-align: middle;
margin-bottom: 10px;
}
input[type="submit"]:hover {
background-color: #44d115;
color: #000000;
}
</style>
</head>
<body>
<div class="container">
<h1>Registration Form</h1>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter Name..." required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter Email Id..." required>
<label for="email">Address:</label>
<textarea>Address...</textarea>
<label>Gender: </label>
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
<label for="gender">Langauges:</label>
<select id="gender" name="gender">
<option value="lang" disabled selected>Select Gender</option>
<option value="male">Hindi</option>
<option value="female">Marathi</option>
<option value="other">English</option>
</select>
<input type="submit" value="Submit">
</form>
</div>
</body>
</html>