当您想要从网站访问者那里收集一些数据时，需要 HTML 表单。它们具有供用户输入信息的输入字段、用于标识输入字段的标签以及用于提交表单或执行操作的按钮。
CSS 可用于使表单看起来更漂亮。您可以使用 CSS 设置表单样式，以更改表单元素的外观，例如文本字段、复选框、单选按钮、选择菜单和提交按钮。
以下部分讨论使用 CSS 设置表单样式的一些方法:
简单的 HTML 表单如以下代码所示:
<form>
<input type="text" id="username" name="username" placeholder="Username">
<input type="password" id="password" name="password" placeholder="password">
<textarea id="message" name="message" rows="4" placeholder="Message"></textarea>
<input type="submit" value="Submit">
</form> 以下是一些可用于设置 HTML 表单样式的常见 CSS 技术和属性:
CSS 表单: 字体和文本样式
您可以使用 CSS 属性设置表单元素中的文本样式，例如 font-family、font-size、color和text-align 如下所示 -
input[type="text"],
input[type="password"],
textarea {
font-family: Arial, sans-serif;
font-size: 16px;
color: blue;
} 以下示例演示了这一点:
<html>
<head>
<style>
input[type="text"],
input[type="password"],
textarea {
font-family: Arial, sans-serif;
font-size: 16px;
color: blue;
}
label{
color:brown;
}
form{
display: grid;
}
</style>
</head>
<body>
<h2>字体和文本样式</h2>
<form>
<input type="text" id="username" name="username" placeholder="Username">
<input type="password" id="password" name="password" placeholder="password">
<textarea id="message" name="message" rows="4" placeholder="Message"></textarea>
<input type="submit" value="Submit">
</form>
</body>
</html> CSS 表单: 元素边框和背景
您可以使用 border、border、background-color 和 border-radius。
input[type="text"],
input[type="password"],
textarea {
border: 1px solid red;
background-color: antiquewhite;
border-radius: 5px;
} 以下示例演示了这一点:
<html>
<head>
<style>
input[type="text"],
input[type="password"],
textarea {
border: 1px solid red;
background-color: antiquewhite;
border-radius: 5px;
}
label{
color:brown;
}
form{
display: grid;
}
</style>
</head>
<body>
<h2>设置表单元素边框和背景的样式</h2>
<form>
<input type="text" id="username" name="username" placeholder="Username">
<input type="password" id="password" name="password" placeholder="password">
<textarea id="message" name="message" rows="4" placeholder="Message"></textarea>
<input type="submit" value="Submit">
</form>
</body>
</html> CSS 表单: 使用padding和margin
input[type="text"],
input[type="password"],
textarea {
padding: 10px;
margin: 5px 0;
} 以下示例演示了这一点:
<html>
<head>
<style>
input[type="text"],
input[type="password"],
textarea {
border: 1px solid red;
background-color: antiquewhite;
border-radius: 5px;
padding: 10px;
margin: 5px 0;
}
label{
color:brown;
}
form{
display: grid;
}
</style>
</head>
<body>
<h2>在表单中使用填充和边距</h2>
<form>
<input type="text" id="username" name="username" placeholder="Username">
<input type="password" id="password" name="password" placeholder="password">
<textarea id="message" name="message" rows="4" placeholder="Message"></textarea>
<input type="submit" value="Submit">
</form>
</body>
</html> CSS 表单: 焦点样式
您可以使用:focus 伪值定义表单元素处于焦点时的样式-class.
input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus {
border: 2px solid #007bff;
} 以下示例演示了这一点:
<html>
<head>
<style>
input[type="text"],
input[type="password"],
textarea {
border: 1px solid red;
background-color: antiquewhite;
border-radius: 5px;
padding: 10px;
margin: 5px 0;
}
input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus {
border: 10px solid yellow;
}
label{
color:brown;
}
form{
display: grid;
}
</style>
</head>
<body>
<h2>表单焦点样式</h2>
<p>将鼠标放在每个输入字段中以查看焦点样式的效果</p>
<form>
<input type="text" id="username" name="username" placeholder="Username">
<input type="password" id="password" name="password" placeholder="password">
<textarea id="message" name="message" rows="4" placeholder="Message"></textarea>
<input type="submit" value="Submit">
</form>
</body>
</html> CSS 表单: 按钮样式
使用 CSS 设计表单按钮的样式。您可以更改按钮的背景颜色、文本颜色并添加悬停效果。
input[type="submit"] {
background-color: #007bff;
color: #fff;
padding: 10px 20px;
border: none;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #0056b3;
} 以下示例演示了这一点:
<html>
<head>
<style>
input[type="text"],
input[type="password"],
textarea {
border: 1px solid red;
background-color: antiquewhite;
border-radius: 5px;
padding: 10px;
margin: 5px 0;
}
input[type="submit"] {
background-color: #007bff;
color: #fff;
padding: 10px 20px;
border: none;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #0056b3;
}
label{
color:brown;
}
form{
display: grid;
}
</style>
</head>
<body>
<h2>Form Button Styling</h2>
<form>
<input type="text" id="username" name="username" placeholder="Username">
<input type="password" id="password" name="password" placeholder="password">
<textarea id="message" name="message" rows="4" placeholder="Message"></textarea>
<input type="submit" value="Submit">
</form>
</body>
</html> CSS 表单: 复选框和单选按钮样式
复选框和单选按钮很难设计样式，但您可以使它们具有视觉吸引力。
input[type="checkbox"],
input[type="radio"] {
margin-right: 5px;
vertical-align: middle;
} 以下示例演示了这一点:
<html>
<head>
<style>
form {
max-width: 300px;
margin: 0 auto;
}
label {
display: block;
margin-bottom: 5px;
font-size: 20px;
color: red;
}
input[type="radio"], input[type="checkbox"] {
margin-right: 5px;
vertical-align: middle;
}
</style>
</head>
<body>
<form>
<label>Radio Buttons: </label>
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
<label>Checkboxes:</label>
<input type="checkbox" name="lang" value="html"> HTML
<input type="checkbox" name="lang" value="css"> CSS
<input type="checkbox" name="lang" value="bootstrap"> Bootstrap
</form>
</body>
</html> CSS 表单: 表单布局
使用 CSS 控制表单元素的布局。您可以使用 CSS Grid 或 Flexbox 等技术来实现更复杂的表单布局.
.form-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
} 示例
以下示例演示了一个简单的登录表单，用户可以在其中输入登录信息并单击登录按钮提交表单 -
<html>
<head>
<style>
.form-container {
max-width: 300px;
margin: 0 auto;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #f2c3ee;
}
.form-container input[type="text"],
.form-container input[type="password"] {
width: 100%;
padding: 5px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 3px;
}
.form-container button[type="submit"] {
width: 100%;
padding: 10px;
background-color: #15a415;
color: #fff;
border: none;
border-radius: 3px;
}
.form-container button[type="submit"]:hover {
background-color: #e62b1e;
}
h1 {
color: #15a415;
text-align: center;
}
h2 {
color: #e62b1e;
text-align: center;
}
</style>
</head>
<body>
<div class="form-container">
<h1>Tutorialspoint</h1>
<h2>Login</h2>
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" placeholder="username" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" placeholder="password" required>
<button type="submit">Login</button>
</form>
</div>
</body>
</html> CSS 表单: Box-sizing
要使所有表单元素具有相同的大小，可以将 box-sizing 属性设置为 border-box。此属性包括元素宽度和高度中的边框和填充，从而更容易一致地调整元素大小。
这里是一个示例 -
<!DOCTYPE html>
<head>
<style>
.box-sizing-element input,textarea,button {
width: 100%;
padding: 10px;
margin: 0;
box-sizing: border-box;
}
.normal-element input,textarea,button {
width: 100%;
padding: 10px;
margin: 0;
}
button{
background-color: #04AA6D;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="normal-element">
<h3>不使用 box-sizing</h3>
<form>
<input type="text" id="name" name="name" placeholder="Enter your name">
<br>
<input type="email" id="email" name="email" placeholder="Email id">
<br>
<textarea id="message" name="message" rows="4" placeholder="Message"></textarea>
<br>
<button type="submit" value="Submit">Submit</button>
</form>
</div>
<div class="box-sizing-element">
<h3>使用 box-sizing</h3>
<form>
<input type="text" id="name" name="name" placeholder="Enter your name">
<br>
<input type="text" id="email" name="email" placeholder="Email id">
<br>
<textarea id="message" name="message" rows="4" placeholder="Message"></textarea>
<br>
<button type="submit" value="Submit">Submit</button>
</form>
</div>
</body>
</html> CSS 表单: 字段集和图例
以下示例演示如何设置 <fieldset> 和 <legend> 元素的样式。 −
<html>
<head>
<style>
form {
width : 300px;
margin: 0 auto;
}
fieldset {
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
}
legend {
font-weight: bold;
text-align: center;
color: rgb(15, 141, 15);
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>Login</legend>
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<br>
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<input type="submit" value="Submit">
</fieldset>
</form>
</body>
</html> CSS 表单: 全宽输入
要使输入字段占据其父容器的整个宽度，可以设置其 width 属性设置为 100%，如下所示 -
<html>
<head>
<style>
input.full-width-input {
width: 100%;
font-size: 16px;
color: #545c53;
}
label {
font-weight: bold;
font-size: 20px;
color: #268219;
}
</style>
</head>
<body>
<form>
<label for="email">Address: </label>
<input type="text" id="email" name="email" class="full-width-input" placeholder="Enter address..." required>
</form>
</body>
</html> CSS 表单: 彩色输入
以下示例显示如何添加使用 background-color 属性为输入字段设置背景颜色 -
<html>
<head>
<style>
input.colored-input {
width: 100%;
font-size: 16px;
color: #545c53;
padding: 15px;
border: 3px solid #22d90e;
background-color: #93ea88;
}
label {
font-weight: bold;
font-size: 20px;
color: #268219;
}
</style>
</head>
<body>
<form>
<label for="add">Address: </label>
<input type="text" id="add" name="add" class="colored-input" placeholder="Enter address..." required>
</form>
</body>
</html> CSS 表单: 图像输入
以下示例演示了左侧带有锁定图标的密码输入字段。此图标用于象征用户界面中的密码输入字段 -
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<style>
.input-container {
position: relative;
width: 100%;
margin-bottom: 20px;
}
input.password-input {
width: 100%;
font-size: 16px;
color: #545c53;
padding: 15px 15px 15px 40px;
border: 2px solid #22d90e;;
}
.password-icon {
position: absolute;
top: 50%;
left: 15px;
transform: translateY(-50%);
font-size: 20px;
color: #22d90e;
}
</style>
</head>
<body>
<form class="input-container">
<i class="password-icon fas fa-lock"></i>
<input type="password" id="password" name="password" class="password-input" placeholder="password" required>
</form>
</body>
</html> CSS 表单: 带动画的输入
以下示例演示了输入字段如何扩展以占据其整个宽度单击或聚焦时的容器 -
<html>
<head>
<link rel="stylesheet" href="https:<style>
.input-container {
position: relative;
width: 100%;
margin-bottom: 20px;
}
input.password-input {
width: 50%;
font-size: 16px;
color: #545c53;
padding: 15px 15px 15px 40px;
border: 2px solid #22d90e;;
}
input.password-input:focus {
width: 100%;
}
.password-icon {
position: absolute;
top: 50%;
left: 15px;
transform: translateY(-50%);
font-size: 20px;
color: #22d90e;
}
</style>
</head>
<body>
<form class="input-container">
<i class="password-icon fas fa-lock"></i>
<input type="password" id="password" name="password" class="password-input" placeholder="password" required>
</form>
</body>
</html> CSS 表单: 文本区域样式
这是一个文本输入区域的示例，允许用户输入较长的文本，例如评论或消息−
<html>
<head>
<style>
textarea {
width: 100%;
height: 100px;
font-size: 16px;
color: #938b8b;
padding: 15px;
border: 3px solid #22d90e;
}
textarea:focus {
box-shadow: 0 0 10px #db59ab;
}
</style>
</head>
<body>
<form>
<textarea>Enter text here....</textarea>
</form>
</body>
</html> CSS 表单: 设置下拉菜单样式
以下示例演示如何设置默认隐藏的下拉菜单的样式。当用户单击触发元素时，下拉菜单将打开并显示项目列表 -
<html>
<head>
<style>
select {
width: 100%;
font-size: 16px;
color: #000000;
padding: 15px;
border: 3px solid #147309;
background-color: #93ea88;
}
</style>
</head>
<body>
<form>
<select aria-placeholder="Select Language">
<option value="lang" disabled selected>Select Language</option>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="bootstrap">Bootstrap</option>
</select>
</form>
</body>
</html> 响应式表单布局
这里是一个简单的响应式表单布局的示例。在不同的设备上检查此表单以查看响应能力。−
<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: #f25820;
}
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>