css制作表单

2026-03-31 20:36:08CSS

表单结构

表单通常由<form>标签包裹，内部包含输入框、下拉框、按钮等元素。基本结构如下：

<form>
  <label for="username">用户名</label>
  <input type="text" id="username" name="username">

  <label for="password">密码</label>
  <input type="password" id="password" name="password">

  <button type="submit">提交</button>
</form>

基础样式设计

使用CSS重置默认样式并添加基础美化：

css制作表单

form {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  background: #f9f9f9;
  border-radius: 8px;
}

label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
}

input[type="text"],
input[type="password"] {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
}

交互效果增强

添加悬停和焦点状态提升用户体验：

input:hover {
  border-color: #aaa;
}

input:focus {
  outline: none;
  border-color: #4CAF50;
  box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
}

button {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  width: 100%;
}

button:hover {
  background-color: #45a049;
}

响应式布局

通过媒体查询适配不同屏幕尺寸：

css制作表单

@media (max-width: 600px) {
  form {
    padding: 15px;
    margin: 10px;
  }

  input, button {
    padding: 8px;
  }
}

验证状态提示

使用CSS伪类为有效/无效输入添加视觉反馈：

input:valid {
  border-left: 4px solid #4CAF50;
}

input:invalid {
  border-left: 4px solid #f44336;
}

高级样式技巧

实现现代表单设计效果：

/* 浮动标签效果 */
.input-group {
  position: relative;
  margin-bottom: 25px;
}

.input-group label {
  position: absolute;
  top: 10px;
  left: 10px;
  transition: all 0.3s;
}

.input-group input:focus + label,
.input-group input:not(:placeholder-shown) + label {
  top: -20px;
  left: 0;
  font-size: 12px;
  color: #4CAF50;
}