使用 HTML、CSS 和 JavaScript 创建时尚的深色联系表单

在本教程中，我们将介绍为基本联系表单元素设置样式的过程。我们将研究同时使表单美观且功能齐全的不同方法。

这是我们要构建的表单：

See the Pen Stylish Contact Form with HTML, CSS, and JS by Envato Tuts+ (@tutsplus) on CodePen.

1. 从页面标记开始

我们将从form包含标题和无序列表的元素开始。我们将使用 a.container设置表单的最大宽度并将其内容水平居中：

<form class="my-form">
  <div class="container">
    <h1>Get in touch!</h1>
    <ul>
      <li>...</li>
      <li>...</li>
      <li>...</li>
      <li>...</li>
      <li>...</li>
      <li>...</li>
    </ul>
  </div>
</form>

在列表中，我们将放置表单元素。

例如，第一个列表项将包含一个select具有四个选项的元素。默认情况下，第一个选项被选中，但被禁用：

<select>
  <option selected disabled>-- Please choose an option --</option>
  <option>Request Quote</option>
  <option>Send Resume</option>
  <option>Other</option>
</select>

在第二个列表项中，我们将放置两个必需的输入字段：

<div class="grid grid-2">
<input type="text" placeholder="Name" required>
<input type="text" placeholder="Surname" required>
</div>

第三个列表项包括一个必需的和一个可选的输入字段：

<div class="grid grid-2">
<input type="email" placeholder="Email" required>
<input type="tel" placeholder="Phone">
</div>

第四个列表项包含一个文本区域：

<textarea placeholder="Message"></textarea>

第五个列表项包含一个复选框及其标签：

<input type="checkbox" id="terms">
<label for="terms">...</label>

最后，第六个列表项包含一个div元素和两个按钮（类型 submit和reset）：

<div class="grid grid-3">
  <div class="required-msg">REQUIRED FIELDS</div>
  <button class="btn-grid" type="submit" disabled>
    <span class="back">
      <img src="IMG_SRC" alt="">
    </span>
    <span class="front">SUBMIT</span>
  </button>
  <button class="btn-grid" type="reset" disabled>
    <span class="back">
      <img src="IMG_SRC" alt="">
    </span>
    <span class="front">RESET</span>
  </button>
</div>

2. 定义一些基本样式

在仔细查看各个表单元素之前，让我们先定义一些 css 样式。其中包括一些自定义变量以提供我们的配色方案，以及一些重置规则：

:root {
  --white: #afafaf;
  --red: #e31b23;
  --bodyColor: #292a2b;
  --borderFormEls: hsl(0, 0%, 10%);
  --bgFormEls: hsl(0, 0%, 14%);
  --bgFormElsFocus: hsl(0, 7%, 20%);
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  outline: none;
}

a {
  color: inherit;
}

input,
select,
textarea,
button {
  font-family: inherit;
  font-size: 100%;
}

button,
label {
  cursor: pointer;
}

select {
  appearance: none;
}

select::-ms-expand {
  display: none;
}

select:-moz-focusring {
  color: transparent !important;
  text-shadow: 0 0 0 var(--white);
}

textarea {
  resize: none;
}

ul {
  list-style: none;
}

注意：为简单起见，我不会在教程中介绍所有CSS 规则。您可以通过单击演示项目的CSS选项卡来检查其余部分。

3. 构建表单布局

在小屏幕上，我们所有的表单元素都将被堆叠：

但是，在 600 像素及以上宽的视口上，表单布局会发生变化。进一步来说：

我们将第二个和第三个列表项的元素排列成两个等宽的列。
第六个列表项的元素将被排列成三列。

感谢 CSS Grid，我们可以轻松构建所需的多列布局。我们首先将我们的.my-form .grid容器声明为一个网格，然后我们在需要更改的网格项上定义列：

@media screen and (min-width: 600px) {
  .my-form .grid {
    display: grid;
    grid-gap: 1.5rem;
  }

  .my-form .grid-2 {
    grid-template-columns: 1fr 1fr;
  }

  .my-form .grid-3 {
    grid-template-columns: auto auto auto;
    align-items: center;
  }
}

所有这些规则都放置在媒体查询中，因此它们仅对 600 像素及以上宽的视口生效。

4. 样式化表单元素

整理好结构后，接下来我们为所有表单元素添加一些初步的审美风格：

/*CUSTOM VARIABLES HERE*/

.my-form select,
.my-form input,
.my-form textarea,
.my-form button {
  width: 100%;
  line-height: 1.5;
  padding: 15px 10px;
  border: 1px solid var(--borderFormEls);
  color: var(--white);
  background: var(--bgFormEls);
  transition: background-color 0.3s cubic-bezier(0.57, 0.21, 0.69, 1.25),
    transform 0.3s cubic-bezier(0.57, 0.21, 0.69, 1.25);
}

.my-form textarea {
  height: 170px;
}

.my-form ::placeholder {
  color: inherit;
  opacity: 1;
}

注意：另外，为了设置 textarea 的宽度和高度，我们可以分别使用它的 cols和rows属性。

添加“聚焦”样式

