HTML <input>: Everything you need to know about input element
{tocify} $title={Table of Contents}
<input type= “ ”> is a very necessary element in the form; input type is utilized to fill in the data (date, time, text, numeric, radio, checkbox, URL, email).
HTML Input Types
Here are the different input types you can use in HTML:
- Input Type Text
- Input Type Password
- Input Type Submit
- Input Type Reset
- Input Type Radio
- Input Type Checkbox
- Input Type Button
- Input Type Color
- Input Type Date
- Input Type Datetime-local
- Input Type Email
- Input Type Image
- Input Type File
- Input Type Hidden
- Input Type Month
- Input Type Number
- Input Type Range
- Input Type Search
- Input Type Tel
- Input Type Time
- Input Type Url
- Input Type week
Note: The default value of the type attribute is “text.”{alertInfo}
Input Type Text
<input type="text"> specifies a single-line text input field:
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>{codeBox}
This is how the HTML code above will be shown in a browser:
First name:
Last name:
Last name:
Input Type Password
<input type="password"> defines a password field:
Example:
<!DOCTYPE html><html><body><h2>Submit Password</h2><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></body></html>{codeBox}
This is how the HTML code above will be shown in a browser:
First name:
Last name:
Last name:
Input Type Submit
<input type="submit"> represents a button for submitting form data to a form-handler.
The form handler is generally a server page with a script for processing input data.
The form handler is defined in the form's action attribute:
Example:
<!DOCTYPE html><html><body><h2>Submit Button</h2><p>The <strong>input type="submit"</strong> defines a button for submitting form data to a form-handler:</p><form action="/action_page.html"><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><p>If you click "Submit", the form-data will be sent to a page called "/action_page.html".</p></body></html>{codeBox}
This is how the HTML code above will be shown in a browser:
First name:
Last name:
Last name:
If you omit the submit button's value attribute, the button will fetch a default text:
<!DOCTYPE html><html><body><form action="/action_page.html"><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></body></html>{codeBox}
Input Type Reset
<input type="reset"> represents a reset button that will reset all form values to their default values:
Example:
<!DOCTYPE html><html><body><h2>Reset Button</h2><p>The <strong>input type="reset"</strong> defines a reset button that resets all form values to their default values:</p><form action="/action_page.html"><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"> </form><p>If you change the input values and then click the "Reset" button, the form-data will be reset to the default values.</p></body></html>{codeBox}
This is how the HTML code above will be shown in a browser:
First name:
Last name:
Last name:
If you modify the input values & then click the "Reset" button, the form-data will be reset to the default values.{alertSuccess}
Input Type Radio
<input type="radio"> represent a radio button.
Radio buttons allow a user to pick ONLY ONE of a limited number of choices:
Example:
<!DOCTYPE html><html><body><h2>Radio Buttons</h2><p>The <strong>input type="radio"</strong> defines a radio button:</p><p>Choose your favorite Web language:</p><form action="/action_page.html"><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><br><br><input type="submit" value="Submit"> </form></body></html>{codeBox}
This is how the HTML code above will be shown in a browser:
Input Type Checkbox
<input type="checkbox"> represents a checkbox.
checkbox allow a user to select ZERO or MORE options of a limited number of choices:
Example:
<!DOCTYPE html><html><body><h2>Checkboxes</h2><p>The <strong>input type="checkbox"</strong> defines a checkbox:</p><form action="/action_page.html"><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><br><br><input type="submit" value="Submit"> </form></body></html>{codeBox}
This is how the HTML code above will be shown in a browser:
Input Type Button
<input type="Button"> represents a button.
checkbox allow a user to select ZERO or MORE options of a limited number of choices:
Example:
<!DOCTYPE html><html><body><h2>Input Button</h2><input type="button" onclick="alert('Hello World!')" value="Click Me!"> </body></html>{codeBox}
This is how the HTML code above will be shown in a browser:
Input Type Color
The <input type="color"> is utilised for input fields that should have a color.
A colour picker can appear in the input field, relying on browser support.
Example:
<!DOCTYPE html><html><body><h2>Show a Color Picker</h2><p>The <strong>input type="color"</strong> is used for input fields that should contain a color.</p><form action="/action_page.html"><label for="favcolor">Select your favorite color:</label><input type="color" id="favcolor" name="favcolor" value="#ff0000"><input type="submit" value="Submit"> </form><p><b>Note:</b> type="color" is not supported in Internet Explorer 11 or Safari 9.1 (or earlier).</p></body></html>{codeBox}
Input Type Date
The <input type="date"> is utilised for input fields that should include a date.
A date picker can show up in the input field by relying on browser support.
Example:
<!DOCTYPE html><html><body><h2>Date Field</h2><p>The <strong>input type="date"</strong> is used for input fields that should contain a date.</p><form action="/action_page.html"><label for="birthday">Birthday:</label><input type="date" id="birthday" name="birthday"><input type="submit" value="Submit"> </form><p><strong>Note:</strong> type="date" is not supported in Internet Explorer 11 or prior Safari 14.1.</p></body></html>{codeBox}
You can even utilise the min and max attributes to add restrictions to dates:
Example:
<!DOCTYPE html><html><body><h2>Date Field Restrictions</h2><p>Use the min and max attributes to add restrictions to dates:</p><form action="/action_page.html"><label for="datemin">Enter a date after 2000-01-01:</label><input type="date" id="datemin" name="datemin" min="2000-01-02"><br><br><label for="datemax">Enter a date before 1980-01-01:</label><input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br><input type="submit" value="Submit"> </form><p><strong>Note:</strong> type="date" is not supported in Internet Explorer 11 or prior Safari 14.1.</p></body></html>{codeBox}
Input Type Datetime-local
The <input type="datetime-local"> represents a date and time input field, with no time zone.
A date picker can show up in the input field by relying on browser support.
Example:
<!DOCTYPE html><html><body><h2>Local Date Field</h2><p>The <strong>input type="datetime-local"</strong> specifies a date and time input field, with no time zone.</p><form action="/action_page.html"><label for="birthdaytime">Birthday (date and time):</label><input type="datetime-local" id="birthdaytime" name="birthdaytime"><input type="submit" value="Submit"> </form><p><strong>Note:</strong> type="datetime-local" is not supported in Internet Explorer 11 or prior Safari 14.1.</p></body></html>{codeBox}
Input Type Email
The <input type="email"> is utilized for input fields that should have an e-mail address.
The e-mail address can be automatically validated when submitted, depending on browser support.
Some smartphones identify the email type, and add ".com" to the keyboard to match email input.
Example:
<!DOCTYPE html><html><body><h2>Email Field</h2><p>The <strong>input type="email"</strong> is used for input fields that should contain an e-mail address:</p><form action="/action_page.html"><label for="email">Enter your email:</label><input type="email" id="email" name="email"><input type="submit" value="Submit"> </form></body></html>{codeBox}
Input Type Image
The <input type="image"> represents an image as a submit button.
The path to the image is selected in the src attribute.
Example:
<!DOCTYPE html><html><body><h2>Display an Image as the Submit button</h2><form action="/action_page.html"><label for="fname">First name: </label><input type="text" id="fname" name="fname"><br><br><label for="lname">Last name: </label><input type="text" id="lname" name="lname"><br><br><input type="image" src="img_submit.gif" alt="Submit" width="48" height="48"> </form><p><b>Note:</b> The input type="image" sends the X and Y coordinates of the click that activated the image button.</p></body></html>{codeBox}
Input Type File
The <input type="File"> represents a file-select field and a "Browse" button for file uploads.
Example:
<!DOCTYPE html><html><body><h1>File upload</h1><p>Show a file-select field which allows a file to be chosen for upload:</p><form action="/action_page.html"><label for="myfile">Select a file:</label><input type="file" id="myfile" name="myfile"><br><br><input type="submit" value="Submit"> </form></body></html>{codeBox}
Input Type Hidden
The <input type="hidden"> represents a hidden input field (not observable by a user).
A hidden field lets web developers include data that users cannot see or modify when a form is submitted.
A hidden field usually stores what database record needs to be updated when the form is submitted.
Note: While the value is not shown to the user in the page's content, it is observable (and can be edited) using any browser's developer tools or “View Source” functionality. Do not utilize hidden inputs as a form of security!
Example:
<!DOCTYPE html><html><body><h1>A Hidden Field (look in source code)</h1><form action="/action_page.html"><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><p><strong>Note:</strong> The hidden field is not shown to the user, but the data is sent when the form is submitted.</p></body></html>{codeBox}
Input Type Month
The <input type="month"> lets the user pick a month and year.
A date picker can show up in the input field by relying on browser support.
Example:
<!DOCTYPE html><html><body><h2>Month Field</h2><p>The <strong>input type="month"</strong> allows the user to select a month and year.</p><form action="/action_page.html"><label for="bdaymonth">Birthday (month and year):</label><input type="month" id="bdaymonth" name="bdaymonth"><input type="submit" value="Submit"> </form><p><strong>Note:</strong> type="month" is not supported in Firefox, Safari, or Internet Explorer 11.</p></body></html>{codeBox}
Input Type Number
The <input type="number"> represents a numeric input field.
You can even set restrictions on what numbers are accepted.
The following example displays a numeric input field, where you can enter a value from 1 to 5:
Example:
<!DOCTYPE html><html><body><h2>Number Field</h2><p>The <strong>input type="number"</strong> defines a numeric input field.</p><p>You can use the min and max attributes to add numeric restrictions in the input field:</p><form action="/action_page.html"><label for="quantity">Quantity (between 1 and 5):</label><input type="number" id="quantity" name="quantity" min="1" max="5"><input type="submit" value="Submit"> </form></body></html>{codeBox}
INPUT RESTRICTIONS
Here is a list of some common input restrictions:
| Attribute | Description |
|---|---|
| checked | Specifies that an input field should be pre-selected when the page loads (for type="checkbox" or type="radio") |
| disabled | Specifies that an input field should be disabled |
| max | Specifies the maximum value for an input field |
| maxlength | Specifies the maximum number of character for an input field |
| min | Specifies the minimum value for an input field |
| pattern | Specifies a regular expression to check the input value against |
| readonly | Specifies that an input field is read only (cannot be changed) |
| required | Specifies that an input field is required (must be filled out) |
| size | Specifies the width (in characters) of an input field |
| step | Specifies the legal number intervals for an input field |
| value | Specifies the default value for an input field |
You will know more about input restrictions in the next chapter.
The following example shows a numeric input field, where you can enter a value from 0 to 100, in steps of 10. The default value is 30:
Example:
<!DOCTYPE html><html><body><h2>Numeric Steps</h2><p>Depending on browser support: Fixed steps will apply in the input field.</p><form action="/action_page.html"><label for="quantity">Quantity:</label><input type="number" id="quantity" name="quantity" min="0" max="100" step="10" value="30"><input type="submit" value="Submit"> </form></body></html>{codeBox}
Input Type Range
The <input type="range"> represents a control for entering a number whose exact value is not essential (like a slider control).
The default range is 0 to 100. However, you can put restrictions on what numbers are accepted with the min, max, and step attributes:
Example:
<!DOCTYPE html><html><body><h2>Range Field</h2><p>Depending on browser support: The input type "range" can be displayed as a slider control.</p><form action="/action_page.html" method="get"><label for="vol">Volume (between 0 and 50):</label><input type="range" id="vol" name="vol" min="0" max="50"><input type="submit" value="Submit"> </form></body></html>{codeBox}
Input Type Search
The <input type="search"> is utilised for search fields (a search field acts like a regular text field).
Example:
<!DOCTYPE html><html><body><h2>Search Field</h2><p>The <strong>input type="search"</strong> is used for search fields (behaves like a regular text field):</p><form action="/action_page.html"><label for="gsearch">Search Google:</label><input type="search" id="gsearch" name="gsearch"><input type="submit" value="Submit"> </form></body></html>{codeBox}
Input Type Tel
The <input type="Tel"> is utilised for search fields that should have a telephone number.
Example:
<!DOCTYPE html><html><body><h1>Show a Time Input Control</h1><p>The <strong>input type="time"</strong> allows the user to select a time (no time zone):</p><p>If the browser supports it, a time picker pops up when entering the input field.</p><form action="/action_page.html"><label for="appt">Select a time:</label><input type="time" id="appt" name="appt"><input type="submit" value="Submit"> </form><p><strong>Note:</strong> type="time" is not supported in Internet Explorer 11 or prior Safari 14.1.</p></body></html>{codeBox}
Input Type Time
The <input type="Time"> lets the user select a time (no time zone).
Depending on browser support, a time picker can appear in the input field.
Example:
<!DOCTYPE html><html><body><h1>Show a Time Input Control</h1><p>The <strong>input type="time"</strong> allows the user to select a time (no time zone):</p><p>If the browser supports it, a time picker pops up when entering the input field.</p><form action="/action_page.html"><label for="appt">Select a time:</label><input type="time" id="appt" name="appt"><input type="submit" value="Submit"> </form><p><strong>Note:</strong> type="time" is not supported in Internet Explorer 11 or prior Safari 14.1.</p></body></html>{codeBox}
Input Type Url
The <input type="url"> is utilized for input fields that should have a URL address.
The URL field can be automatically validated when submitted, depending on browser support.
Some smartphones determinate the URL type and adds ".com" to the keyboard to match the URL input.
Example:
<!DOCTYPE html><html><body><h1>Display a URL Input Field</h1><p>The <strong>input type="url"</strong> is used for input fields that should contain a URL address:</p><form action="/action_page.html"><label for="homepage">Add your homepage:</label><input type="url" id="homepage" name="homepage"><input type="submit" value="Submit"> </form></body></html>{codeBox}
Input Type week
The <input type="week"> lets the user select week and year..
A date picker can show up in the input field by relying on browser support.
Example:
<!DOCTYPE html><html><body><h1>Display a Week Input Control</h1><p>The <strong>input type="week"</strong> allows the user to select a week and year. </p><p>If the browser supports it, a date picker pops up when entering the input field.</p><form action="/action_page.html"><label for="week">Select a week:</label><input type="week" id="week" name="week"><input type="submit" value="Submit"> </form><p> <strong>Note:</strong> type="week" is not supported in Firefox, Safari or Internet Explorer 11. </p></body></html>{codeBox}
Conclusion:
Friends, according to my expertise, I have written complete information to help you with “HTML Input Types.” If this post is favourable for you or not, please tell me by commenting.
If you liked this post, do not forget to share it with your friends so they can get information about it.
You can ask us through comments if you still have questions or doubts, I will answer all your questions, and you can contact us for more information.
Please tell us through the comment section if you think we miss anything.
