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.
Last Updated :
02 Mar, 2021
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...