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