当前位置：首页 > CSS

css表单制作简单

2026-03-12 13:27:23CSS

基础表单结构

使用HTML创建表单元素，<form>标签包裹输入字段，<input>定义文本框、密码框等，<label>关联说明文字。

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

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

  <input type="submit" value="提交">  
</form>

样式美化

通过CSS调整表单外观，如边框、间距、背景色等。

form {  
  width: 300px;  
  margin: 20px auto;  
  padding: 20px;  
  border: 1px solid #ddd;  
  border-radius: 5px;  
}  

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

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

input[type="submit"] {  
  background-color: #4CAF50;  
  color: white;  
  padding: 10px 15px;  
  border: none;  
  border-radius: 4px;  
  cursor: pointer;  
}  

input[type="submit"]:hover {  
  background-color: #45a049;  
}

响应式设计

使用媒体查询适配不同屏幕尺寸，确保移动端友好。

@media (max-width: 600px) {  
  form {  
    width: 90%;  
  }  
}

交互反馈

添加焦点样式和验证提示，提升用户体验。

input:focus {  
  border-color: #66afe9;  
  outline: none;  
  box-shadow: 0 0 5px rgba(102, 175, 233, 0.5);  
}  

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

完整示例

结合HTML与CSS的完整代码：

css表单制作简单

<!DOCTYPE html>  
<html>  
<head>  
  <style>  
    form {  
      width: 300px;  
      margin: 20px auto;  
      padding: 20px;  
      border: 1px solid #ddd;  
      border-radius: 5px;  
    }  
    /* 其他CSS样式同上 */  
  </style>  
</head>  
<body>  
  <form>  
    <!-- 表单内容同上 -->  
  </form>  
</body>  
</html>