W3CSS Input Types

In the previous article, we started our discussion on W3CSS inputs. We saw how to style inputs via W3CSS classes. From simple forms to cards and hoverable inputs, we saw versatility of W3CSS classes. However, in the last article we stuck to text type inputs. In this article we shall see rest of the W3CSS input types. We shall start our discussion with check boxes, followed by radio buttons and select statement.

Check Boxes

Check boxes is one of the most commonly used input types especially when you want to allow user to select multiple options from set of options. To convert an input type into checkbox simply add “we-check” class to it. Take a look at the following example to see how check boxes are implemented with W3CSS.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>
    
    <form class="w3-container w3-card-4">
      <h2>Select Courses</h2>
      <p>
      <input class="w3-check" type="checkbox" checked="checked">
      <label>English</label></p>
      <p>
      <input class="w3-check" type="checkbox">
      <label>History</label></p>
      <p>
      <input class="w3-check" type="checkbox" disabled>
      <label>Mathematics (Disabled)</label></p>
      <p>
      <input class="w3-check" type="checkbox" disabled>
      <label>Science</label></p>
    </form>

</body>
    
</html>

Download the code Try the code

Open the above page in browser. You should see a list of subjects with the first subject already selected. You can check as many check boxes as you like

Radio Buttons

Radio buttons are commonly used where you want user to select only one of the option from the set of options.Add the class “w3-radio” to the input of type “radio” to create W3CSS radio buttons. Take a look at following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>
    
 <form class="w3-container w3-card-4">
  <h2>Select Class</h2>
  <p>
  <input class="w3-radio" type="radio" name="class" value="economy" checked>
  <label>Economy</label></p>
  <p>
  <input class="w3-radio" type="radio" name="class" value="business">
  <label>Business</label></p>
  <p>
  <input class="w3-radio" type="radio" name="class" value="" disabled>
  <label>First Class(Disabled)</label></p>
</form>

</body>
    
</html>

Download the code Try the code

Select Options

Another very useful input type is the select type. The select type displays data in the form of drop down list from which one item can be selected. Take create W3CSS select input type, add w3-select class to the opening select tag. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>
    
  <h1>Select Travel Class</h1>

  <select class="w3-select" name="option">
    <option value="" disabled selected>Prime Class</option>
    <option value="1">Economy Class</option>
    <option value="2">Business Class</option>
    <option value="3">First Class</option>
  </select>

  <p><button class="w3-btn w3-blue">Book Place</button></p>

</body>
    
</html>

Download the code Try the code

Open the above page in browser. You shall see a drop down list with “Prime Class” selected by default and disabled. You can choose one of the economy, business and first class from the drop down list.

Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .