当前位置：首页 > CSS

css表单制作

2026-03-31 20:32:50CSS

表单基础结构

使用HTML创建表单元素，包含<form>标签及各类输入字段（如<input>、<textarea>、<select>）。

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

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

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

样式布局调整

通过CSS控制表单的宽度、间距和对齐方式，常用flexbox或grid布局。

css表单制作

form {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

输入字段样式

自定义输入框、标签和按钮的外观，包括边框、背景色和悬停效果。

input, textarea, select {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
}

input:focus {
  outline: none;
  border-color: #007bff;
}

button {
  padding: 12px;
  background-color: #007bff;
  color: white;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

响应式设计

通过媒体查询适配不同屏幕尺寸，调整表单元素的宽度和布局。

css表单制作

@media (max-width: 600px) {
  form {
    padding: 10px;
    gap: 10px;
  }
  input, button {
    width: 100%;
  }
}

验证与反馈样式

为表单验证状态添加视觉提示，如错误提示和成功状态。

input:invalid {
  border-color: #ff3860;
}

.error-message {
  color: #ff3860;
  font-size: 14px;
  margin-top: 5px;
}

.success-message {
  color: #23d160;
  font-size: 16px;
  text-align: center;
}

高级交互效果

添加过渡动画或加载状态，提升用户体验。

button {
  transition: background-color 0.3s ease;
}

.loading {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  border-top-color: white;
  animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}