Inputs are important in any webpage form. It is used to take various inputs from the user which are essential in collecting data or information.
Following are the various types of inputs in Pure CSS:
- Required Inputs
- Disabled Inputs
- Read Only Inputs
- Rounded Inputs
- Checkboxes and Radios
Required Inputs: If you want to mark a form control as required add the "required" attribute to the <input> element. Suppose your form needs a phone number then you can use this attribute to show that a phone number is required.
Syntax:
<form class="pure-form">
<input type="…" placeholder="……" required>
</form>
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<!--Import Pure CSS files-->
<link rel="stylesheet"
href=
"https://unpkg.com/[email protected]/build/pure-min.css"
integrity=
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"
crossorigin="anonymous">
</head>
<body>
<h1>Pure CSS Required Inputs</h1>
<!--Required input-->
<form class="pure-form">
<input type="tel"
placeholder="Requires a phone number"
required>
</form>
</body>
</html>
Output:
Disabled Inputs: If you don’t want to take any input from the user you can use disabled inputs. Add the "disabled" attribute to the <input> element to disable form control.
Syntax:
<form class="pure-form">
<input type="…" placeholder="……" disabled="">
</form>
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<!--Import Pure CSS files-->
<link rel="stylesheet" href=
"https://unpkg.com/[email protected]/build/pure-min.css"
integrity=
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"
crossorigin="anonymous">
</head>
<body>
<h1>Pure CSS Disabled Inputs</h1>
<!--Disabled input-->
<form class="pure-form">
<input type="text"
placeholder="This input is disabled.."
disabled="" />
</form>
</body>
</html>
Output:
Read-only Inputs: If you want to make a form input only readable, then you can use read only inputs. The major difference between read-only and disabled inputs is disabled inputs are not interactive whereas in read-only inputs you can interact with the input and select its text. Hence they are still focusable. Add "readonly" attribute to <input> element to create read-only inputs.
Syntax:
<form class="pure-form">
<input type="…" value="……" readonly>
</form>
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Import Pure CSS files -->
<link rel="stylesheet" href=
"https://unpkg.com/[email protected]/build/pure-min.css"
integrity=
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"
crossorigin="anonymous">
</head>
<body>
<h1>Pure CSS Read-only Inputs</h1>
<!--Readable input-->
<form class="pure-form">
<input type="text"
value="This input is readable.." readonly>
</form>
</body>
</html>
Output:
Rounded Inputs: Add class name "pure-input-rounded" to the <input> element to display a form control with rounded corners. It can be used to create a search-box in your webpage.
Syntax:
<form class="pure-form">
<input type="…" class="pure-input-rounded">
</form>
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<!--Import Pure CSS files-->
<link rel="stylesheet" href=
"https://unpkg.com/[email protected]/build/pure-min.css"
integrity=
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"
crossorigin="anonymous">
</head>
<body>
<h1>Pure CSS Rounded Inputs</h1>
<!--Rounded Inputs-->
<form class="pure-form">
<input type="text"
class="pure-input-rounded">
<button type="submit"
class="pure-button-primary">
Search
</button>
</form>
</body>
</html>
Output:
Checkboxes and Radios: To normalize and align checkboxes and radioinputs add the class "pure-checkbox" or "pure-radio" to the <label> element.
Syntax:
Checkbox:
<label for="..." class="pure-checkbox">
<input id="…" type="checkbox" value="">
. . .
</label>
Radio-button:
<label for="..." class="pure-radio">
<input id="…" type="radio" name="..." value="">
. . .
</label>
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<!--Import Pure CSS files-->
<link rel="stylesheet" href=
"https://unpkg.com/[email protected]/build/pure-min.css"
integrity=
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"
crossorigin="anonymous">
</head>
<body>
<h1>Pure CSS Checkboxes and Radio Inputs</h1>
<form class="pure-form">
<!--Checkbox-->
<label for="firstOption" class="pure-checkbox">
<input id="firstOption"
type="checkbox" value="">
Click this checkbox
</label>
<!--Radio buttons-->
<label for="secondOption" class="pure-radio">
<input id="secondOption" type="radio"
name="optionsRadios" value="option1" checked>
Click this radio button.
</label>
<label for="thirdOption" class="pure-radio">
<input id="thirdOption" type="radio"
name="optionsRadios" value="option2">
..Or this one!
</label>
</form>
</body>
</html>
Output:
Similar Reads
Pure CSS Rounded Inputs 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. Pure CSS provides a "
1 min read
Primer CSS Inputs Forms 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
2 min read
Pure CSS Form Grouped Inputs 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 w
2 min read
Pure CSS Forms Forms are essential in websites to collect data or information for various purposes. Using Pure CSS we can create different types of forms. Pure CSS Forms Classes: Default Form Stacked Form Aligned Form Grouped Inputs Default Form: Add the class "pure-form" to any <form> element to create a de
4 min read
Pure CSS Form Input Sizing Forms are essential in websites to collect data or information for various purposes. Using Pure CSS Forms, we can create different types of forms. The size of the inputs of forms is always important. So inputs are important in any webpage form. It is used to take various inputs from the user which a
2 min read
Pure CSS Form Read-Only Inputs Readonly is a one of the attributes of <input> element in Pure CSS Forms. It is used to make the input field in a form read-only i.e., we can't modify the existing content inside the input field whether it is empty or non-empty. The name itself explains the attribute, it makes the input field
3 min read
Spectre Form Input The Spectre Forms provide the most common control component used in a regular form. In this article, we will discuss form input. The form input is an important component that is required to get the data from the user as usual. Form Input Class: form-input: This class is used to create the input fiel
1 min read
Blaze UI Inputs Blaze UI is a free open source UI Toolkit that provides an excellent structure for building websites quickly with a scalable and maintainable foundation. All components in Blaze UI are developed mobile-first and rely solely on native browser features, not a separate library or framework. It helps us
3 min read
HTML Input Type HTML Input Element has various types that play an important role in creating HTML Forms, and the element is efficient in collecting user data and adding interactivity to web pages. These elements provide the feature to create an interactive web page. In the Input Element, there is an attribute type
8 min read
React MUI Input Components React MUI Input Components are various types of Input Components along with enhanced styling and functionalities provided by the React Material-UI (MUI). The MUI Input components refer, to a standard input field that can be used to gather information from the user. These are various types of input c
3 min read