Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App
geeksforgeeks
Browser
Continue

Related Articles

Pure.CSS Required Inputs

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

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=
        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=
        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:


My Personal Notes arrow_drop_up
Last Updated : 07 Oct, 2021
Like Article
Save Article
Similar Reads
Related Tutorials