List of form control classes in W3.CSS are as follows:
- w3-input
- w3-check
- w3-radio
- w3-select
- w3-animate-input
w3-input Class: This class can be used in the text, password, number, DateTime, DateTime-local, date, month, time, week, email, url, search, tel, and colour that means it supports all the HTML5 input types. It is used to set the width of the input element to 100%.
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
</head>
<body>
<div class="w3-container w3-center">
<h2 class="w3-text-green w3-xxlarge">
GeeksForGeeks
</h2>
</div>
<div class="w3-container w3-text-red">
<form>
<label for="usr">Name:</label>
<input type="text"
class="w3-input"
id="usr"
name="username">
<br>
<label for="pwd">Password:</label>
<input type="password"
class="w3-input"
id="pwd"
name="password">
<br>
<label for="number">Number:</label>
<input type="number"
class="w3-input"
id="number">
<br>
<div class="w3-center">
<button type="submit"
class="w3-teal w3-hover-green
w3-round w3-button">
Submit
</button>
</div>
</form>
</div>
</body>
</html>
|
Output:
w3-check Class: Checkboxes are used for selecting any specific items from the provided list. This class is used in checkboxes only.
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
</head>
<body>
<div class="w3-container w3-center">
<h2 class="w3-text-green w3-xxlarge">
GeeksForGeeks
</h2>
</div>
<div class="w3-container w3-text-red w3-center">
<form>
<label for="check1">
<input type="checkbox"
class="w3-check"
id="check1"
name="option1"
value="something"
checked>
Option 1
</label>
<br>
<label for="check2">
<input type="checkbox"
class="w3-check"
id="check2"
disabled>
Option 2
</label>
<br>
<label>
<input type="checkbox"
class="w3-check"
name="option2"
value="something">
Option 3
</label>
<br><br>
<button type="submit"
class="w3-teal w3-hover-green
w3-round w3-button">
Submit
</button>
</form>
</div>
</body>
</html>
|
Output:
The form above contains three checkboxes. The first option is checked by default, and the second option is disabled. To use inline checkboxes just remove the <br> tag between them.
w3-radio Class: The radio button is used for selecting the only option from multiple options by the user. It is similar to Checkboxes just remove the “checkbox” from input type and place “radio”. This class is used with radio buttons only.
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
</head>
<body>
<div class="w3-container w3-center">
<h2 class="w3-text-green w3-xxlarge">GeeksForGeeks</h2>
</div>
<div class="w3-container w3-text-red w3-center">
<form>
<label for="radio1">
<input type="radio" class="w3-radio" id="radio1"
name="optradio" value="option1" checked>
Option 1
</label>
<br>
<label for="radio2">
<input type="radio" class="w3-radio" id="radio2"
name="optradio" value="option2">
Option 2
</label>
<br>
<label>
<input type="radio"
class="w3-radio"
disabled>
Option 3
</label>
<br><br>
<button type="submit"
class="w3-teal w3-hover-green
w3-round w3-button">
Submit
</button>
</form>
</div>
</body>
</html>
|
Output:
The form above contains three radio buttons. The first option is checked by default, and the last option is disabled. To use inline radio buttons just remove the <br> tag between them.
w3-select Class: There are two type of select list here selecting a single element from a list and selecting two or more elements from the list to select multiple elements just holding the shift key and select your items one by one.
Example: Selection List with only a single selection possible.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
</head>
<body>
<div class="w3-container w3-center">
<h2 class="w3-text-green w3-xxlarge">GeeksForGeeks</h2>
</div>
<div class="w3-container w3-text-red w3-center">
<form>
<select class="w3-select" name="option">
<option value="" disabled selected>
Choose your option
</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<br><br>
<button type="submit"
class="w3-teal w3-hover-green
w3-round w3-button">
Submit
</button>
</form>
</div>
</body>
</html>
|
Output:
Example: Selection list with multiple selections possible.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
</head>
<body>
<div class="w3-container w3-center">
<h2 class="w3-text-green w3-xxlarge">GeeksForGeeks</h2>
</div>
<div class="w3-container w3-text-red w3-center">
<form>
<select multiple class="w3-select" name="option">
<option value="" disabled selected>
Choose your option
</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<br><br>
<button type="submit" class="w3-teal
w3-hover-green w3-round w3-button">
Submit
</button>
</form>
</div>
</body>
</html>
|
Output:
w3-animate-input Class: This class is similar to the w3-input class and thus can be used with all the HTML5 form elements. This class transforms the width of the targeted element to 100%.
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
</head>
<body>
<div class="w3-container w3-center">
<h2 class="w3-text-green w3-xxlarge">GeeksForGeeks</h2>
</div>
<div class="w3-container w3-text-red">
<form>
<label for="usr">Name:</label>
<input type="text"
class="w3-input w3-animate-input"
id="usr"
name="username"
style="width: 30%;">
<br>
<label for="pwd">Password:</label>
<input type="password"
class="w3-input w3-animate-input"
id="pwd"
name="password"
style="width: 30%;">
<br>
<label for="number">Number:</label>
<input type="number"
class="w3-input w3-animate-input"
id="number"
style="width: 30%;">
<br>
<div class="w3-center">
<button type="submit" class="w3-teal
w3-hover-green w3-round w3-button">
Submit
</button>
</div>
</form>
</div>
</body>
</html>
|
Output:
You can see that the width of the selected element is 100% while others have 30% width.
Similar Reads
Pure CSS Inputs
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 InputsDisabled InputsRead Only InputsRounded InputsCheckboxes and Radios Required Inputs: I
3 min read
W3.CSS Introduction
What is W3.CSS?W3.CSS is a modern framework with built-in responsiveness and easy to learn and use compared to other CSS frameworks.It aims to speed up and simplify web development and support modern responsive devices like Mobile, Laptop, Tablet and Desktop.W3.CSS was designed to be a high-quality
2 min read
W3.CSS Padding
W3.CSS has many facilities of classes to easily style elements in HTML. It includes various responsive padding classes for modification of the appearance of the element. There are two types of padding classes: Numbered Padding ClassesSized Padding Classes Numbered Padding Classes: These classes add
3 min read
What is CSS Ruleset?
A CSS ruleset is the foundation of how styles are applied to HTML elements on a web page. It consists of a selector and one or more declarations, which define how elements are displayed.A CSS ruleset is made up of a selector and declarations.The selector targets HTML elements to apply styles.Declara
10 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
CSS Fonts
CSS fonts control how text appears on a webpage. With CSS, you can specify various properties like font family, size, weight, style, and line height to create visually appealing and readable typography [GFGTABS] HTML <!--Driver Code Starts{--> <html> <head> <!--Driver Code Ends
5 min read
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
CSS Introduction
CSS (Cascading Style Sheets) is a language designed to simplify the process of making web pages presentable. It allows you to apply styles to HTML documents by prescribing colors, fonts, spacing, and positioning.The main advantages are the separation of content (in HTML) and styling (in CSS) and the
5 min read
Pure.CSS Required Inputs
In some cases when we ask someone to fill a form and few things are optional and few things are a must to fill in that form. In that case, we can use the HTML required in Pure CSS as well. This attribute works with other types of input like radio, checkbox, number, text, etc. Syntax: <input requi
1 min read
Pure CSS Disabled Inputs
In this article, we will see how to disable the input field in Pure CSS. In some cases, when we ask someone to fill a form few things are activated as well a few things are disabled for their previous choices. In that case, we can use HTML disabled in Pure CSS as well. This attribute works with othe
2 min read