Primer CSS Inputs Forms

Last Updated : 20 Apr, 2022

Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by Object-Oriented CSS principles, functional CSS, and BEM architecture. It is highly reusable and flexible. It is created with GitHub’s design system.

Primer CSS offers forms that are used to take some set of inputs from the users. Primer CSS Inputs forms create an input field smaller, larger, and full width using some extra classes.

Primer CSS Inputs Forms Class:

input-sm: This class is used to create small input fields in Primer CSS Forms.
input-lg: This class is used to create large input fields in Primer CSS Forms.
input-block: This class is used to create blocked input fields in Primer CSS Forms.

Syntax:

<form>
      <input class="form-control input-sm" 
          type="..." placeholder="...." />
      ...
</form>

Example 1: Below example demonstrates the use of Primer CSS Inputs Forms using the input-sm class.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> Primer CSS Input Forms </title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> 
</head> 
  
<body> 
    <center> 
        <h1 class="color-fg-success">  
            GeeksforGeeks  
        </h1> 
          
        <h3> Primer CSS Input Forms-small </h3> 
  
        <form> 
            <input class="form-control input-sm mt-3" 
                type="text" placeholder="GfG username..." /> 
  
            <select class="form-select input-sm mt-3"> 
                <option>Choose any course</option> 
                <option>DSA</option> 
                <option>OOP's</option> 
                <option>DBMS</option> 
                <option>OS</option> 
            </select> 
        </form> 
    </center> 
</body> 
  
</html>

Output:

Primer CSS Inputs Forms

Example 2: Below example demonstrates the use of Primer CSS Inputs Forms using the input-lg class.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
  <title> Primer CSS Input Forms </title> 
  <link rel="stylesheet" href= 
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> 
</head> 
  
<body> 
    <center> 
        <h1 class="color-fg-success"> GeeksforGeeks </h1> 
        <h3> Primer CSS Input Forms-large </h3> 
          
        <form> 
            <input class="form-control input-lg mt-3" 
                type="text" placeholder="GfG username..." 
            /> 
  
            <select class="form-select input-lg mt-3"> 
              <option>Choose any course</option> 
              <option>DSA</option> 
              <option>OOP's</option> 
              <option>DBMS</option> 
              <option>OS</option> 
            </select> 
        </form> 
    </center> 
</body> 
  
</html>

Output:

Primer CSS Inputs Forms

Example 3: Below example demonstrates the use of Primer CSS Inputs Forms using the input-block class.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
  <title> Primer CSS Input Forms </title> 
  <link rel="stylesheet" href= 
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> 
</head> 
  
<body style="margin-inline: 10rem;"> 
    <center> 
        <h1 class="color-fg-success"> GeeksforGeeks </h1> 
        <h3> Primer CSS Input Forms-block </h3> 
  
        <form> 
          <input class="form-control input-block mt-3" 
            type="text" placeholder="GfG username..." 
          /> 
  
          <select class="form-select input-block mt-3"> 
            <option>Choose any course</option> 
            <option>DSA</option> 
            <option>OOP's</option> 
            <option>DBMS</option> 
            <option>OS</option> 
          </select> 
        </form> 
    </center> 
</body> 
</html>