Pure.CSS Required Inputs

Last Updated : 07 Oct, 2021

In some cases when we ask someone to fill a form and few things are optional and few things are a must to fill in that form.

In that case, we can use the HTML required in Pure CSS as well. This attribute works with other types of input like radio, checkbox, number, text, etc.

Syntax:

<input required>

Example 1: In this example, we will use the required attribute on the text input type.

HTML

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href=
"https://unpkg.com/[email protected]/build/pure-min.css"
        integrity=
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"
        crossorigin="anonymous">
</head>

<body>
    <h1>GeeksforGeeks</h1>

    <strong>
        Pure CSS Required Input
    </strong>
    
    <form action="">
        Username:
        <input type="text" name="usrname" required="">
        <br><br>
        
        Password:
        <input type="password" name="password">
        <br>
        <input type="submit">
    </form>
</body>

</html>

Output:

Example 2: In this example, we will use the required attribute on the radio input type.

HTML

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href=
"https://unpkg.com/[email protected]/build/pure-min.css"
        integrity=
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"
        crossorigin="anonymous">
</head>

<body>
    <h1>GeeksforGeeks</h1>
    
    <strong>
        Pure CSS Required Input
    </strong>

    <form action="">
        Without clicking the Radio button:
        <input type="radio" 
            name="radiocheck" required="">

        <input type="submit">
    </form>
</body>

</html>

Output:

Pure CSS Disabled Inputs

skyridetim

Improve

Article Tags :

Pure.CSS Required Inputs

Similar Reads

Pure CSS Base

Pure CSS Buttons

Pure CSS Tables

Pure CSS Forms

Pure CSS Grids

Pure CSS Menus

Thank You!

What kind of Experience do you want to share?