css表单制作菜鸟
基础表单结构
使用HTML的<form>标签创建表单容器，内部包含<input>、<label>等元素。示例代码：
<form>
<label for="name">姓名：</label>
<input type="text" id="name" name="name">
<label for="email">邮箱：</label>
<input type="email" id="email" name="email">
<input type="submit" value="提交">
</form>样式美化
通过CSS调整表单外观，包括边框、间距、背景色等：
form {
max-width: 400px;
margin: 0 auto;
padding: 20px;
background-color: #f9f9f9;
border-radius: 8px;
}
label {
display: block;
margin-bottom: 8px;
font-weight: bold;
}
input[type="text"],
input[type="email"] {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ddd;
border-radius: 4px;
}
input[type="submit"] {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}响应式设计
使用媒体查询适配不同屏幕尺寸：
@media (max-width: 600px) {
form {
padding: 15px;
}
input[type="submit"] {
width: 100%;
}
}交互效果
添加悬停和焦点样式提升用户体验：
input[type="submit"]:hover {
background-color: #45a049;
}
input:focus {
border-color: #4CAF50;
outline: none;
box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
}验证提示
通过CSS为无效输入添加视觉反馈：
input:invalid {
border-color: #ff6b6b;
}
input:valid {
border-color: #51cf66;
}完整示例
结合HTML与CSS的完整表单代码：
<!DOCTYPE html>
<html>
<head>
<style>
/* 粘贴上述CSS代码 */
</style>
</head>
<body>
<!-- 粘贴上述HTML代码 -->
</body>
</html>
