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

缺乏、安全感 2022-12-03 09:51 120阅读 0赞

Loading the player…

正在加载播放器…

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

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

## 成绩单 **(**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`输入。 利用对[一般同级选择器][general sibling selector]和先前情节中的[伪元素的了解][pseudo elements] ，我可以为跟随`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/][https_www.sitepoint.com_atoz-css-screencast-required]

[here]: https://www.sitepoint.com/tag/atoz-css/
[general sibling selector]: https://www.sitepoint.com/atoz-css-screencast-general-sibling/
[pseudo elements]: https://www.sitepoint.com/atoz-css-pseudo-elements/
[https_www.sitepoint.com_atoz-css-screencast-required]: https://www.sitepoint.com/atoz-css-screencast-required/