VOOZH about

URL: https://www.geeksforgeeks.org/css/pure-css-stacked-form/

⇱ Pure CSS Stacked Form - GeeksforGeeks


  • Courses
  • Tutorials
  • Interview Prep

Pure CSS Stacked Form

Last Updated : 3 Oct, 2025

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, beautiful, and responsive websites. It can be used as an alternative to Bootstrap.

In this article, we will discuss how to create a Stacked form using Pure CSS.

A Stacked form is a type of HTML form used to create the stacked form. In this type of form, labels are below the input fields.

Pure CSS Stacked Form Class:

  • pure-form: It is used to create the HTML form in Pure CSS.
  • pure-form-stacked: It is used to create the stacked form in which the labels are shown below the input fields.

Syntax:

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

Example 1: This example describes the Stacked Form in Pure CSS.

Output:

👁 Image
Simple Stacked Form

Example 2: This example describes the Stacked Form in Pure CSS.

Output:

👁 Image
Stacked Form

Reference: https://pure-css.github.io/#stacked-form

Comment