In this part and in the next one (HTML Elements – Part 3) we are going to talk about the elements we may have inside a form. Due to its versatility, the input element requires a bit of time more than others to be discussed. In this part, then, we are being focused only on the input element and in its different forms (or types 🙂 as we are going to see).
We already have made use of the <input> tag in previous examples to explain some other tag / element. The input element can represent several kind of objects, due to the fact that its type attribute can have several values.
There are more than 20 kind of input, but there is no need to know all of them. We are going to see just the most common:
Text
This input type is used to get a single-line text input field and is the default attribute for the input element.
<form method="GET" action="./form_handler.php">
<label for="address">Address</label>
<input id="address" name="address" type="text">
</form>The id attribute is needed to associate the text input with its label.
Button
This button is meant to execute an action and has no default behavior. It can have client-side scripts associated with the element’s events that are triggered when events occur.
Example:
<form method="GET" action="./form_handler.php">
<input id="inputBtn" type="button" onclick="changeButton();" value="Click Me!">
</form>
<script>
const inputBtn = document.getElementById("inputBtn");
function changeButton() {
inputBtn.style.backgroundColor = "black";
inputBtn.style.color = "lightgreen";
}
</script>As you can see, colors of the button change when clicked, but other tasks can be executed often using JavaScript code.
Checkbox
This input type is used to get a checkbox represented by a square box that is ticked when activated. We use this input type in order that the user can select one or more of the given options.
Example:
<form method="GET" action="./form_handler.php">
<p><b>Select animals you like</b></p>
<input id="bee" name="bee" type="checkbox" value="bee">
<label for="bee">Bee</label><br>
<input id="lizard" name="lizard" type="checkbox" value="lizard">
<label for="lizard">Lizard</label><br>
<input id="scorpion" name="scorpion" type="checkbox" value="scorpion">
<label for="scorpion">Scorpion</label><br>
<input id="snake" name="snake" type="checkbox" value="snake">
<label for="snake">Snake</label><br>
<input id="turtle" name="turtle" type="checkbox" value="turtle">
<label for="turtle">Turtle</label>
</form>Select animals you like
Color
This input type is used to select a color:
<form method="GET" action="./form_handler.php">
<label for="color">Select color</label>
<input id="color" name="color" type="color">
</form>Date
This input type is used when the user is required to choose a date, especially when there’s the need to get that date in a standard format. A date can be selected either by typing the day, month and year or hitting the calendar icon and then using the date picker that shows up.
Example:
<form method="GET" action="./form_handler.php">
<label for="intviewDate">Select date</label>
<input id="intviewDate" name="intviewDate" type="date">
</form>This input type is used when the user is required to insert their email address. This input type makes sure that the email address has a proper format: for instance, if the @ misses an error message would pop up.
Example:
<form method="GET" action="./form_handler.php">
<label for="userEmail">E-mail Address</label>
<input id="userEmail" name="userEmail" type="email">
</form>File
This input type is used to let the user upload a file. Clicking on the input element a window shows up to browse through the user directories.
Example:
<form method="GET" action="./form_handler.php">
<label for="userFile">Select a file:</label><br><br>
<input id="userFile" name="userFile" type="file">
</form>Image
This input type is used to set an image for a submit button through the src attribute. Clicking on the button, not only user data are submitted, but also the cursor coordinates at the moment of the click.
Example:
<form method="GET" action="./form_handler.php">
<label for="first_name">First Name</label>
<input id="first_name" name="first_name" type="text"><br><br>
<label for="last_name">Last Name</label>
<input id="last_name" name="last_name" type="text"><br><br>
<input type="image" src="send-button.png" alt="Submit" width="48" height="48">
</form>Number
This input type is used to let the user choose a number within or not a range. The range is set by the min and max attributes.
Example:
<form method="GET" action="./form_handler.php">
<label for="vote">Vote</label>
<input id="vote" name="vote" type="number" min="1" max="5">
</form>Password
This input type is used to insert a password without showing it.
Example:
<form method="GET" action="./form_handler.php">
<label for="password">Password</label>
<input id="password" name="password" type="password">
</form>Radio
This input type is used to let the user choose one of the listed options.
Example:
<form method="GET" action="./form_handler.php">
<p>Select your favorite School Subject</p>
<input id="english" name="subject" type="radio" value="english">
<label for="english">English</label>
<input id="math" name="subject" type="radio" value="math">
<label for="math">Math</label>
<input id="history" name="subject" type="radio" value="history">
<label for="history">History</label>
<input id="physics" name="subject" type="radio" value="physics">
<label for="physics">Physics</label>
<input id="chemistry" name="subject" type="radio" value="chemistry">
<label for="chemistry">Chemistry</label>
<input id="economy" name="subject" type="radio" value="economy">
<label for="economy" style="margin-right: 35px;">Economy</label>
</form>Select your favorite School Subject
Range
This input type is used to let the user select a number without care of its accuracy. Default range goes from 0 to 100, but it is possible to change it through the min, max and step attributes.
Example:
<form method="GET" action="./form_handler.php">
<label for="vol">Brightness</label>
<input id="bright" name="bright" type="range" min="0" max="100" onchange="document.getElementById('bright_value').innerText=document.getElementById('bright').value + '%'">
<label id="bright_value">50%</label>
</form>50%
Reset
This input type is used to replace all inputs content with their default values.
Example:
<form method="GET" action="./form_handler.php">
<label for="fullName">Full Name</label><br>
<input id="fullName" name="fullName" type="text" value="Timothy John Berners-Lee"><br>
<label for="profession">Profession</label><br>
<input id="profession" name="profession" type="text" value="Computer Scientist"><br><br>
<input type="submit" value="Submit">
<input type="reset" value="Reset" onclick="document.getElementById('fullName').value='Timothy John Berners-Lee'; document.getElementById('profession').value='Computer Scientist';">
</form>Submit
This input type is used to have a button for submitting form data to a form-handler, which usually is a server page with a script for processing input data. This page is indicated by the action attribute.
Example:
<form method="GET" action="./form_handler.php">
<label for="fname">First Name</label>
<input id="fname" name="fname" type="text"><br><br>
<label for="lname">Last Name</label>
<input id="lname" name="lname" type="text"><br><br>
<input type="submit" value="Send">
</form>Check the next article to know more about elements 🚀.
