Home / Pure CSS Tutorial / Pure CSS – Pure Forms

Pure CSS – Pure Forms:

Forms are generally seen in any website. The most common Form is login or register Forms. Pure CSS provided the class name called pure-form which can be used in <form> element. Let us see the default inline form in the below example:

Example:

<html> 

<head> 

<title>Pure inline form</title>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1"> 

<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">

<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-min.css">

</head> 

 <body> 

   <form class="pure-form">

    <fieldset>

        <legend>inline form</legend>

        <input type="username" placeholder="Username">

        <input type="password" placeholder="Password">



        <label for="remember">

            <input id="remember" type="checkbox"> Remember me

        </label>

        <button type="submit" class="pure-button pure-button-primary">Sign in</button>

    </fieldset>

</form>

 </body> 

</html>

Below is the output you can get if you save the above code in .html file and open it in browser.