制作简单表单css

表单基础结构

表单通常由<form>标签包裹，包含输入框、标签、按钮等元素。以下是一个基础HTML结构：

<form class="simple-form">
  <label for="name">姓名:</label>
  <input type="text" id="name" name="name" required>

  <label for="email">邮箱:</label>
  <input type="email" id="email" name="email" required>

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

基础样式设计

使用CSS为表单添加间距、边框和字体样式：

.simple-form {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}

.simple-form label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.simple-form input {
  width: 100%;
  padding: 8px;
  margin-bottom: 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.simple-form button {
  background-color: #4CAF50;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

交互效果增强

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

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

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

响应式调整

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

@media (max-width: 480px) {
  .simple-form {
    padding: 10px;
  }
  .simple-form input {
    padding: 6px;
  }
}

验证状态样式

为有效和无效输入添加视觉反馈：

.simple-form input:valid {
  border-color: #4CAF50;
}

.simple-form input:invalid {
  border-color: #f44336;
}