Pure CSS Form Input Type

Pure CSS form Input type elements are used to build HTML forms. An HTML form contains the following input elements such as text fields, checkboxes, radio buttons, submit buttons, etc.

Grouped Inputs

Pure CSS provides flexibility to group different input fields together. Every grouped input is separated from the others.

To create a grouped input, add the .pure-group class to the input group container i.e. <fieldset> element, and .pure-input-* class to the each input form elements. Here, * refers to a fraction of the width.

Source Code

          
            <form class="pure-form">
   <fieldset class="pure-group">
      <input type="text" class="pure-input-1-2" placeholder="User First Name" />
      <input type="text" class="pure-input-1-2" placeholder="User Last Name" />
   </fieldset>
   <fieldset class="pure-group">
      <input type="text" class="pure-input-1-2" placeholder="Skills" />
      <textarea class="pure-input-1-2" placeholder="Biography"></textarea>
   </fieldset>
   <button type="submit" class="pure-button pure-input-1-2 pure-button-primary">Sign in</button>
</form>          
        

Source Code: Output

Pure CSS Input Sizing

Pure CSS form elements have fluid width. Its width can be controlled using the pure-input-* class, where * refers to a fraction of width.

General Syntax

      <form class="pure-form">
  <input type="text" class="pure-input-* " />
</form>
    

Source Code

          
            <div class="pure-g">
  <div class="pure-u-1 pure-u-sm-1-2">
    <form class="pure-form">
      <input type="text" class="pure-input-1" placeholder=".pure-input-1" />
      <input type="text" class="pure-input-2-3" placeholder=".pure-input-2-3" />
      <input type="text" class="pure-input-1-2" placeholder=".pure-input-1-2" />
      <input type="text" class="pure-input-1-3" placeholder=".pure-input-1-3" />
      <input type="text" class="pure-input-1-4" placeholder=".pure-input-1-4" />
    </form>
  </div>
</div>          
        
Try it now

Source Code: Output

Read-Only Inputs

Whenever, form inputs contain a read-only attribute, then it specifies that the user can only read input field data but can't change the data. To create it, simply add a read-only attribute to the input field.

Source Code

          
            <form class="pure-form pure-form-aligned">
   <fieldset>
      <div class="pure-control-group">
         <label for="name">User Name</label>
         <input id="name" type="text" value="Ankita" readonly />
      </div>
   </fieldset>
</form>          
        

Source Code: Output

Rounded Inputs

Add the pure-input-rounded class to the form input element to make the rounded input fields.

Source Code

          
            <form class="pure-form pure-form-aligned">
   <fieldset>
      <div class="pure-control-group">
         <label for="name">Email</label>
         <input name="email" id="email" type="email" class="pure-input-rounded" />
      </div>
   </fieldset>
</form>          
        

Source Code: Output

Checkboxes and Radios

Checkboxes and radio buttons are used to provide options so that the user can select them. But both have some differences. User can select more than one checkbox options but only one radio button from the list of multiple radio buttons.

To create checkbox and radio button in Pure CSS, simply use .pure-checkbox or .pure-radio class.

To create a checkbox and radio button in Pure CSS, simply use the pure-checkbox or the pure-radio class.

Source Code

          
            <form class = "pure-form pure-form-aligned">
  <fieldset>
     <div class = "pure-control-group">      
      <label for = "name">Username</label>
       <input id = "name" type = "text" placeholder = "Username" required>
     </div>
     <div class = "pure-control-group"> 
       <label for = "email">Email</label>
        <input id = "email" type = "text" placeholder = "Email Address" required>       
     </div>
  <div class="pure-controls">
    <label for="gender">Gender</label>
	<label for = "male" class = "pure-radio">
	  <input id = "male" type = "radio" name = "gender" value = "male" checked>Male
	</label>
	<label for = "female" class= "pure-radio">
	  <input id = "female" type = "radio" name = "gender" value = "female">Female
	</label>
</div>
<div class = "pure-controls">
   <label  for = "Free" class = "pure-checkbox">
   <input id = "Free" type = "checkbox" checked = "checked">
     Term & Conditions
   </label>                          
</div>
     <div class = "pure-controls">
       <button type = "submit" class = "pure-button pure-button-primary">Submit</button>
     </div>
  </fieldset>
</form>          
        

Source Code: Output

Required Inputs

The required input is used to create the mandatory input field.It means you must fill in the input field value before submitting the form.
To create, a form control as required, add the required attribute to the input form field.

General Syntax

      <input type="text"  name="field name"  required>
    

Source Code

          
            <form class = "pure-form pure-form-aligned">
  <fieldset>
     <div class = "pure-control-group">
      <label for = "name">Username</label>
       <input id = "name" type = "text" placeholder = "Username" required>
     </div>
     <div class = "pure-control-group">
       <label for = "email">Email</label>
        <input id = "email" type = "text" placeholder = "Email Address" required>
     </div>

     <div class = "pure-controls">
       <button type = "submit" class = "pure-button pure-button-primary">Submit</button>
     </div>
  </fieldset>
</form>          
        

Source Code: Output

Disabled Input

To make an input field disabled, use the disabled attribute to the input form fields. In this case, the user can not enter or change the form field value.

General Syntax

      <input type="text" disabled="" />
    

Source Code

          
            <form class = "pure-form pure-form-aligned">
  <fieldset>
     <div class = "pure-control-group">      
      <label for = "name">Username</label>
       <input id = "name" type = "text" placeholder = "Username" disabled>
     </div>
     <div class = "pure-control-group"> 
       <label for = "email">Email</label>
        <input id = "email" type = "text" placeholder = "Email Address" disabled>       
     </div>

     <div class = "pure-controls">
       <button type = "submit" class = "pure-button pure-button-primary">Submit</button>
     </div>
  </fieldset>
</form>          
        

Source Code: Output

Web Tutorials

Pure CSS Form Input Type
Html Tutorial HTML
Javascript Tutorial JAVASCRIPT
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4