当前位置:首页 > CSS

css 表单制作

2026-02-27 06:56:16CSS

基础表单结构

使用 <form> 标签包裹表单元素,搭配 <label><input> 实现基础结构。

<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 调整间距、边框和颜色,提升表单视觉效果。

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

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

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

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

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

响应式设计

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

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

验证状态样式

通过 :valid:invalid 伪类标记输入合法性。

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

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

高级交互效果

添加过渡动画和焦点样式,增强用户体验。

input {
  transition: border-color 0.3s;
}

input:focus {
  border-color: #2196F3;
  outline: none;
  box-shadow: 0 0 5px rgba(33, 150, 243, 0.5);
}

css 表单制作

标签: 表单css
分享给朋友:

相关文章

css制作三角形

css制作三角形

使用 border 属性创建三角形 通过设置元素的 border 属性可以实现三角形效果。原理是利用边框的交界处形成的斜边。 .triangle { width: 0; height: 0…

网页制作 css

网页制作 css

CSS 基础语法 CSS(层叠样式表)用于控制网页的样式和布局。基本语法由选择器和声明块组成: 选择器 { 属性: 值; } 例如设置段落文字颜色为红色: p { color: red;…

怎么制作css

怎么制作css

创建CSS文件 新建一个文本文件,将文件扩展名改为.css。例如styles.css。确保文件名简洁且能反映其用途。 编写CSS基础结构 CSS由选择器和声明块组成。选择器用于指定要样式化的HTM…

用css制作表格

用css制作表格

使用CSS制作表格 CSS可以用来样式化HTML表格,使其更具视觉吸引力和功能性。以下是几种常见的方法: 基础表格样式 通过CSS可以调整表格的边框、间距和颜色: <table>…

css 制作字体

css 制作字体

使用CSS自定义字体 在CSS中,可以通过@font-face规则引入自定义字体,并使用font-family属性应用这些字体。 @font-face { font-family: 'MyCu…

css制作相册

css制作相册

使用CSS Grid布局制作相册 CSS Grid布局非常适合创建响应式相册,能够灵活调整行列和间距。 .photo-gallery { display: grid; grid-templa…