转载说明：原创不易，未经授权，谢绝任何形式的转载

随着互联网技术的不断发展，前端布局在各种应用中变得越来越重要。一个好的前端布局能够提升用户的体验和页面的美观度，因此越来越多的设计师和前端开发者开始关注前端布局的设计。在本篇文章中，我们将分享3个漂亮的表单组件，包含了登录注册表单和上传表单，这些组件不仅外观美观，而且功能实用，可供参考和借鉴。

1、常见的邮箱密码登录及第三方登录

如下图所示，这个登录注册表单的场景十分常见，还支持第三方登录按钮的操作

以下是相关的代码实现

HTML部分

<form class="form_container">
   <!-- 包含了公司logo的div -->
  <div class="logo_container"></div>
  <!-- 包含了标题和副标题的div -->
  <div class="title_container">
    <p class="title">Login to your Account</p>
    <span class="subtitle">Get started with our app, just create an account and enjoy the experience.</span>
  </div>
  <br>
  <div class="input_container">
    <!-- 包含了用户输入email的标签、图标和输入框的div -->
    <label class="input_label" for="email_field">Email</label>
    <svg fill="none" viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg" class="icon">
      <path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="#141B34" d="M7 8.5L9.94202 10.2394C11.6572 11.2535 12.3428 11.2535 14.058 10.2394L17 8.5"></path>
      <path stroke-linejoin="round" stroke-width="1.5" stroke="#141B34" d="M2.01577 13.4756C2.08114 16.5412 2.11383 18.0739 3.24496 19.2094C4.37608 20.3448 5.95033 20.3843 9.09883 20.4634C11.0393 20.5122 12.9607 20.5122 14.9012 20.4634C18.0497 20.3843 19.6239 20.3448 20.7551 19.2094C21.8862 18.0739 21.9189 16.5412 21.9842 13.4756C22.0053 12.4899 22.0053 11.5101 21.9842 10.5244C21.9189 7.45886 21.8862 5.92609 20.7551 4.79066C19.6239 3.65523 18.0497 3.61568 14.9012 3.53657C12.9607 3.48781 11.0393 3.48781 9.09882 3.53656C5.95033 3.61566 4.37608 3.65521 3.24495 4.79065C2.11382 5.92608 2.08114 7.45885 2.01576 10.5244C1.99474 11.5101 1.99475 12.4899 2.01577 13.4756Z"></path>
    </svg>
    <input placeholder="name@mail.com" title="Inpit title" name="input-name" type="text" class="input_field" id="email_field">
  </div>
