如何创建类似于Google登录表单的表单? [英] How to create a form similar to Google's sign-in form?

问题描述

目前，我正在一个网站上工作，该网站正在制作一个受Google的材料设计登录表单启发的联系表单.

Currently I am working on a site in which I am making a contact form inspired by Google's material design sign-in form.

我想要的效果就像单击输入字段时一样，该值(它是一个标签)应更改其位置，大小和颜色.它也已经成功实现，但是效果仅在具有"required"属性的输入字段中发生.

The effect that I want is like when I click on the input field, the value (which is a label) should change it's position, size and color. It has been successfully implemented too but the effect is only taking place in the input fields with "required" attribute.

在默认输入字段中无法获得相同的效果.

The same effect cannot be achieved in the default input fields.

.civildaily-form {
  display: block;
}

.civildaily-form .form-group {
  position: relative;
  margin-bottom: 2rem;
}

.civildaily-form .form-group input.form-control,
.civildaily-form .form-group textarea.form-control {
  font-size: 14px;
  border: none;
  border-bottom: 1px solid #ced4da;
  outline: none;
  background: transparent;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
  border-radius: 0;
  padding: 10px 0;
  line-height: normal;
}

.civildaily-form .form-group input[type='text'].form-control:focus,
.civildaily-form .form-group input[type='email'].form-control:focus,
.civildaily-form .form-group textarea.form-control:focus {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
}

.civildaily-form label {
  font-family: "Raleway-Bold", Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #282828;
  position: absolute;
  top: 0;
  padding: 10px 0;
  pointer-events: none;
  -webkit-transition: .5s;
  -moz-transition: .5s;
  -ms-transition: .5s;
  -o-transition: .5s;
  transition: .5s;
}

.civildaily-form .form-group input[type='text'].form-control:focus~label,
.civildaily-form .form-group input[type='email'].form-control:focus~label,
.civildaily-form .form-group input[type='text'].form-control:valid~label,
.civildaily-form .form-group input[type='email'].form-control:valid~label,
.civildaily-form .form-group textarea.form-control:focus~label,
.civildaily-form .form-group textarea.form-control:valid~label {
  top: -20px;
  font-size: 12px;
  color: #004880;
}

<form class="civildaily-form">
  <div class="form-group">
    <input type="text" class="form-control" required>
    <label for="Name">Name</label>
  </div>

  <div class="form-group">
    <input type="text" class="form-control" required>
    <label for="Email">Email</label>
  </div>

  <div class="form-group">
    <input type="text" class="form-control">
    <label for="Phone">Phone</label>
  </div>

  <div class="form-group">
    <input type="text" class="form-control">
    <label for="Company Name">Company Name</label>
  </div>
</form>

这是

推荐答案

看起来您只需要在.civildaily-form label的css中添加left: 0;并在:valid伪类的css选择器>元素.

Looks like you just need to add left: 0; to your css for .civildaily-form label and remove your conflicting css selectors for :valid pseudo class on your input elements.

您无法可靠地仅使用css在所有主要浏览器上检测input是否为空(您使用的:valid伪类仅适用于required字段，也可以对:placeholder-shown伪类，但对浏览器的支持受到限制). JavaScript是检测input是否为空以应用适当的标签定位样式(将.filled类添加到css以使用javascript的更可靠的方法，但是您可以根据需要命名).

You can't reliably detect whether the input is empty with css only across all major browsers (the :valid pseudo-class you are using will only work for required fields, you could also use a hack with the :placeholder-shown pseudo-class but browser support is limited). JavaScript is the more reliable way to detect whether or not the input is empty to apply the appropriate label positioning styles (added a .filled class to the css to work with the javascript, but you could name it anything you want).

下面的工作片段:

const fields = document.querySelectorAll('.form-control');

for (let field of fields) {
  field.addEventListener('blur', (event) => {
    let sel = event.target;
    if (sel.value) {
      sel.classList.add('filled');
    } else {
      sel.classList.remove('filled');
    }  
  });
}

.civildaily-form {
  display: block;
}

.civildaily-form .form-group {
  position: relative;
  margin-bottom: 2rem;
}

.civildaily-form .form-group input.form-control,
.civildaily-form .form-group textarea.form-control {
  font-size: 14px;
  border: none;
  border-bottom: 1px solid #ced4da;
  outline: none;
  background: transparent;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
  border-radius: 0;
  padding: 10px 0;
  line-height: normal;
}

.civildaily-form .form-group input[type='text'].form-control:focus,
.civildaily-form .form-group input[type='email'].form-control:focus,
.civildaily-form .form-group textarea.form-control:focus {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
}

.civildaily-form label {
  font-family: "Raleway-Bold", Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #282828;
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px 0;
  pointer-events: none;
  -webkit-transition: .5s;
  -moz-transition: .5s;
  -ms-transition: .5s;
  -o-transition: .5s;
  transition: .5s;
}

.civildaily-form .form-group input[type='text'].form-control:focus~label,
.civildaily-form .form-group input[type='email'].form-control:focus~label,
.civildaily-form .form-group textarea.form-control:focus~label,
.civildaily-form .form-group input[type='text'].filled~label,
.civildaily-form .form-group input[type='email'].filled~label,
.civildaily-form .form-group textarea.filled:focus~label{
  top: -20px;
  font-size: 12px;
  color: #004880;
}

<form class="civildaily-form">

  <div class="form-group">
    <input class="form-control" id="name" type="text" placeholder="" required>
    <label for="name">Name</label>
  </div>

  <div class="form-group">
    <input class="form-control" id="email" type="email" required>
    <label for="email">Email</label>
  </div>

  <div class="form-group">
    <input class="form-control" id="phone" type="text">
    <label for="phone">Phone</label>
  </div>

  <div class="form-group">
    <input class="form-control" id="company" type="text">
    <label for="company">Company Name</label>
  </div>
  
</form>

这篇关于如何创建类似于Google登录表单的表单?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！