Introduction
This Chapter demonstrates about the W3.CSS Inputs these are the information which action to be performed and following are the concepts covered in this chapter.
- Inputs & Its Types
Description
User can submit the inputs in any form which may contains the several information. The image below demonstrates the Input as a form which contains the information about the user after entering the all the details user can submit it as shown.
The code below demonstrates the input form as shown.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container w3-blue">
<h2>Input Form</h2>
</div>
<form class="w3-container">
<p>
<label>First Name</label>
<input class="w3-input" type="text"></p>
<p>
<label>Last Name</label>
<input class="w3-input" type="text"></p>
<p>
<label>Email</label>
<input class="w3-input" type="text"></p>
<button class="w3-btn w3-blue">Submit</button>
</form>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
W3.CSS Can have the several types of inputs By using these user can develop the web pages The inputs will contain several HTML elements following are the some of the input fields as shown.
- Input Labels
- Borders
- Color Inputs
Description
W3.CSS have the different types of inputs and which have the different types of labels to give the inputs in which some are the validated input with out any scripting tags. Following are some input labeled which are listed below.
Top and Bottom Labels
User can design Top and Bottom labels by using the w3-container class which is used to get the complete information about the user in the forms. The code below demonstrates to design the Top and Bottom Labels as shown.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container w3-blue">
<h2>Input Form</h2>
</div>
<form class="w3-container">
<p>
<input class="w3-input" type="text">
<label>Name</label>
</p>
<p>
<input class="w3-input" type="text">
<label>Father Name</label>
</p>
<p>
<input class="w3-input" type="text">
<label>Email</label>
</p>
<p>
<input class="w3-input" type="number">
<label>Contact Number</label>
</p>
</form>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Green labeled Forms
In W3.CSS User can get the Green colored Labels by using the w3-label class Green Label means The form by default gets Green color The code below demonstrates the Green Labelled Form as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>Input Form</h2>
</div>
<form class="w3-container">
<p>
<label class="w3-label">Name</label>
<input class="w3-input" type="text">
</p>
<p>
<label class="w3-label">Father Name</label>
<input class="w3-input" type="text">
</p>
<p>
<label class="w3-label">Contact Number</label>
<input class="w3-input" type="Number">
</p>
</form>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Labels Validating
In W3.CSS User can also validate labels while validating the Label Red are turned into green. In order to validate these labels user need to add w3-validate class to the w3-label class. The code below demonstrates the Labels Validating as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<form action="form.asp" class="w3-container">
<h2>Validating Labels</h2>
<p>Validating labels are red, and turns green when the input becomes valid. To make labels validating, add a w3-validate class to your w3-label class.</p>
<p>
<input class="w3-input" type="text" name="first" required>
<label class="w3-label w3-validate">Name</label>
</p>
<p>
<input class="w3-input" type="text" name="father" required>
<label class="w3-label w3-validate">Father Name</label>
</p>
<p>
<input class="w3-input" type="email" name="email" required>
<label class="w3-label w3-validate">Email</label>
</p>
<p>
<input class="w3-input" type="number" name="contact" required>
<label class="w3-label w3-validate">Contact Number</label>
</p>
<p>
<button class="w3-btn w3-teal">Submit</button>
</p>
</form>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Colored Labels
User can get any labels with colors by using the w3-text-colors in which user can use any type of colors based on the requirement. The code below demonstrates to color the labels as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<form class="w3-container w3-card-4" action="form.asp">
<h2 class="w3-text-purple">Input Form</h2>
<p>Use any of the w3-text-color classes to color your labels.</p>
<p>
<label class="w3-text-purple"><b>Name</b></label>
<input class="w3-input w3-border" name="first" type="text">
</p>
<p>
<label class="w3-text-purple"><b>Father Name</b></label>
<input class="w3-input w3-border" name="facther" type="text">
</p>
<p>
<label class="w3-text-purple"><b>Contact Number</b></label>
<input class="w3-input w3-border" name="number" type="number">
</p>
<p>
<button class="w3-btn w3-purple">Submit</button>
</p>
</form>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
- Top and Bottom Labels
- Green labeled Forms
- Labels Validating
- Colored Labels
Description
W3.CSS also have the several bordered inputs by these user can give the border input following are the some border inputs as shown below.
Bordered Input
User can also create the Bordered Inputs by adding the w3-border class The code below demonstrates to create border inputs as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<form class="w3-container w3-card-4 w3-light-grey">
<h2>Bordered Input</h2>
<p>Add the w3-border class to create bordered inputs.</p>
<p><label>Name</label>
<input class="w3-input w3-border" name="first" type="text"></p>
<p><label>Father Name</label>
<input class="w3-input w3-border" name="father" type="text"></p>
<p><label>Contact Number</label>
<input class="w3-input w3-border" name="contact" type="number"></p>
</form>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Rounded Borders
User can also creates the rounded borders by using the w3-round classes. The code below demonstrates the Rounded Borders as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<form class="w3-container w3-card-4 w3-light-grey">
<h2>Bordered Input</h2>
<p>Add the w3-border class to create bordered inputs.</p>
<p><label>Name</label>
<input class="w3-input w3-border w3-round" name="first" type="text"></p>
<p><label>Father Name</label>
<input class="w3-input w3-border w3-round-large" name="father" type="text"></p>
<p><label>Contact Number</label>
<input class="w3-input w3-border w3-round-xxlarge" name="contact" type="number"></p>
</form>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
- Bordered Input
- Rounded Borders
Description
In color Inputs User will also get the Hoverable colored inputs by adding the w3-hover-color classes which can change the background color while mouse moving over> The code below demonstrates to get the Hover color as shown.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<form class="w3-container">
<h2>Hoverable Inputs</h2>
<p>Move the mouse over the input fields:</p>
<p><input class="w3-input w3-hover-aqua" type="text"></p>
<p><input class="w3-input w3-border w3-hover-purple" type="text"></p>
<p><input class="w3-input w3-border w3-hover-blue" type="text"></p>
</form>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Animated Inputs
In W3.CSS User can also get the Animated Inputs by using the w3-animated-input which can transform the width of the input field to 100% when it is focused which shown in the below code.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<form class="w3-container">
<h2>Animated Inputs</h2>
<p>Which animated width of the input to 100% While mouse over the element.</p>
<input class="w3-input w3-animate-input" type="text" style="width:135px"><br>
<input class="w3-input w3-border w3-animate-input" type="text" style="width:30%">
</form>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Key Points
- In W3.CSS User can get the Bordered and border less outputs.
- Width can be transformed to 100% by using the animated Inputs.
- In W3.CSS user can validate with out any script.