Skip to content
Related Articles

Related Articles

Pure CSS Aligned Form

View Discussion
Improve Article
Save Article
  • Last Updated : 29 Mar, 2022
View Discussion
Improve Article
Save Article

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!