W3CSS Inputs

Inputs are used to get information from the user. For instance, input forms are available at job listing sites where user can register themselves to apply for different jobs. Similarly, to login to a website, user need to enter his username and/or password. In short, inputs are fundamental part of a website. Inputs fields are usually specified inside forms tags. In this article we shall see how to create W3CSS inputs and how they can be used to retrieve data from the user.

Simple W3CSS Inputs

There are three parts to creating a beautiful looking input form. First create a div with class w3-container and header color. Inside this div create a heading using h1 or h2 tag. Next create a form tag with class w3-container. Inside the form tag, wrap each label and its input field inside a paragraph. Add w3-input class to each input element. This creates a beautiful looking input form. 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>
    

    <div class="w3-container w3-yellow">
      <h2>Candidate Registeration</h2>
    </div>

    <form class="w3-container">
      <p>
      <label>Full Name</label>
      <input class="w3-input" type="text"></p>
      <p>
      <label>Age</label>
      <input class="w3-input" type="text"></p>
      <p>
      <label>City</label>
      <input class="w3-input" type="text"></p>
</form>
</body>
    
</html>

Download the code Try the code

Inputs as Cards

It is very simple to create Input form in the form of card. Simply wrap the input form created in the last example inside a div. Add w3-card-number class to the opening div tag of that div. 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>
    
<div class="w3-card-4" style="Width:50%">
    <div class="w3-container w3-yellow">
      <h2>Candidate Registeration</h2>
    </div>

        <form class="w3-container">
          <p>
          <label>Full Name</label>
          <input class="w3-input" type="text"></p>
          <p>
          <label>Age</label>
          <input class="w3-input" type="text"></p>
          <p>
          <label>City</label>
          <input class="w3-input" type="text"></p>
    </form>
    
</div>
</body>
    
</html>

Download the code Try the code

Input with Borders

You can also create input forms where each input field has a border around it. To do so add w3-border class to the input field. Similarly, to create rounded borders add w3-round class to the input field. The following example demonstrates this concept.

<!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>
    

    <div class="w3-container w3-yellow">
      <h2>Candidate Registeration</h2>
    </div>

    <form class="w3-container">
      <p>
      <label>Full Name</label>
      <input class="w3-input w3-border" type="text"></p>
      <p>
      <label>Age</label>
      <input class="w3-input w3-border w3-round" type="text"></p>
      <p>
      <label>City</label>
      <input class="w3-input w3-border w3-round-large" type="text"></p>
</form>
</body>
    
</html>

Download the code Try the code

Hover-able Inputs

You can create input fields whose color change upon mouse hover. To do so, simply add w3-hover-color class to the input field. 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>
    

    <div class="w3-container w3-yellow">
      <h2>Candidate Registeration</h2>
    </div>

    <form class="w3-container">
      <p>
      <label>Full Name</label>
      <input class="w3-input w3-hover-yellow" type="text"></p>
      <p>
      <label>Age</label>
      <input class="w3-input w3-border w3-hover-blue" type="text"></p>
      <p>
      <label>City</label>
      <input class="w3-input w3-border w3-hover-pink" type="text"></p>
</form>
</body>
    
</html>

Download the code Try the code

<<< W3CSS Image EffectsW3CSS Input Types >>>