Styling form elements w3-input
In W3.CSS web development scripts, the w3-input class provides web developers with an easy way to style and use form elements such as text input empty boxes, password input fields, textareas for large information, dropdowns for multiple item selections, and buttons within a webpage-based form layout structure using the form input field element. The w3-input class helps a typical user today easily create a modern, clear, and fully responsive form with minimal CSS source code.
So, let’s look at how to style a commercial form design using the w3-input class in W3.CSS scripts.
Basic Text Input in W3.CSS.
In W3.CSS web development, the w3-input class is used to insert, style, or display standard input fields, such as text input, into a form layout. Web developers can apply additional form input class styles to improve the look and behavior of their basic forms.
Example of a basic text input in W3.CSS.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Let’s Explore Text Form Input Attributes in W3.CSS </title>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
</head>
<body>
<div class=”w3-container w3-margin-top”>
<label for=”name”>Employee Name</label>
<input class=”w3-input w3-border w3-round” type=”text” id=”name” placeholder=”Enter Employee Name”>
</div>
<div class=”w3-container” w3-margin-top”>
<label for=”age”>Employee Age</label>
<input class=”w3-input w3-border w3-round” type=”text” id=”age” placeholder=”Enter Employee Age”>
</div>
</body>
</html>
Explanation of a basic text input in W3.CSS.
- w3-input – This class applies basic styling to an input field for form text input elements.
- w3-border – This class adds a border around the input field for form text input elements.
- w3-round – This class rounds the corners of the input field for form text input elements.
Password form input in W3.CSS.
In W3.CSS form development, web developers can enable or style a form field for form password input by applying the w3-input form class. This behaves like a text input field in the current form, but it fixes the password text info content entered in the current form to be displayed as an asterisk star symbol.
Example of password form input in W3.CSS.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Let’s Explore Password Form Input in W3.CSS </title>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
</head>
<body>
<div class=”w3-container w3-margin-top”>
<label for=”name”>Employee Name</label>
<input class=”w3-input w3-border w3-round” type=”text” id=”name” placeholder=”Enter Name”>
</div>
<div class=”w3-container w3-margin-top”>
<label for=”password”>Password</label>
<input class=”w3-input w3-border w3-round” type=”password” id=”password” placeholder=”Enter password”>
</div>
</body>
</html>
Explanation of password form input in W3.CSS.
- type=”password” – This fixes existing forms to hide user-entered text information characters as dots, asterisks, or star symbols.
Textarea form input in W3.CSS.
In W3.CSS form development, web developers can use the <textarea> form input field element for multi-line form text input information (e.g., comments or description messages). You can also use the w3-input class for a similar form styling effect.
Example of a textarea form input in W3.CSS.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Let’s Explore Textarea Form Input in W3.CSS</title>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
</head>
<body>
<div class=”w3-container w3-margin-top”>
<label for=”description”>Description</label>
<textarea class=”w3-input w3-border w3-round” id=”description” rows=”4″ placeholder=”Enter your description”></textarea>
</div>
</body>
</html>
Explanation of a textarea Form input in W3.CSS.
- w3-input – This applies styling effects to the textarea input in your current form.
- rows=”4″ – This fixes the row (height) number of the current form textarea input.
- w3-border and w3-round – This class adds a border and rounded corner effect to the textarea form field for a smooth, modern-looking interface in form inputs.
Dropdown select input in W3.CSS.
In W3.CSS form development, web developers can create dropdown menus using the <select> form input method element with the w3-input class, which they can customize and style.
Example of a dropdown select in W3.CSS.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Let’s Explore Select Dropdown Form Input in W3.CSS </title>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
</head>
<body>
<div class=”w3-container w3-margin-top”>
<label for=”ev”>Select Your Ev</label>
<select class=”w3-input w3-border w3-round” id=”ev”>
<option value=”Tata Nexon EV”>Tata Nexon EV</option>
<option value=”Tata Punch EV”>Tata Punch EV</option>
<option value=”Tata Tiago EV”>Tata Tiago EV</option>
<option value=”MG Windsor EV”>MG Windsor EV</option>
<option value=”Mahindra BE 6 & XEV 9e”>Mahindra BE 6 & XEV 9e</option>
</select>
</div>
</body>
</html>
Explanation of a dropdown select in W3.CSS.
- w3-input – This adds the same input styling effect to the <select> dropdown item selection in this example.
- w3-border and w3-round – This class fixes the <select> dropdown item to have a modern display with a border and rounded corners.
Radio buttons and checkboxes in W3.CSS.
In W3.CSS form development, web developers can apply or style radio button and checkbox form input fields using the w3-check class to provide a consistent appearance and behavior.
Example of a radio button in W3.CSS.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Let’s Explore Radio Buttons Form Input in W3.CSS</title>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
</head>
<body>
<div class=”w3-container w3-margin-top”>
<label>Select Your Course:</label><br>
<input class=”w3-check” type=”radio” id=”machine learning” name=”course” value=”machine learning”>
<label for=”machine learning”>Machine Learning</label><br>
<input class=”w3-check” type=”radio” id=”Artificial Intelligence” name=”course” value=”Artificial Intelligence”>
<label for=”Artificial Intelligence”>Artificial Intelligence</label><br>
<input class=”w3-check” type=”radio” id=”fullstack development” name=”course” value=”fullstack development”>
<label for=”fullstack development”>Fullstack Development</label><br>
<input class=”w3-check” type=”radio” id=”nielit course” name=”course” value=”nielit course”>
<label for=”nielit course”>Nielit Course</label>
</div>
</body>
</html>
Explanation of a radio button in W3.CSS.
- w3-check – In this example, it applies styling to the effects and attributes of form radio button input fields, giving them a consistent modern design look.
- Form radio button input fields are connected to form input fields using the label for attribute, improving the accessibility of existing forms.
Checkbox form input in W3.CSS.
In W3.CSS form development, web developers can apply or style checkbox form input fields to existing webpages using the w3-check class, similar to radio buttons.
Example of a form checkbox input in W3.CSS.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Let’s Explore Checkboxes Form Input in W3.CSS</title>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
</head>
<body>
<div class=”w3-container w3-margin-top”>
<label for=”country”>Select Your Country:</label><br>
<input class=”w3-check” type=”checkbox” id=”India” name=”India” value=”yes”>
<label for=”India”>India</label>
<input class=”w3-check” type=”checkbox” id=”usa” name=”usa” value=”yes”>
<label for=”usa”>Usa</label>
<input class=”w3-check” type=”checkbox” id=”UK” name=”UK” value=”yes”>
<label for=”usa”>UK</label>
<input class=”w3-check” type=”checkbox” id=”China” name=”China” value=”yes”>
<label for=”usa”>China</label><br>
<label for=”membership”>Membership:</label>
<input class=”w3-check” type=”checkbox” id=”membership” name=”membership” value=”yes”>
<label for=”membership”>Yes, I want membership</label>
</div>
</body>
</html>
Explanation of a form checkbox input in W3.CSS.
- w3-check – The checkbox defined here in this example form styles the form input field to provide a more commercially friendly look and appearance.
Button form input in W3.CSS.
In W3.CSS form development, web developers can create form buttons using the w3-button class. Form input buttons can be used to effectively style buttons in forms. Web developers can apply and use multiple individual button styles simultaneously on their webpages. Form styles, such as primary, success, danger, etc., are all form styles.
Example of a submit button form input in W3.CSS.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Let’s Explore Multiple Button Form Input in W3.CSS</title>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
</head>
<body>
<div class=”w3-container w3-margin-top”>
<label for=”name”>Employee Name</label>
<input class=”w3-input w3-border w3-round” type=”text” id=”name” placeholder=”Enter Employee Name”>
</div>
<div class=”w3-container” w3-margin-top”>
<label for=”age”>Employee Age</label>
<input class=”w3-input w3-border w3-round” type=”text” id=”age” placeholder=”Enter Employee Age”>
</div>
<div class=”w3-container w3-margin-top”>
<button class=”w3-button w3-pink”>Submit Data </button>
</div>
</body>
</html>
Explanation of a submit button form input in W3.CSS.
- w3-button w3-blue – In this example, this creates a submit form button. It defines a pink button color with W3.CSS’s built-in styles.
- W3.CSS web developers can replace w3-indigo with other color classes, such as w3-green, w3-red, or w3-yellow, for multiple individual button colors.
A complete form layout structure in W3.CSS.
In W3.CSS form development, web developers can group multiple form input field elements and use the W3.CSS grid class to create multi-column or responsive form input fields on a webpage.
Example of a form with multiple inputs in W3.CSS.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Let’s Explore Multiple Responsive Form Input in W3.CSS </title>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
</head>
<body>
<div class=”w3-container w3-margin-top”>
<form action=”/submit_form”>
<div class=”w3-row-padding”>
<div class=”w3-half”>
<label for=”name”>Employee Name</label>
<input class=”w3-input w3-border w3-round” type=”text” id=”name” placeholder=”Enter Employee Name”>
</div>
<div class=”w3-half”>
<label for=”contact”>Contact Number</label>
<input class=”w3-input w3-border w3-round” type=”text” id=”contact” placeholder=”Enter Contact”>
</div>
<div class=”w3-half”>
<label for=”email”>Enter Email</label>
<input class=”w3-input w3-border w3-round” type=”email” id=”email” placeholder=”Enter email”>
</div>
</div>
<label>Select Your Medium:</label><br>
<input class=”w3-check” type=”radio” id=”hindi” name=”medium” value=”hindi”>
<label for=”hindi”>Hindi</label>
<input class=”w3-check” type=”radio” id=”english” name=”medium” value=”english”>
<label for=”english”>English</label><br>
<div class=”w3-row-padding w3-margin-top”>
<div class=”w3-half”>
<label for=”description”>Description</label>
<textarea class=”w3-input w3-border w3-round” id=”description” rows=”4″ placeholder=”Enter your Description”></textarea>
</div>
<div class=”w3-half”>
<label for=”membership”>Membership</label>
<input class=”w3-check” type=”checkbox” id=”membership” name=”membership” value=”yes”>
<label for=”membership”>Do You, want membership</label>
</div>
</div>
<button class=”w3-button w3-indigo w3-margin-top”>Submit Data </button>
</form>
</div>
</body>
</html>
Explanation of a form with multiple inputs in W3.CSS.
- w3-row-padding – This form class adds spacing between existing form input field elements.
- w3-half – This form class displays the form layout as two columns (each half the width) on large screens.