<!-- 包含了用户输入密码的标签、图标和输入框的div -->
  <div class="input_container">
    <label class="input_label" for="password_field">Password</label>
    <svg fill="none" viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg" class="icon">
      <path stroke-linecap="round" stroke-width="1.5" stroke="#141B34" d="M18 11.0041C17.4166 9.91704 16.273 9.15775 14.9519 9.0993C13.477 9.03404 11.9788 9 10.329 9C8.67911 9 7.18091 9.03404 5.70604 9.0993C3.95328 9.17685 2.51295 10.4881 2.27882 12.1618C2.12602 13.2541 2 14.3734 2 15.5134C2 16.6534 2.12602 17.7727 2.27882 18.865C2.51295 20.5387 3.95328 21.8499 5.70604 21.9275C6.42013 21.9591 7.26041 21.9834 8 22"></path>
      <path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="#141B34" d="M6 9V6.5C6 4.01472 8.01472 2 10.5 2C12.9853 2 15 4.01472 15 6.5V9"></path>
      <path fill="#141B34" d="M21.2046 15.1045L20.6242 15.6956V15.6956L21.2046 15.1045ZM21.4196 16.4767C21.7461 16.7972 22.2706 16.7924 22.5911 16.466C22.9116 16.1395 22.9068 15.615 22.5804 15.2945L21.4196 16.4767ZM18.0228 15.1045L17.4424 14.5134V14.5134L18.0228 15.1045ZM18.2379 18.0387C18.5643 18.3593 19.0888 18.3545 19.4094 18.028C19.7299 17.7016 19.7251 17.1771 19.3987 16.8565L18.2379 18.0387ZM14.2603 20.7619C13.7039 21.3082 12.7957 21.3082 12.2394 20.7619L11.0786 21.9441C12.2794 23.1232 14.2202 23.1232 15.4211 21.9441L14.2603 20.7619ZM12.2394 20.7619C11.6914 20.2239 11.6914 19.358 12.2394 18.82L11.0786 17.6378C9.86927 18.8252 9.86927 20.7567 11.0786 21.9441L12.2394 20.7619ZM12.2394 18.82C12.7957 18.2737 13.7039 18.2737 14.2603 18.82L15.4211 17.6378C14.2202 16.4587 12.2794 16.4587 11.0786 17.6378L12.2394 18.82ZM14.2603 18.82C14.8082 19.358 14.8082 20.2239 14.2603 20.7619L15.4211 21.9441C16.6304 20.7567 16.6304 18.8252 15.4211 17.6378L14.2603 18.82ZM20.6242 15.6956L21.4196 16.4767L22.5804 15.2945L21.785 14.5134L20.6242 15.6956ZM15.4211 18.82L17.8078 16.4767L16.647 15.2944L14.2603 17.6377L15.4211 18.82ZM17.8078 16.4767L18.6032 15.6956L17.4424 14.5134L16.647 15.2945L17.8078 16.4767ZM16.647 16.4767L18.2379 18.0387L19.3987 16.8565L17.8078 15.2945L16.647 16.4767ZM21.785 14.5134C21.4266 14.1616 21.0998 13.8383 20.7993 13.6131C20.4791 13.3732 20.096 13.1716 19.6137 13.1716V14.8284C19.6145 14.8284 19.619 14.8273 19.6395 14.8357C19.6663 14.8466 19.7183 14.8735 19.806 14.9391C19.9969 15.0822 20.2326 15.3112 20.6242 15.6956L21.785 14.5134ZM18.6032 15.6956C18.9948 15.3112 19.2305 15.0822 19.4215 14.9391C19.5091 14.8735 19.5611 14.8466 19.5879 14.8357C19.6084 14.8273 19.6129 14.8284 19.6137 14.8284V13.1716C19.1314 13.1716 18.7483 13.3732 18.4281 13.6131C18.1276 13.8383 17.8008 14.1616 17.4424 14.5134L18.6032 15.6956Z"></path>
    </svg>
    <input placeholder="Password" title="Inpit title" name="input-name" type="password" class="input_field" id="password_field">
  </div>
  <button title="Sign In" type="submit" class="sign-in_btn">
    <span>Sign In</span>
  </button>

  <div class="separator">
    <hr class="line">
    <span>Or</span>
    <hr class="line">
  </div>
  <button title="Sign In" type="submit" class="sign-in_ggl">
    <svg height="18" width="18" viewBox="0 0 32 32" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <path d="M44.5 20H24v8.5h11.8C34.7 33.9 30.1 37 24 37c-7.2 0-13-5.8-13-13s5.8-13 13-13c3.1 0 5.9 1.1 8.1 2.9l6.4-6.4C34.6 4.1 29.6 2 24 2 11.8 2 2 11.8 2 24s9.8 22 22 22c11 0 21-8 21-22 0-1.3-.2-2.7-.5-4z" id="A"></path>
      </defs>
      <clipPath id="B">
        
      </clipPath>
      <g transform="matrix(.727273 0 0 .727273 -.954545 -1.45455)">
        <path fill="#fbbc05" clip-path="url(#B)" d="M0 37V11l17 13z"></path>
        <path fill="#ea4335" clip-path="url(#B)" d="M0 11l17 13 7-6.1L48 14V0H0z"></path>
        <path fill="#34a853" clip-path="url(#B)" d="M0 37l30-23 7.9 1L48 0v48H0z"></path>
        <path fill="#4285f4" clip-path="url(#B)" d="M48 48L17 24l-4-3 35-10z"></path>
      </g>
    </svg>
    <span>Sign In with Google</span>
  </button>
  <button title="Sign In" type="submit" class="sign-in_apl">
    <svg preserveAspectRatio="xMidYMid" version="1.1" viewBox="0 0 256 315" height="20px" width="16px" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
      <g>
        <path fill="#ffffff" d="M213.803394,167.030943 C214.2452,214.609646 255.542482,230.442639 256,230.644727 C255.650812,231.761357 249.401383,253.208293 234.24263,275.361446 C221.138555,294.513969 207.538253,313.596333 186.113759,313.991545 C165.062051,314.379442 158.292752,301.507828 134.22469,301.507828 C110.163898,301.507828 102.642899,313.596301 82.7151126,314.379442 C62.0350407,315.16201 46.2873831,293.668525 33.0744079,274.586162 C6.07529317,235.552544 -14.5576169,164.286328 13.147166,116.18047 C26.9103111,92.2909053 51.5060917,77.1630356 78.2026125,76.7751096 C98.5099145,76.3877456 117.677594,90.4371851 130.091705,90.4371851 C142.497945,90.4371851 165.790755,73.5415029 190.277627,76.0228474 C200.528668,76.4495055 229.303509,80.1636878 247.780625,107.209389 C246.291825,108.132333 213.44635,127.253405 213.803394,167.030988 M174.239142,50.1987033 C185.218331,36.9088319 192.607958,18.4081019 190.591988,0 C174.766312,0.636050225 155.629514,10.5457909 144.278109,23.8283506 C134.10507,35.5906758 125.195775,54.4170275 127.599657,72.4607932 C145.239231,73.8255433 163.259413,63.4970262 174.239142,50.1987249"></path>
      </g>
    </svg>
    <span>Sign In with Apple</span>
  </button>
  <p class="note">Terms of use & Conditions</p>
