My <input /> can’t be this cute (APP opens with surprise)

• Author: Chen Da Yu Tou
• Making: KRISACHAN

The tag is a very common alternative element in our daily development. However, we have found that there are a lot of attributes related to while checking whattwg and MDN.

This article assumes that you already know the basic usage of the tag and won’t go over the basics

To my surprise, these selectors are identical to input…

As of this writing, there are three major categories and 16 input related options, according to the latest Drafts. They’re all really useful, and if you use them, they’ll make our user experience better.

Let’s share the functions of these three categories of selectors:

Category 1: Input Control States

Type 2: Input Value States

Category 3: Input value-checking

Scary, in addition to the selector, is also related to these properties

in addition to having a number of related selectors, there are also different attributes that can be used with different types. Their functions are as follows:

In actual combat

From the three descriptions above, we have a general idea about the tag, but do you think I’m here for a list?

Of course not, and practical operation ah ~

Pure CSS implements form submission

First, let’s take a look at the effect

The above effect is a pure CSS implementation of the form submission function, how is this implemented? Below we directly look at the source code, and then step by step to split (do not want to see the direct CV below the source code to do their own test ~)

<style>
    :root {
      --error-color: red;
    }
    .form > input {
      margin-bottom: 10px;
    }
    .form > .f-tips {
      color: var(--error-color);
      display: none;
    }
    input[type="text"]:invalid ~ input[type="submit"].input[type="password"]:invalid ~ input[type="submit"] {
      display: none;
    }
    input[required]:focus:invalid + span {
      display: inline;
    }
    input[required]:empty + span {
      display: none;
    }
    input[required]:invalid:not(:placeholder-shown) + span {
      display: inline;
    }
</style>
<form class="form" id="form" method="get" action="/api/form">Account:<input data-title="Account" placeholder="Please enter the correct account number" pattern="6, 10 {} \ w" name="account" type="text" required />
    <span class="f-tips">Please enter the correct account number</span>
    <br />Password:<input data-title="Password" placeholder="Please enter the correct password" pattern="6, 10 {} \ w" name="password" type="password" required />
    <span class="f-tips">Please enter the correct password</span>
    <br />
    <input name="button" type="submit" value="Submit" />
</form>
Copy the code

Step 1: Write the infrastructure

First let’s write the infrastructure, the code is as follows:

<style>
    :root {
      --error-color: red;
    }
    .form > input {
      margin-bottom: 10px;
    }
    .form > .f-tips {
      color: var(--error-color);
      display: none;
    }
</style>
<form class="form" id="form" method="get" action="/api/form">Account:<input data-title="Account" placeholder="Please enter the correct account number" pattern="6, 10 {} \ w" name="account" type="text" required />
    <span class="f-tips">Please enter the correct account number</span>
    <br />Password:<input data-title="Password" placeholder="Please enter the correct password" pattern="6, 10 {} \ w" name="password" type="password" required />
    <span class="f-tips">Please enter the correct password</span>
    <br />
    <input name="button" type="submit" value="Submit" />
</form>
Copy the code

Just a quick glance. Well, it’s pretty simple. It’s all the usual stuff. Oh, no, what is this pattern?

Here we focus on sharing the pattern attribute, which is used to verify whether the input[value] is valid. The content in the attribute matches the value, and the syntax is the regular syntax. Example is as follows:

<label>
    <! If input[name="part"] is a number +3 uppercase letters, input[name="part"] is a number +3 uppercase letters.
    <input pattern="[0-9][A-Z]{3}" name="part" />
</label>
Copy the code

For example, input[type=”email”] matches the following rules by default:

/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](? : [a - zA - Z0-9 -], 21 {0} [a zA - Z0-9])? (? :\.[a-zA-Z0-9](? : [a - zA - Z0-9 -], 21 {0} [a zA - Z0-9])?) * $/Copy the code

Step 2: Key features

input[type="text"]:invalid ~ input[type="submit"].input[type="password"]:invalid ~ input[type="submit"] {
    display: none;
}
input[required]:focus:invalid + span {
    display: inline;
}
input[required]:empty + span {
    display: none;
}
input[required]:invalid:not(:placeholder-shown) + span {
    display: inline;
}
Copy the code

This is the implementation of the core interaction.

The first class ensures that the submit button is hidden when two input fields fail. This means that the submit button is hidden when the input field is empty or does not conform to the validation rules.

The second and third classes control the user’s input in the input box. If the input does not conform to the verification rules, the error message will be displayed. Otherwise, the error message will be hidden.

The fourth class is placeholder, which controls whether the error message is implicit or not. If the placeholder does not display the error message, the user is inputting the error message. If the placeholder does not display the error message, the user is inputting the error message.

State switch

Indeterminate is used to select form elements whose state is uncertain and . Anyone who has played Minesweeper knows that you can right-click to select a question mark as well as a red flag, which is checked but not determined. The pending state type is similar to that of a promise, which is between resolve and Reject.

Lots: IndeTerminate gives us a lot of fun experiences.

First let’s look at its use case.

Basic usage

Look at the effect

The code is as follows:

<style>
    body {
        background: # 333;
        color: #fff;
        padding: 20px;
        text-align: center;
    }
    input {
        margin-right:.25em;
        width: 30px;
        height: 30px;
    }
    label {
        position: relative;
        top: 1px;
        font-size: 30px;
    }
</style>
<form>
    <input type="checkbox" id="checkbox">
    <label for="option">Click on the left</label>
</form>
<script>
      'use strict';
      checkbox.addEventListener('click', ev => {
        if (ev.target.readOnly) {
          ev.target.checked = ev.target.readOnly = false;
        } else if(! ev.target.checked) { ev.target.readOnly = ev.target.indeterminate =true;
        };
      });
</script>
Copy the code

In fact, there is no complicated implementation, just a judgment of the intermediate state, so it is very easy to realize the three states of radio switch.

Show to scalp pins and needles

Look at the effect

(This day show effect comes from Ben Szabo’s Codepen, those who are interested can study carefully, when can I have such excellent, teh ~)

The optional value of the input box binding

Look at the effect

The code is very simple:

<input type="text" list="names" multiple />
<datalist id="names">
    <option value="kris">
    <option value="Chen Big Fish Head">
    <option value="Shenzhen Kaneshiro">
</datalist>

<input type="email" list="emails" multiple />
<datalist id="emails">
    <option value="[email protected]" label="kris">
    <option value="[email protected]" label="kris">
</datalist>

<input type="date" list="dates" />
<datalist id="dates">
    <option value="2019-09-03">
</datalist>
Copy the code

to bind the dropdown datalist

So when we want to implement the input association, we can also modify the

conclusion

The tag also has a lot of interesting features to explore. Different types, combined with different selectors and attributes, can make for more amazing experiences. If you are interested, you can open your imagination and implement some interesting functions by yourself. If you have any interesting ideas, you can leave a comment below or add “krisChans95” to your wechat account.

eggs

After being reminded by diggers and wechat friends, I found an interesting Easter egg. I feel that this article should be renamed as “Shock, an article actually led to nuggets and wechat…”

Afterword.

If you like to discuss technology, or have any comments or suggestions on this article, you are welcome to add yu Tou wechat friends to discuss. Of course, Yu Tou also hopes to talk about life, hobbies and things with you. You can also scan your wechat account to subscribe to more exciting content.