Below are the various input types available for use in HTML:
<input type="button"><input type="checkbox"><input type="color"><input type="date"><input type="datetime-local"><input type="email"><input type="file"><input type="hidden"><input type="image"><input type="month"><input type="number"><input type="password"><input type="radio"><input type="range"><input type="reset"><input type="search"><input type="submit"><input type="tel"><input type="text"><input type="time"><input type="url"><input type="week">| Reminder: The default value for the type attribute is “text”. |
<input type=”text”> specifies a text input field for single-line entries.
Example
| <form> <label for=”fname”>First name:</label><br> <input type=”text” id=”fname” name=”fname”><br> <label for=”lname”>Last name:</label><br> <input type=”text” id=”lname” name=”lname”> </form> |
<input type=”password”> creates a field specifically for entering passwords.
Example
| <form> <label for=”username”>Username:</label><br> <input type=”text” id=”username” name=”username”><br> <label for=”pwd”>Password:</label><br> <input type=”password” id=”pwd” name=”pwd”> </form> |
<input type=”submit”> establishes a button designated for sending form data to a form-handler.
Typically, the form-handler comprises a server page with a script designed to handle input data.
The specific form-handler is indicated in the action attribute of the form.
Example
| <form action=”/action_page.php”> <label for=”fname”>First name:</label><br> <input type=”text” id=”fname” name=”fname” value=”John”><br> <label for=”lname”>Last name:</label><br> <input type=”text” id=”lname” name=”lname” value=”Doe”><br><br> <input type=”submit” value=”Submit”> </form> |
Should you exclude the value attribute of the submit button, the button will automatically receive a default text.
Example
| <form action=”/action_page.php”> <label for=”fname”>First name:</label><br> <input type=”text” id=”fname” name=”fname” value=”John”><br> <label for=”lname”>Last name:</label><br> <input type=”text” id=”lname” name=”lname” value=”Doe”><br><br> <input type=”submit”> </form> |
<input type=”reset”> creates a reset button that restores all form values to their default settings.
Example
| <form action=”/action_page.php”> <label for=”fname”>First name:</label><br> <input type=”text” id=”fname” name=”fname” value=”John”><br> <label for=”lname”>Last name:</label><br> <input type=”text” id=”lname” name=”lname” value=”Doe”><br><br> <input type=”submit” value=”Submit”> <input type=”reset” value=”Reset”> </form> |
<input type=”radio”> specifies a radio button, which allows the user to choose only one option from a limited selection.
Example
| <p>Choose your favorite Web language:</p> <form> <input type=”radio” id=”html” name=”fav_language” value=”HTML”> <label for=”html”>HTML</label><br> <input type=”radio” id=”css” name=”fav_language” value=”CSS”> <label for=”css”>CSS</label><br> <input type=”radio” id=”javascript” name=”fav_language” value=”JavaScript”> <label for=”javascript”>JavaScript</label> </form> |
<input type=”checkbox”> specifies a checkbox, enabling the user to select zero or more options from a finite set of choices.
Example
| <form> <input type=”checkbox” id=”vehicle1″ name=”vehicle1″ value=”Bike”> <label for=”vehicle1″> I have a bike</label><br> <input type=”checkbox” id=”vehicle2″ name=”vehicle2″ value=”Car”> <label for=”vehicle2″> I have a car</label><br> <input type=”checkbox” id=”vehicle3″ name=”vehicle3″ value=”Boat”> <label for=”vehicle3″> I have a boat</label> </form> |
<input type=”button”> specifies a button element.
Example
| <input type=”button” onclick=”alert(‘Hello World!’)” value=”Click Me!”> |
The <input type="color"> element is utilized for fields intended to capture color selections. Depending on browser capabilities, a color picker may appear within the input field.
Example
| <form> <label for=”birthday”>Birthday:</label> <input type=”date” id=”birthday” name=”birthday”> </form> |
You can employ the min and max attributes to impose limitations on dates as well.
Example
| <form> <label for=”datemax”>Enter a date before 1980-01-01:</label> <input type=”date” id=”datemax” name=”datemax” max=”1979-12-31″><br><br> <label for=”datemin”>Enter a date after 2000-01-01:</label> <input type=”date” id=”datemin” name=”datemin” min=”2000-01-02″> </form> |
The <input type="datetime-local"> designates a field for inputting both date and time, without specifying a time zone.
Depending on the browser’s support, a date picker may appear within the input field.
Example
| <form> <label for=”birthdaytime”>Birthday (date and time):</label> <input type=”datetime-local” id=”birthdaytime” name=”birthdaytime”> </form> |
The <input type="email"> is utilized for fields intended to capture email addresses.
Depending on browser support, the email address can undergo automatic validation upon submission.
Certain smartphones recognize the email type and append “.com” to the keyboard to facilitate email input.
Example
| <form> <label for=”email”>Enter your email:</label> <input type=”email” id=”email” name=”email”> </form> |
The <input type="image"> element designates an image to serve as a submit button.
The path to the image is indicated in the src attribute.
Example
| <form> <input type=”image” src=”img_submit.gif” alt=”Submit” width=”48″ height=”48″> </form> |
The <input type="file"> creates a field for selecting files and includes a “Browse” button for file uploads.
Example
| <form> <label for=”myfile”>Select a file:</label> <input type=”file” id=”myfile” name=”myfile”> </form> |
The <input type="hidden"> establishes an invisible input field, concealed from users.
Hidden fields enable web developers to include data that remains unseen and unalterable by users during form submission.
Such fields commonly store information regarding the database record that requires updating upon form submission.
Important: Although the value remains hidden from users within the page’s content, it is accessible (and editable) through any browser’s developer tools or the “View Source” feature. Avoid using hidden inputs as a security measure.
Example
| <form> <label for=”fname”>First name:</label> <input type=”text” id=”fname” name=”fname”><br><br> <input type=”hidden” id=”custId” name=”custId” value=”3487″> <input type=”submit” value=”Submit”> </form> |
The <input type=”month”> enables users to choose both a month and a year. Depending on browser compatibility, a date picker may appear within the input field.
Example
| <form> <label for=”quantity”>Quantity (between 1 and 5):</label> <input type=”number” id=”quantity” name=”quantity” min=”1″ max=”5″> </form> |
Below are some typical input limitations:
|
Attribute |
Description |
|
checked |
Indicates that an input field should be initially selected upon page loading (applicable to type=”checkbox” or type=”radio”). |
|
disabled |
Specifies that an input field should be inactive. |
|
max |
Specifies the upper limit for an input field’s value. |
|
maxlength |
Specifies the maximum character limit for an input field. |
|
min |
Specifies the lower limit for an input field’s value. |
|
pattern |
Specifies a regular expression for validating the input value. |
|
readonly |
Specifies that an input field is read-only and cannot be modified. |
|
required |
Specifies that an input field must be completed and cannot be left empty. |
|
size |
Specifies the width of an input field in terms of characters. |
|
step |
Specifies the allowable numeric intervals for an input field. |
|
value |
Specifies the initial value for an input field. |
In the upcoming chapter, you’ll delve deeper into input restrictions.
The following example demonstrates a numeric input field, allowing values between 0 and 100, with increments of 10. The default value is set to 30.
Example
|
<form> value=”30″> |
The <input type=”range”> element creates a slider control for selecting a numerical value, where the exact value may not be critical. By default, the range spans from 0 to 100. Nonetheless, you can specify limitations on acceptable numbers using the min, max, and step attributes.
Example
| <form> <label for=”vol”>Volume (between 0 and 50):</label> <input type=”range” id=”vol” name=”vol” min=”0″ max=”50″> </form> |
The <input type=”search”> element is employed for search fields, with its behavior akin to that of a standard text field.
Example
| <form> <label for=”gsearch”>Search Google:</label> <input type=”search” id=”gsearch” name=”gsearch”> </form> |
The <input type=”tel”> is utilized for input fields designated to hold telephone numbers.
Example
| <form> <label for=”phone”>Enter your phone number:</label> <input type=”tel” id=”phone” name=”phone” pattern=”[0-9]{3}-[0-9]{2}-[0-9]{3}”> </form> |
The <input type=”time”> permits users to choose a time without specifying a time zone.
Depending on the browser’s support, a time picker may appear within the input field.
Example
| <form> <label for=”appt”>Select a time:</label> <input type=”time” id=”appt” name=”appt”> </form> |
The <input type=”url”> is employed for input fields intended to hold URL addresses.
Depending on browser support, the URL field may undergo automatic validation upon submission.
Certain smartphones recognize the URL type and augment the keyboard with “.com” to facilitate URL input.
Example
| <form> <label for=”homepage”>Add your homepage:</label> <input type=”url” id=”homepage” name=”homepage”> </form> |
The <input type=”week”> enables users to select a week and year.
Depending on browser compatibility, a date picker may appear within the input field.
Example
| <form> <label for=”week”>Select a week:</label> <input type=”week” id=”week” name=”week”> </form> |