</form>

CSS部分

/* 定义一个表单容器 */
.form_container {
  width: fit-content; /* 宽度自适应内容 */
  height: fit-content; /* 高度自适应内容 */
  display: flex; /* 使用flex布局 */
  flex-direction: column; /* 垂直布局 */
  align-items: center; /* 水平居中 */
  justify-content: center; /* 垂直居中 */
  gap: 15px; /* 定义子元素之间的间距 */
  padding: 50px 40px 20px 40px; /* 内边距 */
  background-color: #ffffff; /* 背景颜色 */
  box-shadow: 0px 106px 42px rgba(0, 0, 0, 0.01),
    0px 59px 36px rgba(0, 0, 0, 0.05), 0px 26px 26px rgba(0, 0, 0, 0.09),
    0px 7px 15px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
  border-radius: 11px; /* 添加圆角 */
  font-family: "Inter", sans-serif; /* 使用字体 */
}

/* 定义一个logo容器 */
.logo_container {
  box-sizing: border-box; /* 设置盒模型 */
  width: 80px; /* 宽度 */
  height: 80px; /* 高度 */
  background: linear-gradient(
      180deg,
      rgba(248, 248, 248, 0) 50%, 
      #F8F8F888 100%); /* 渐变背景 */
  border: 1px solid #F7F7F8; /* 添加边框 */
  filter: drop-shadow(0px 0.5px 0.5px #EFEFEF) drop-shadow(0px 1px 0.5px rgba(239, 239, 239, 0.5)); /* 添加滤镜效果 */
  border-radius: 11px; /* 添加圆角 */
}

/* 定义一个标题容器 */
.title_container {
  display: flex; /* 使用flex布局 */
  flex-direction: column; /* 垂直布局 */
  align-items: center; /* 水平居中 */
  justify-content: center; /* 垂直居中 */
  gap: 10px; /* 定义子元素之间的间距 */
}

/* 定义标题 */
.title {
  margin: 0; /* 外边距 */
  font-size: 1.25rem; /* 字体大小 */
  font-weight: 700; /* 字体粗细 */
  color: #212121; /* 字体颜色 */
}

/* 子标题样式 */
.subtitle {
  font-size: 0.725rem;
  max-width: 80%;
  text-align: center;
  line-height: 1.1rem;
  color: #8B8E98; /* 文字颜色 */
}

/* 输入框容器样式 */
.input_container {
  width: 100%;
  height: fit-content;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px; /* 子元素之间的间隔 */
}

/* 输入框图标样式 */
.icon {
  width: 20px;
  position: absolute;
  z-index: 99;
  left: 12px;
  bottom: 9px;
}

/* 输入框标签样式 */
.input_label {
  font-size: 0.75rem;
  color: #8B8E98; /* 文字颜色 */
  font-weight: 600;
}

/* 输入框样式 */
.input_field {
  width: auto;
  height: 40px;
  padding: 0 0 0 40px;
  border-radius: 7px;
  outline: none;
  border: 1px solid #e5e5e5; /* 边框颜色 */
  filter: drop-shadow(0px 1px 0px #efefef) /* 阴影 */
          drop-shadow(0px 1px 0.5px rgba(239, 239, 239, 0.5));
  transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1); /* 过渡效果 */
}

/* 输入框获取焦点时的样式 */
.input_field:focus {
  border: 1px solid transparent;
  box-shadow: 0px 0px 0px 2px #242424; /* 阴影 */
  background-color: transparent;
}

/* 登录按钮样式 */
.sign-in_btn {
  width: 100%;
  height: 40px;
  border: 0;
  background: #115DFC; /* 背景颜色 */
  border-radius: 7px;
  outline: none;
  color: #ffffff; /* 文字颜色 */
  cursor: pointer;
}

/* Google登录按钮样式 */
.sign-in_ggl {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #ffffff; /* 背景颜色 */
  border-radius: 7px;
  outline: none;
  color: #242424; /* 文字颜色 */
  border: 1px solid #e5e5e5; /* 边框颜色 */
  filter: drop-shadow(0px 1px 0px #efefef) /* 阴影 */
          drop-shadow(0px 1px 0.5px rgba(239, 239, 239, 0.5));
  cursor: pointer;
}
/* Apple登录按钮样式 */
.sign-in_apl {
  width: 100%; /* 宽度为100% */
  height: 40px; /* 高度为40像素 */
  display: flex; /* 使用flex布局 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  gap: 10px; /* 子元素间隔为10像素 */
  background: #212121; /* 背景色为#212121 */
  border-radius: 7px; /* 圆角半径为7像素 */
  outline: none; /* 去掉默认轮廓线 */
  color: #ffffff; /* 文字颜色为白色 */
  border: 1px solid #e5e5e5; /* 边框为1像素实线，颜色为#e5e5e5 */
  filter: drop-shadow(0px 1px 0px #efefef) /* 添加一个下方的阴影 */
    drop-shadow(0px 1px 0.5px rgba(239, 239, 239, 0.5));
  cursor: pointer; /* 鼠标悬停时显示指针 */
}

.separator {
  width: 100%; /* 宽度为100% */
  display: flex; /* 使用flex布局 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  gap: 30px; /* 子元素间隔为30像素 */
  color: #8B8E98; /* 文字颜色为#8B8E98 */
}

.separator .line {
  display: block; /* 显示为块级元素 */
  width: 100%; /* 宽度为100% */
  height: 1px; /* 高度为1像素 */
  border: 0; /* 去掉边框 */
  background-color: #e8e8e8; /* 背景色为#e8e8e8 */
}

.note {
  font-size: 0.75rem; /* 字体大小为0.75rem */
  color: #8B8E98; /* 文字颜色为#8B8E98 */
  text-decoration: underline; /* 添加下划线 */
}

2、极简的注册表单

如下图所示，一个极简而又美观的注册表单，在我的业务中也很常见，如下图所示：

以下是相关的代码实现

HTML部分

<form class="form">  <!-- 表单，class为form -->
    <span class="signup">Sign Up</span>  <!-- 一个span元素，class为signup，用于显示“Sign Up” -->
    <input type="email" placeholder="Email address" class="form--input">  <!-- 邮箱输入框，class为form--input -->
    <input type="password" placeholder="Password" class="form--input">  <!-- 密码输入框，class为form--input -->
    <input type="password" placeholder="Confirm password" class="form--input">  <!-- 确认密码输入框，class为form--input -->
    
    <div class="form--marketing">  <!-- 用于显示“newsletter”的div元素，class为form--marketing -->
        <input id="okayToEmail" type="checkbox">  <!-- 一个checkbox元素，id为okayToEmail -->
        <label for="okayToEmail" class="checkbox">  <!-- 与checkbox关联的label元素，用于显示“Join the newsletter”，class为checkbox -->
          I want to join the newsletter
        </label>
    </div>
    <button class="form--submit">  <!-- 提交按钮，class为form--submit -->
        Sign up
    </button>
</form>

CSS部分

.form {
  /* 设置表单的背景色 */
  background-color: white;
  /* 设置表单内边距 */
  padding: 3.125em;
  /* 设置表单的圆角边框 */
  border-radius: 10px;
  /* 设置表单的布局方向为垂直 */
  display: flex;
  flex-direction: column;
  /* 设置子元素在交叉轴上居中对齐 */
  align-items: center;
  /* 设置表单的阴影效果 */
  box-shadow: 5px 5px 15px -1px rgba(0,0,0,0.75);
}

.signup {
  /* 设置注册字样的颜色 */
  color: rgb(77, 75, 75);
  /* 转换为大写字母 */
  text-transform: uppercase;
  /* 字母间距 */
  letter-spacing: 2px;
  /* 块级元素显示 */
  display: block;
  /* 设置字体加粗 */
  font-weight: bold;
  /* 设置字体大小 */
  font-size: x-large;
  /* 底部外边距 */
  margin-bottom: 0.5em;
}

.form--input {
  /* 设置输入框的宽度 */
  width: 100%;
  /* 设置底部外边距 */
  margin-bottom: 1.25em;
  /* 设置输入框的高度 */
  height: 40px;
  /* 设置输入框的圆角边框 */
  border-radius: 5px;
  /* 设置输入框的边框 */
  border: 1px solid gray;
  /* 设置输入框的内边距 */
  padding: 0.8em;
  /* 设置字体 */
  font-family: 'Inter', sans-serif;
  /* 去除输入框的轮廓线 */
  outline: none;
}

.form--input:focus {
  /* 获得焦点时设置边框颜色 */
  border: 1px solid #639;
  /* 去除输入框的轮廓线 */
  outline: none;
}

.form--marketing {
  /* 设置营销复选框的布局方向为水平 */
  display: flex;
  /* 设置底部外边距 */
  margin-bottom: 1.25em;
  /* 设置子元素在交叉轴上居中对齐 */
  align-items: center;
}

.form--marketing > input {
  /* 设置营销复选框与文本之间的右外边距 */
  margin-right: 0.625em;
}

.form--marketing > label {
  /* 设置营销文本的颜色 */
  color: grey;
}

.checkbox, input[type="checkbox"] {
  /* 设置复选框的颜色 */
  accent-color: #639;
}

/* 定义提交按钮的样式 */
.form--submit {
  width: 50%; /* 宽度为父元素50% */
  padding: 0.625em; /* 内边距 */
  border-radius: 5px; /* 圆角 */
  color: white; /* 文字颜色为白色 */
  background-color: #639; /* 背景颜色为#639 */
  border: 1px dashed #639; /* 边框为虚线，颜色为#639 */
  cursor: pointer; /* 光标样式为手型 */
}

/* 当鼠标悬停在提交按钮上时，更改样式 */
.form--submit:hover {
  color: #639; /* 文字颜色为#639 */
  background-color: white; /* 背景颜色为白色 */
  border: 1px dashed #639; /* 边框为虚线，颜色为#639 */
  cursor: pointer; /* 光标样式为手型 */
  transition: 0.5s; /* 动画效果持续0.5秒 */
}

上传表单组件

上传的需求场景也十分常见，如下图所示，适合在弹层的场景下进行使用

以下是相关的代码实现

HTML部分

<form class="modal">
  <!-- 关闭模态框的按钮 -->
  <span class="close">X</span>
  <div class="content">
    <!-- 标题 -->
    <span class="title">Upload a File</span>
    <!-- 提示信息 -->
    <p class="message">Select a file to upload from your computer or device.</p>
    <div class="actions">
      <!-- 上传文件的按钮 -->
      <label for="file" class="button upload-btn">Choose File
        <input hidden="" type="file" id="file">
      </label>
    </div>
    <div class="result">
      <!-- 显示已上传文件的区域 -->
      <div class="file-uploaded"><p>profile_pic.png</p></div>
    </div>
  </div>
</form>

CSS部分

.modal {
  background-color: rgb(255, 255, 255); /* 模态框背景颜色 */
  border-radius: 1em; /* 模态框圆角半径 */
  box-shadow: 0px 100px 48px -60px rgba(0,0,0,0.1); /* 模态框阴影 */
  color: rgb(15, 14, 14); /* 模态框字体颜色 */
  max-width: 330px; /* 模态框最大宽度 */
  overflow: hidden; /* 隐藏溢出的内容 */
  position: relative; /* 相对定位 */
  transition: background-color 0.3s, color 0.3s; /* 背景色和字体颜色过渡效果 */
}

.content > *, .modal > * {
  padding: 0.875em; /* 内容元素的内边距 */
}

.title {
  font-size: 1.25em; /* 标题字体大小 */
  font-weight: 600; /* 标题字体加粗 */
  line-height: 1.2; /* 标题行高 */
  display: flex; /* 使用弹性布局 */
  justify-content: center; /* 水平居中 */
}

.message {
  line-height: 1.2; /* 内容行高 */
  text-align: center; /* 内容文字居中 */
}

.actions {
  display: flex; /* 使用弹性布局 */
  align-items: center; /* 垂直居中 */
  flex-wrap: wrap; /* 自动换行 */
}

.upload-btn {
  background-color: transparent; /* 背景透明 */
  border: 0.125rem dashed hsla(223,10%,50%,0.4); /* 虚线边框 */
  flex: 1; /* 占满剩余空间 */
  padding: 0.375rem 2rem; /* 按钮内边距 */
}

.upload-btn:hover {
  background-color: hsla(223,10%,60%,0.2); /* 鼠标悬停时的背景色 */
}

.close {
  display: flex; /* 使用弹性布局 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  background-color: rgb(226, 94, 54); /* 关闭按钮背景色 */
  height: 30px; /* 高度 */
  width: 30px; /* 宽度 */
  border-radius: 50%; /* 圆形边框 */
  position: absolute; /* 绝对定位 */
  right: 10px; /* 距右侧的距离 */
  top: 10px; /* 距顶部的距离 */
  color: #fff; /* 字体颜色 */
  font-weight: bold; /* 字体加粗 */
  cursor: pointer; /* 鼠标悬停时的指针样式 */
}

.result {
  margin-top: 4px;   /* 顶部外边距 */
  background-color: rgba(0, 140, 255, 0.062);  /* 背景颜色 */
  display: flex;   /* 显示为弹性盒子 */
  align-items: center;  /* 在交叉轴上居中对齐 */
  position: relative;   /* 定位上下文 */
  border-radius: 1em;  /* 圆角半径 */
}

.file-uploaded {
  font-weight: 300;   /* 字体粗细 */
}

.file-uploaded::before {
  position: absolute;   /* 绝对定位 */
  content: "X";   /* 伪元素内容 */
  display: flex;   /* 显示为弹性盒子 */
  align-items: center;   /* 在交叉轴上居中对齐 */
  justify-content: center;   /* 在主轴上居中对齐 */
  background-color: rgba(26, 7, 1, 0.212);  /* 背景颜色 */
  height: 30px;   /* 高度 */
  width: 30px;    /* 宽度 */
  border-radius: 50%;   /* 圆形 */
  right: 10px;   /* 右侧定位 */
  top: 10px;   /* 顶部定位 */
  color: rgb(255, 255, 255);   /* 字体颜色 */
  font-weight: bold;   /* 字体粗细 */
  cursor: pointer;   /* 鼠标悬停时的光标 */
}

.file-uploaded:hover::before {
  background-color: rgba(233, 40, 6, 0.664);  /* 鼠标悬停时的背景颜色 */
}

结束

以上介绍的3个表单组件，通过精心设计的布局和配色，不仅可以提供优秀的用户体验，还可以为网站增添一份视觉上的美感。当然，这只是冰山一角，还有许多前端布局的技巧和方法等待我们去探索。希望本文能够给你带来一些启示和帮助，让你更好地应对前端布局的挑战。

今天的分享就到这里，感谢你的阅读，希望能够帮助到你，文章创作不易，如果你喜欢我的分享，别忘了点赞转发，让更多有需要的人看到，最后别忘记关注「前端达人」，你的支持将是我分享最大的动力，后续我会持续输出更多内容，敬请期待。