AtoZ CSS屏幕录像：必需的伪类

Loading the player…

正在加载播放器…

This screencast is a part of our AtoZ CSS Series. You can find other entries to the series here.

该截屏视频是我们的AtoZ CSS系列的一部分。 您可以在此处找到该系列的其他条目。

成绩单 (Transcript)

:required is a state based pseudo class that can be useful when styling forms.

:required是一个基于状态的伪类，在样式化表单时很有用。

Combined with :valid and :invalid we can have a lot of control over providing visual feedback to users without having to write lots of JavaScript.

与:valid和:invalid结合使用，我们可以在无需编写大量JavaScript的情况下对向用户提供视觉反馈进行大量控制。

In this episode we’ll learn:

在本集中，我们将学习：

• How to use HTML5 form validation
  如何使用HTML5表单验证

• Using :required and other state-based pseudo classes

  使用:required和其他基于状态的伪类

• A creative technique for displaying validation messages to users
  一种向用户显示验证消息的创新技术

HTML5验证 (HTML5 Validation)

When asking a user to fill out a form, it’s very common to have certain mandatory fields. These might be for their name, email address or credit card details.

当要求用户填写表格时，通常需要某些必填字段。 这些可能是用于其名称，电子邮件地址或信用卡详细信息。

In HTML5 we can leverage client-side validation without JavaScript when the behaviour is built into modern browsers.

在HTML5中，当行为内置于现代浏览器中时，我们可以在不使用JavaScript的情况下利用客户端验证。

To create a required field in a form, the required attribute is added to the HTML.

要在表单中创建必填字段， required将required属性添加到HTML。

<form action="#" method="#"> 
  <div> 
    <input id="name" type="text" required> 
    <label for="name">Your name</label> 
  </div> 
  <div> 
    <input id="email" type="email" required> 
    <label for="email">Your email</label> 
  </div> 
  <div> 
    <input id="phone" type="tel" pattern="[0-9]+"> 
    <label for="phone">Your phone number</label> 
  </div> 
  <div> 
    <textarea id="message" required></textarea> 
    <label for="message"> 
  </div> 
  <div><input type="submit"></div> 
</form>

As required is a boolean attribute, its presence on an element is enough to set the value so the attribute value doesn’t need to be specified.

根据required是布尔属性，它在元素上的存在足以设置值，因此不需要指定属性值。

It’s also worth noting that in HTML5 elements like input, that don’t have a closing tag, no longer need to be self-closed with a slash; I think it looks tidier without so have left them off.

还需要注意的是，在诸如input HTML5元素中，由于没有结束标记，因此不再需要使用斜杠进行自动关闭； 我认为没有它看起来会比较整洁，因此请不要理会它们。

With these attributes added to the markup, when I attempt to submit the form without completing those fields, I get a series of tooltip messages asking for the field to be “filled out” – these are auto generated by the browser and can’t be given custom styling as far as I know.

将这些属性添加到标记中后，当我尝试提交表单而不填写这些字段时，会收到一系列提示信息，要求“填写”该字段-这些是浏览器自动生成的，无法据我所知提供自定义样式。

使用:required (Using :required)

With the required attribute added to the markup, we can use it to add a bit of visual feedback to let users know which fields must be filled in.

将required属性添加到标记后，我们可以使用它添加一些视觉反馈，以使用户知道必须填写哪些字段。

The HTML structure is important here, each input and label combination is contained within a <div> and the label comes after the input. This will become clear later on. We can still have the label appear before the input by floating them to opposite sides of the form container and clearing each container accordingly.

HTML结构在这里重要的，每个输入和标签组合被包含内的<div>和标签而来的输入之后 。 稍后将变得清楚。 通过将标签浮动到表单容器的相对侧并相应地清除每个容器，我们仍然可以使标签出现在输入之前。

I want to add an asterisk after each label for a required input. Using knowledge of the general sibling selector and pseudo elements from previous episodes, I can generate the asterisk for any labels that follow a required input.

我想在每个标签后添加一个星号作为required输入。 利用对一般同级选择器和先前情节中的伪元素的了解 ，我可以为跟随required输入的所有标签生成星号。

If your design requires a different markup structure, with the label before the input, a similar effect could be achieved but you’d need to add a class to the parent container of any required fields to add the desired styling.

如果您的设计需要不同的标记结构，并且在输入之前加上标签，则可以实现类似的效果，但是您需要在任何required字段的父容器中添加一个类以添加所需的样式。

The opposite of required is optional and we can make this clear in our form by adding the text “optional” to any inputs that aren’t explicitly required. The :optional pseudo class has us covered here.

相反， required是optional ，我们可以通过在未明确要求的所有输入中添加文本“ optional”来使这一点更清楚。 :optional伪类在这里介绍了我们。

input:optional ~ label:after { 
  content: "(optional)"; 
  display: block;
  color: #888; 
}

As our users fill in the form, we can provide extra visual feedback as to whether they have correctly filled in their details by styling the :valid and :invalid states.

当我们的用户填写表单时，我们可以通过设置:valid和:invalid状态的样式来提供有关他们是否正确填写其详细信息的视觉反馈。

input:not([type="submit"]):valid:focus,
textarea:valid:focus {
  box-shadow: 0 0 10px rgba(101,169,10,0.8);
  outline: 0;
}
input:not([type="submit"]):invalid:focus,
textarea:invalid:focus {
  box-shadow: 0 0 10px rgba(204,63,133,0.8);
  outline: none;
}

These two snippets will add a subtle red shadow behind invalid inputs as they’re being filled in, and a subtle green shadow behind any valid inputs.

这两个摘要将在填充无效输入后添加一个微妙的红色阴影，并在所有有效输入后添加一个微妙的绿色阴影。

验证信息 (Validation messages)

We can use the same techniques we’ve already covered, using state based pseudo classes and generating content with pseudo elements to add more descriptive validation messages to our form.

我们可以使用已经介绍的相同技术，使用基于状态的伪类，并使用伪元素生成内容，以向表单中添加更多描述性的验证消息。

I’ve created a series of messages that will be injected via the content property of various combinations of valid and invalid fields.

我创建了一系列消息，这些消息将通过有效和无效字段的各种组合的content属性注入。

input[type="text"]:focus:invalid~label:before {
  content: "Please enter your full name";
}
input[type="email"]:focus:invalid~label:before {
  content: "Please enter a valid email";
}
input[type="tel"]:focus:invalid~label:before {
  content: "Please only use numbers";
}
textarea:focus:invalid~label:before {
  content: "Please enter a message";
}
input:focus:valid~label:before,
textarea:focus:valid~label:before {
  content: "Perfect, thanks!";
}

These can then be animated into position when the user focuses the input and will change based on the valid or invalid state.

然后，当用户将输入聚焦时，可以将这些设置为动画，并根据有效或无效状态进行更改。

label:before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  font-size: 1rem;
  opacity: 0;
  transition: 0.2s;
}
input:focus~label:before,
textarea:focus~label:before {
  bottom: 100%;
  opacity: 1;
}
input:focus:invalid~label:before,
textarea:focus:invalid~label:before {
  color: #cc3f85;
}
input:focus:valid~label:before,
textarea:focus:valid~label:before {
  color: #65a90a;
}

Now when we fill out the form, we get a bit more info about each step of the process which should be a nice UX boost to a fairly dull form.

现在，当我们填写表单时，我们会获得有关该过程每个步骤的更多信息，这应该是对相当呆板的表单的不错的用户体验。

翻译自: https://www.sitepoint.com/atoz-css-screencast-required/