CSS - 表单

上一页
下一页

当您想从网站访问者那里收集一些数据时，需要 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>

以下是一些常见的CSS技术和属性，您可以使用它们来设置HTML表单的样式：

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>Font and Text 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 表单 - 设置元素边框和背景的样式

您可以使用 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>Styling Form Element Borders and Backgrounds</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="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>Using Padding and Margins In Forms</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 伪类定义表单元素处于焦点状态时的样式。


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>Focus Styling In Forms</h2>
	 	<p>Place the mouse in each of the input fields to see effect of focus styling</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 属性设置为 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>Without 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>With 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 属性向输入字段添加 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://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: 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>
打印本页
上一页
下一页