Open In App

W3.CSS Input

Improve
Improve
Like Article
Like
Save
Share
Report

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>
  
    <!-- Adding W3.CSS file through external link -->
    <link rel="stylesheet" 
          href="https://www.w3schools.com/w3css/4/w3.css">
        
</head>
  
<body>
    <!-- w3-container is used to add 
         16px padding to any HTML element.  -->
    <!-- w3-center is used to set the 
         content of the element to the center. -->
    <div class="w3-container w3-center">
        <!-- w3-text-green sets the text 
            color to green. -->
        <!-- w3-xxlarge sets font size to 32px. -->
        <h2 class="w3-text-green w3-xxlarge">
            GeeksForGeeks
        </h2>
    </div>
      
    <!-- Form in W3.CSS -->
    <div class="w3-container w3-text-red">
      <form>
         <!-- Text Field -->
         <label for="usr">Name:</label
         <input type="text" 
                class="w3-input" 
                id="usr" 
                name="username"
         <br>
           
         <!-- Password Field -->
         <label for="pwd">Password:</label
         <input type="password"
                class="w3-input" 
                id="pwd"
                name="password"
         <br
           
         <!-- Number Field -->
         <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>
  
    <!-- Adding W3.CSS file through external link -->
    <link rel="stylesheet" 
          href="https://www.w3schools.com/w3css/4/w3.css">
        
</head>
<body>
    <!-- w3-container is used to add 16px
         padding to any HTML element.  -->
    <!-- w3-center is used to set the content
         of the element to the center. -->
    <div class="w3-container w3-center">
        <!-- w3-text-green sets the text colour to green. -->
        <!-- w3-xxlarge sets font size to 32px. -->
        <h2 class="w3-text-green w3-xxlarge">
          GeeksForGeeks
      </h2>
    </div>
      
    <!-- Form in W3.CSS -->
    <div class="w3-container w3-text-red w3-center">
      <form>
         <!-- Checked Checkbox -->
          <label for="check1"
          <input type="checkbox" 
                 class="w3-check" 
                 id="check1" 
                 name="option1" 
                 value="something" 
                 checked> 
             Option 1 
          </label>
         <br>
           
         <!-- Disabled Checkbox -->
         <label for="check2"
         <input type="checkbox" 
                class="w3-check"
                id="check2" 
                disabled> 
             Option 2
         </label>
         <br>
           
         <!-- Normal Checkbox -->
         <label
         <input type="checkbox" 
                class="w3-check"
                name="option2"
                value="something">
            Option 3 
         </label>
         <br><br>
           
         <!-- button -->
         <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>
  
    <!-- Adding W3.CSS file through external link -->
    <link rel="stylesheet" 
          href="https://www.w3schools.com/w3css/4/w3.css">
        
</head>
<body>
    <!-- w3-container is used to add 16px 
         padding to any HTML element.  -->
    <!-- w3-center is used to set the content
         of the element to the center. -->
    <div class="w3-container w3-center">
        <!-- w3-text-green sets the text color to green. -->
        <!-- w3-xxlarge sets font size to 32px. -->
        <h2 class="w3-text-green w3-xxlarge">GeeksForGeeks</h2>
    </div>
      
    <!-- Form in W3.CSS -->
    <div class="w3-container w3-text-red w3-center">
      <form>
         <!-- Checked Radio Button -->
         <label for="radio1"
         <input type="radio" class="w3-radio" id="radio1"
                name="optradio" value="option1" checked>
            Option 1 
         </label>
         <br>
         <!-- Normal Radio Button -->
         <label for="radio2"
         <input type="radio" class="w3-radio" id="radio2"
                name="optradio" value="option2">
            Option 2 
         </label>
         <br>
         <!-- Disabled Radio Button -->
         <label
         <input type="radio" 
                class="w3-radio" 
                disabled> 
            Option 3 
        </label>
         <br><br>
           
         <!-- Button -->
         <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>
  
    <!-- Adding W3.CSS file through external link -->
    <link rel="stylesheet" 
          href="https://www.w3schools.com/w3css/4/w3.css">
        
</head>
<body>
    <!-- w3-container is used to add 16px 
         padding to any HTML element.  -->
    <!-- w3-center is used to set the content 
         of the element to the center. -->
    <div class="w3-container w3-center">
        <!-- w3-text-green sets the text colour to green. -->
        <!-- w3-xxlarge sets font size to 32px. -->
        <h2 class="w3-text-green w3-xxlarge">GeeksForGeeks</h2>
    </div>
      
    <!-- Form in W3.CSS -->
    <div class="w3-container w3-text-red w3-center">
      <form>
         <!-- Single Selection list -->
         <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 -->
         <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>
  
    <!-- Adding W3.CSS file through external link -->
    <link rel="stylesheet" 
          href="https://www.w3schools.com/w3css/4/w3.css">
        
</head>
<body>
    <!-- w3-container is used to add 16px
          padding to any HTML element.  -->
    <!-- w3-center is used to set the content 
         of the element to the center. -->
    <div class="w3-container w3-center">
        <!-- w3-text-green sets the text colour to green. -->
        <!-- w3-xxlarge sets font size to 32px. -->
        <h2 class="w3-text-green w3-xxlarge">GeeksForGeeks</h2>
    </div>
      
    <!-- Form in W3.CSS -->
    <div class="w3-container w3-text-red w3-center">
      <form>
         <!-- Multiple Selection list -->
         <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 -->
         <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>
  
    <!-- Adding W3.CSS file through external link -->
    <link rel="stylesheet" 
          href="https://www.w3schools.com/w3css/4/w3.css">
</head>
  
<body>
    <!-- w3-container is used to add 16px 
           padding to any HTML element.  -->
    <!-- w3-center is used to set the content 
            of the element to the center. -->
    <div class="w3-container w3-center">
  
        <!-- w3-text-green sets the text color to green. -->
        <!-- w3-xxlarge sets font size to 32px. -->
        <h2 class="w3-text-green w3-xxlarge">GeeksForGeeks</h2>
    </div>
      
    <!-- Form in W3.CSS -->
    <div class="w3-container w3-text-red">
      <form>
         <!-- Text Field -->
         <label for="usr">Name:</label>
         <input type="text" 
                class="w3-input w3-animate-input" 
                id="usr" 
                name="username" 
                style="width: 30%;"
         <br>
           
         <!-- Password Field -->
         <label for="pwd">Password:</label
         <input type="password" 
                class="w3-input w3-animate-input"
                id="pwd" 
                name="password" 
                style="width: 30%;"
         <br
           
         <!-- Number Field -->
         <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
Previous
Next
Share your thoughts in the comments
Similar Reads