每次表单元素成为焦点时，我都希望它的背景颜色发生变化。此外，一些元素放大了一点，只是为了强调：

这是如何完成的：

/*CUSTOM VARIABLES HERE*/

.my-form select:focus,
.my-form input:focus,
.my-form textarea:focus,
.my-form button:focus {
background: var(--bgFormElsFocus);
}

.my-form select:focus,
.my-form input:focus,
.my-form textarea:focus {
transform: scale(1.02);
}

添加自定义图标

所有必需的元素都包含一个位于右上角的图标（星号）：

同样，select还包含一个位于右上角的自定义图标（箭头）：

我们通过应用 svg 图标作为背景图像来实现这一点：

.my-form *:required,
.my-form select {
  background-repeat: no-repeat;
  background-position: center right 12px;
  background-size: 15px 15px;
}

.my-form *:required {
  background-image: url(asterisk.svg);
}

.my-form select {
  background-image: url(down.svg);
}

设置按钮样式

如前所述，在我们的表单中，我们有两种类型的按钮：提交按钮和重置按钮。如果您重新访问表单标记，您会注意到这些按钮中的每一个都包含两个元素：.back元素和.front元素。

默认情况下，只有他们的 .front孩子出现：

但是当我们将鼠标悬停在一个按钮上时，或者当它处于焦点时，神奇的事情就会发生。具体来说，它的背景颜色发生了变化，.front孩子消失了，同时 .back孩子出现了滑入动画：

See the Pen Stylish Contact Form with HTML, CSS, and JS (buttons) by Envato Tuts+ (@tutsplus) on CodePen.

以下是导致该行为的样式：

/*CUSTOM VARIABLES HERE*/

.my-form .btn-grid {
  position: relative;
  overflow: hidden;
  transition: filter 0.2s;
}

.my-form button:enabled:hover,
.my-form button:focus {
  background: var(--bgFormElsFocus);
}

.my-form button > * {
  display: inline-block;
  width: 100%;
  transition: transform 0.4s ease-in-out;
}

.my-form button .back {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-110%, -50%);
}

.my-form button:enabled:hover .back,
.my-form button:focus .back {
  transform: translate(-50%, -50%);
}

.my-form button:enabled:hover .front,
.my-form button:focus .front {
  transform: translateX(110%);
}

5.创建自定义复选框

如果您再次查看第五个列表项中的标记，您会看到复选框的id 值与标签的值匹配 for。这在两个元素之间创建了关联，使我们能够构建自定义复选框。

作为第一步，我们在视觉上隐藏默认复选框：

.my-form input[type="checkbox"] { position: absolute; left: -9999px;}

然后我们利用标签::before和::after伪元素来生成我们自己的复选框。

所以，首先我们使用 ::before伪元素来配置它的未选中状态：

然后 ::after伪元素连同 :checked 伪类来实现其检查状态：

正如我们对其他表单元素所做的那样，我们在复选框处于焦点时添加了一些额外的样式。最后，明智的做法是确保用户可以通过键盘导航访问我们的表单。

检查以下相关样式：

/*CUSTOM VARIABLES HERE*/

.my-form input[type="checkbox"] + label {
  position: relative;
  display: inline-block;
  padding-left: 2rem;
  transition: background 0.3s cubic-bezier(0.57, 0.21, 0.69, 1.25);
}

.my-form input[type="checkbox"]:focus + label {
  background: var(--bgFormElsFocus);
}

.my-form input[type="checkbox"] + label::before,
.my-form input[type="checkbox"] + label::after {
  content: '';
  position: absolute;
}

.my-form input[type="checkbox"] + label::before {
  left: 0;
  top: 6px;
  width: 18px;
  height: 18px;
  border: 2px solid var(--white);
}

.my-form input[type="checkbox"]:checked + label::before {
  background: var(--red);
}

.my-form input[type="checkbox"]:checked + label::after {
  left: 7px;
  top: 7px;
  width: 6px;
  height: 14px;
  border-bottom: 2px solid var(--white);
  border-right: 2px solid var(--white);
  transform: rotate(45deg);
}

@media screen and (min-width: 541px) {
  .my-form input[type="checkbox"] + label::before {
    top: 50%;
    transform: translateY(-50%);
  }

  .my-form input[type="checkbox"]:checked + label::after {
    top: 3px;
  }
}

值得一提的是，我们还可以使用一些自定义图标来构建所需的复选框。

6. 切换按钮的状态

最初，表单按钮被禁用。这意味着我们不能点击它们或选择它们：

在我们的 CSS 中，我们添加了一些专门针对这些禁用元素的样式，让用户清楚地知道它们无法与之交互：

.my-form *:disabled {
cursor: default;
filter: blur(2px);
}

选中复选框后，按钮立即变为活动状态：

使用 HTML、CSS 和 JavaScript 创建时尚的深色联系表单第10张

处理此功能的 javascript 代码如下所示：

const checkbox = document.queryselector('.my-form input[type="checkbox"]');
const btns = document.querySelectorAll(".my-form button");

checkbox.addeventListener("change", function() {
  const checked = this.checked;
  for (const btn of btns) {
    checked ? (btn.disabled = false) : (btn.disabled = true);
  }
});