css制作表单页面

表单结构设计

使用HTML构建表单基础结构，包含<form>标签及常用输入元素。例如：

<form class="contact-form">
  <label for="name">姓名</label>
  <input type="text" id="name" placeholder="请输入姓名">

  <label for="email">邮箱</label>
  <input type="email" id="email" placeholder="example@domain.com">

  <label for="message">留言</label>
  <textarea id="message" rows="5"></textarea>

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

基础样式设置

通过CSS重置默认样式并设置基础布局：

.contact-form {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'Segoe UI', sans-serif;
}

.contact-form label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
}

交互状态优化

添加焦点和悬停效果提升用户体验：

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #4285f4;
  box-shadow: 0 0 5px rgba(66, 133, 244, 0.3);
  outline: none;
}

.contact-form button {
  background-color: #4285f4;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.contact-form button:hover {
  background-color: #3367d6;
}

响应式适配

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

@media (max-width: 480px) {
  .contact-form {
    padding: 15px;
  }

  .contact-form input,
  .contact-form textarea {
    padding: 8px;
  }
}

验证样式增强

为表单验证添加视觉反馈：

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

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

高级布局技巧

使用CSS Grid实现复杂表单布局：

.grid-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.full-width {
  grid-column: span 2;
}