Open In App

Pure CSS Aligned Form

Improve
Improve
Like Article
Like
Save
Share
Report

Pure CSS is a framework of CSS. It is a free and open-source tool collection for creating responsive websites and web applications. Pure CSS is developed by Yahoo and is used for creating faster, more beautiful, and more responsive websites. It can be used as an alternative to Bootstrap

Pure CSS Aligned Form is a type of HTML form that is used to create an aligned form. In this type of form, the labels are aligned after the input fields but in the mobile viewport, labels are stacked. 

In this article, we will discuss the Pure CSS Aligned Form.

Pure CSS Aligned Form Class:

  • pure-form-aligned: This class is used as a modifier class to create an aligned form. In desktop view, the labels are seen after the input fields but in the mobile or small viewport, labels are seen as stacked.

Syntax:

<form class="pure-form pure-form-aligned"> 
   ...
</form>

Example: The following codes demonstrate the Pure CSS Aligned Form.

HTML




<!DOCTYPE html>  
<html
  
<head>
  <title> Pure CSS Aligned Form </title>
  <link rel="stylesheet" href=
        integrity=
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"   
        crossorigin="anonymous"
</head>
  
<body>    
   <h1 style="color:green;"> GeeksforGeeks </h1
   <h3> Pure CSS Aligned Form </h3>
  
   <form class="pure-form pure-form-aligned">
        <fieldset>
          <div class="pure-control-group">
            <label for="first-name"> Enter your First Name </label>
            <input type="text" id="first-name" placeholder="First name" />
            <span class="pure-form-message-inline">
              *This is a Required field.
            </span>
          </div>
  
          <div class="pure-control-group">
            <label for="last-name"> Enter your Last Name </label>
            <input type="text" id="last-name" placeholder="Last name" />
            <span class="pure-form-message-inline">
              *This is a Required field.
            </span>
          </div>
  
          <div class="pure-control-group">
            <label for="email"> Enter your email id </label>
            <input type="email" id="email" placeholder="Email id" />
          </div>
  
          <div class="pure-controls">
            <button type="submit" class="pure-button pure-button-primary">
              Register
            </button>
          </div>
        </fieldset>
   </form>
</body>
</html>


Output:

Pure CSS Aligned Form

Reference: https://purecss.io/forms/#aligned-form



Last Updated : 29 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads