使用html、css和javascript创建一个时尚的深色联系人表单

下面是我们将要创建的表单:

注意:这个联系人表单非常适合任何暗模式的用户界面!了解更多关于如何使用CSS在黑暗和光明模式之间切换:

1、从页面标记开始

我们将从一个包含标题和无序列表的表单元素开始。我们将使用.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:

<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网格，我们可以轻松地构建所需的多列布局。我们首先将.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;
  }
}

所有这些规则都放在一个媒体查询中，因此它们只对宽600px以上的viewport有效。

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;
}

注意:另外，为了设置文本区域的宽度和高度，我们可以分别使用它的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子项将显示为幻灯片动画：

以下是导致这种行为的风格:

/*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伪类来实现它的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);
}

一旦复选框被选中，按钮就会被激活:

处理此功能的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);
  }
});

就是这样的人!这是我们建造的!

以上就是使用html、css和javascript创建一个时尚的深色联系人表单的详细内容，更多请关注0133技术站其它相关文章！