上查看所有课程
表单是一个交互式 HTML 元素，用于在网页上收集用户输入。例如，
上面的示例显示了没有任何样式的默认表单。
这里，表单使用不同的 CSS 属性进行了样式设置。
创建表单
表单使用 <form> 元素创建，用户输入使用 <input> 元素收集。例如，
<form action="/submit" method="post">
<input type="text" name="name" placeholder="Your name">
<input type="password" name="password" placeholder="Your password">
<input type="submit" value="Submit">
</form>浏览器输出
在这里，默认表单在没有任何样式的情况下看起来不好。
选择表单元素
表单元素可以通过以下方式选择
1. 选择表单元素
可以通过引用其元素名称来选择表单元素。例如，
input：选择所有输入字段textarea：选择所有文本区域label：选择所有标签元素
2. 选择表单元素属性
也可以通过使用元素属性选择器引用其属性来选择表单元素。例如，
-
input[type=text]：选择所有type属性设置为text的输入字段 -
input[type=password]：选择所有type属性设置为password的输入字段 -
input[type=number]：选择所有type属性设置为number的输入字段
样式化输入字段
输入字段允许我们在表单中输入和提交数据。例如，
<input type="text" name="name" id="name" >浏览器输出
默认输入字段
我们可以为输入字段添加以下样式，
- 宽度
- 内边距
- 外边距
- 边框
- 圆角
- 盒子阴影
- 字体
- 彩色输入
- 聚焦输入
让我们详细探讨其中的每一个。
为输入字段添加宽度
width 属性为输入字段添加宽度。例如，
input{
width: 100%;
}浏览器输出
在这里，输入字段会扩展以占据文档的全部宽度。
为输入字段添加内边距
padding 属性在输入字段内容和边框之间添加空间。例如，
input{
padding: 12px;
width: 100%;
}浏览器输出
在这里，为输入字段添加了 12px 的内边距。
为输入字段添加外边距
margin 属性在元素周围添加空间，在每个输入字段的外部创建空间。例如，
input {
margin: 20px 0;
width: 100%;
padding: 10px;
}浏览器输出
在上面的例子中：
margin: 20px 0为输入字段添加了 20px 的垂直外边距。
为输入字段添加边框
border 属性在输入字段周围添加边框。例如，
input {
border: 4px solid black;
}浏览器输出
在上面的示例中，border 属性添加了一个 4px 的 solid black 边框。
为输入字段添加圆角
border-radius 属性添加圆角，使输入字段的角落圆润。例如，
input {
border-radius: 10px;
}浏览器输出
在这里，border-radius 属性使用 10px 的圆角半径使输入字段的角落变圆。
为输入字段添加盒子阴影
box-shadow 属性为输入字段添加阴影。例如，
input:hover {
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.94);
}浏览器输出
上面的示例在输入字段被悬停时创建了一个围绕输入字段的阴影效果。
彩色输入
background-color 属性添加背景颜色，color 属性添加文本颜色到输入。例如，
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS Form Styling</title>
</head>
<body>
<form>
<label for="username">Username</label>
<input type="text" name="username" id="username" value="username" />
</form>
</body>
</html>input {
background-color: purple;
color: white;
width: 100%;
padding: 10px;
border-radius: 5px;
box-sizing: border-box;
}浏览器输出
在上面的例子中：
-
background-color: purple为输入背景添加了purple颜色 color:white将文本颜色设置为white
聚焦输入
:focus 选择器用于在输入字段聚焦时更改其属性。例如，
input:focus {
background-color: yellow;
}浏览器输出
在这里，当输入聚焦时，背景颜色会变为 yellow。
样式化文本区域
文本区域允许我们输入多行文本。例如，
<textarea>Start Writing...</textarea>浏览器输出
上面的示例显示了没有任何样式的默认文本区域。
我们可以为文本区域添加不同的 CSS 样式，例如：
textarea {
background-color: pink;
width: 100%;
height: 100px;
padding: 10px 0;
box-sizing: border-box;
border-radius: 4px;
color: purple;
}浏览器输出
在上面的例子中：
-
background-color: pink为文本区域的背景添加了pink颜色 width: 100%将文本区域扩展到其全部宽度-
height: 100px将文本区域的高度设置为100px -
padding: 10px在文本区域中添加了10px的内边距 -
box-sizing: border-box确保内边距和边框适合文本区域的高度和宽度 -
border-radius: 4px使文本区域的角落带有4px的圆角半径 -
color: purple将文本颜色设置为purple
样式化下拉菜单
下拉菜单为用户提供选项列表。例如，
<select>
<option>Select one</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>浏览器输出
上面的示例显示了没有自定义样式的默认下拉菜单。
我们可以为下拉菜单添加不同的 CSS 样式，如下所示：
select {
background-color: lightgray;
width: 100%;
padding: 10px;
border-radius: 4px;
}浏览器输出
在上面的例子中：
-
background-color:lightgray为下拉菜单的背景添加了浅灰色 -
width:20%将下拉菜单扩展到其原始宽度的 20% -
padding:10px在下拉菜单中添加了10px的内边距 -
border-radius: 4px使下拉菜单的角落带有4px的圆角半径
样式化单选按钮
单选按钮允许我们从列表中仅选择一个选项。例如，
<label for="option1">Option 1</label>
<input type="radio" id="option1" name="radioGroup" value="option1" />
<label for="option2">Option 2</label>
<input type="radio" id="option2" name="radioGroup" value="option2" />
<label for="option3">Option 3</label>
<input type="radio" id="option3" name="radioGroup" value="option3" />浏览器输出
上面的示例显示了一个没有 CSS 样式的默认单选按钮。
我们可以为单选按钮添加不同的 CSS 样式，例如：
input[type="radio"] {
width: 20px;
height: 20px;
margin-right: 10px;
}浏览器输出
在上面的例子中：
-
width: 20px将单选按钮的宽度设置为20px -
height: 20px将单选按钮的高度设置为20px -
margin-right: 10px在右侧设置了10px的外边距
样式化复选框
复选框允许我们从列表中选择多个选项。例如，
<input type="checkbox" id="option1" name="checkboxGroup" value="option1" />
<label for="option1">Option 1</label>
<input type="checkbox" id="option2" name="checkboxGroup" value="option2" />
<label for="option2">Option 2</label>
<input type="checkbox" id="option3" name="checkboxGroup" value="option3" />
<label for="option3">Option 3</label>浏览器输出
上面的示例显示了一个具有默认外观的复选框。
我们可以为复选框添加不同的 CSS 样式，例如：
input {
width: 20px;
height: 20px;
margin-right: 10px;
cursor: pointer;
}浏览器输出
在上面的例子中：
-
width: 20px将复选框的宽度设置为20px -
height: 20px将复选框的高度设置为20px -
margin-right: 10px在右侧设置了 10px 的外边距 -
cursor: pointer在悬停复选框时将光标设置为指针
样式化提交按钮
提交按钮会触发表单数据的提交。例如，
<input type="submit" value="Submit">浏览器输出
上面的示例显示了一个默认的提交按钮。
让我们为按钮添加一些 CSS 样式，
input[type="submit"] {
background-color: purple;
width: 180px;
display: block;
margin: 0px auto;
border: none;
border-radius: 5px;
font-weight: bold;
font-size: 18px;
font-family: "Courier New", Courier, monospace;
color: white;
margin-top: 30px;
padding: 20px;
text-align: center;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: indigo;
}浏览器输出
在这里，提交按钮使用不同的 CSS 属性进行了样式设置。