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