- Introduction To HTML
- HTML Elements And Tags
- HTML Basic Examples
- HTML Elements
- HTML Attributes
- HTML Headings
- HTML Paragraphs
- HTML Styles
- HTML Formatting Elements
- HTML Quotation
- HTML Comments
- HTML Colors
- HTML Styles - CSS
- HTML Links
- HTML Images
- HTML Tables
- HTML Lists
- HTML Block And Inline
- HTML Class
- HTML Id
- HTML Iframes
- HTML JavaScript
- HTML File Paths
- HTML Head
- HTML Layout
- HTML Responsive
- HTML Computer Code
- HTML Semantic
- HTML Forms
- HTML Form Attributes
- HTML Form Elements
- HTML Input Types
- HTML Input Attributes
- HTML Input Form Attributes
- HTML Canvas
- HTML SVG
- HTML Media
- HTML Video
- HTML Audio
- HTML YouTube
HTML Input Types
Input Type Datetime-local
The <input type="datetime-local"> attribute identifies a date and time input field without a time zone.
Depending on browser support, the input field may display a date picker.
<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.php">
<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 Firefox, Safari or Internet Explorer 12 (or earlier).</p>
</body>
</html>
Input Type Email
The <input type="email"> is utilised for fields that require an email address.
Depending on browser support, the submitted email address may be validated automatically.
Some smartphones detect the email type and add ".com" to the keyboard to accommodate email input.
<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.php">
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
<input type="submit" value="Submit">
</form>
</body>
</html>
Input Type File
The <input type="file"> element specifies a file-select field and "Browse" button for uploading files.
<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.php">
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Input Type Hidden
The <input type="hidden"> element specifies a hidden input field (not visible to a user).
A hidden field enables web developers to include data that cannot be viewed or edited by users after a form has been submitted.
Typically, a hidden field indicates which database record must be updated when a form is submitted.
Note: Although the value is not displayed to the user in the page's content, it is visible (and can be edited) using the developer tools or "View Source" feature of any web browser. Do not utilise hidden inputs as a security measure!
<html>
<body>
<h1>A Hidden Field (look in source code)</h1>
<form action="/action_page.php">
<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>
Input Type Month
The <input type="month"> field permits the selection of a month and year.
Depending on browser support, the input field may display a date picker.
<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.php">
<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 (or earlier).</p>
</body>
</html>
Input Type Number
The <input type="number"> element defines a field for numerical input.
You can also set restrictions on the accepted numbers.
The following example displays a numeric input field that accepts numbers between 1 and 5:
<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.php">
<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>
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 learn more about input restrictions in the next chapter.
<html>
<body>
<h2>Numeric Steps</h2>
<p>Depending on browser support: Fixed steps will apply in the input field.</p>
<form action="/action-page.php">
<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>
Input Type Range
The <input type="range"> element defines a control for entering a number whose precise value is irrelevant (like a slider control). Default range is 0 to 100. However, with the min, max, and step attributes, you can set restrictions on which numbers are accepted:
<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.php" 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>
Input Type Search
<input type="search"> is utilised for search field inputs (a search field behaves like a regular text field).
<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.php">
<label for="gsearch">Search Google:</label>
<input type="search" id="gsearch" name="gsearch">
<input type="submit" value="Submit">
</form>
</body>
</html>
Input Type Tel
The <input type="tel"> is utilised for fields that require a telephone number.
<html>
<body>
<h2>Telephone Field</h2>
<p>The <strong>input type="tel"</strong> is used for input fields that should contain a telephone number:</p>
<form action="/action-page.php">
<label for="phone">Enter a phone number:</label><br><br>
<input type="tel" id="phone" name="phone" placeholder="123-45-678" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" required><br><br>
<small>Format: 123-45-678</small><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Input Type Time
The <input type="time"> enables the user to choose a time (no time zone).
Depending on browser support, the input field may display a time picker.
<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.php">
<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 Safari or Internet Explorer 12 (or earlier).</p>
</body>
</html>
Input Type Url
The <input type="url"> element is used for input fields that require a URL.
Depending on browser support, the URL field may be validated automatically upon submission.
Some smartphones detect the url type and automatically add ".com" to the keyboard to match url input.
<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.php">
<label for="homepage">Add your homepage:</label>
<input type="url" id="homepage" name="homepage">
<input type="submit" value="Submit">
</form>
</body>
</html>
Input Type Week
The <input type="week"> field enables the user to choose a week and year.
Depending on browser support, the input field may display a date picker.
<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.php">
<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 (or earlier).</p>
</body>
</html>
HTML Input Types
Here are the various input types supported by 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">
Input Type Text
<input type="text">
defines a text input field with a single line:
<html>
<body>
<h2>Text field</h2>
<p>The <strong>input type="text"</strong> defines a one-line text input field:</p>
<form action="/action-page.php">
<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"><br><br>
<input type="submit" value="Submit">
</form>
<p>Note that the form itself is not visible.</p>
<p>Also note that the default width of a text field is 20 characters.</p>
</body>
</html>
Input Type Password
<input type="password"> specifies a password input field.
<html>
<body>
<h2>Password field</h2>
<p>The <strong>input type="password"</strong> defines a password field:</p>
<form action="/action-page.php">
<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"><br><br>
<input type="submit" value="Submit">
</form>
<p>The characters in a password field are masked (shown as asterisks or circles).</p>
</body>
</html>
Input Type Submit
<input type="submit"> identifies a button used to submit form data to a form handler.
Typically, the form-handler is a server page containing a script for processing input data.
The form's action attribute specifies the form-handler:
<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.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>
<p>If you click "Submit", the form-data will be sent to a page called "/action-page.php".</p>
</body>
</html>
Input Type Reset
<input type="reset"> defines a button that resets all form values to their defaults.
<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.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">
</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>
Input Type Radio
The <input type="radio"> element defines a radio button.
Radio buttons enable users to choose ONE of a limited number of options.
<html>
<body>
<h2>Radio Buttons</h2>
<p>The <strong>input type="radio"</strong> defines a radio button:</p>
<form action="/action_page.php">
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
<input type="radio" id="other" name="gender" value="other">
<label for="other">Other</label><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Input Type Checkbox
The <input type="checkbox"> element defines a checkbox.
Checkboxes allow users to select ZERO or MORE options from a limited selection.
<html>
<body>
<h2>Checkboxes</h2>
<p>The <strong>input type="checkbox"</strong> defines a checkbox:</p>
<form action="/action-page.php">
<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>
Input Type Button
The following elements define a button:
<input type="button">
<html>
<body>
<h2>Input Button</h2>
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
</body>
</html>
Input Type Color
The <input type="color"> is used for fields that require a colour value.
Depending on browser support, the input field may display a colour picker.
<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.php">
<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>
Input Type Date
The <input type="date"> is used for fields that require a date value.
Depending on browser support, the input field may display a date picker.
<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.php">
<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 Safari or Internet Explorer 11 (or earlier).</p>
</body>
</html>
Products
Partner
Copyright © RVR Innovations LLP 2024 | All rights reserved - Mytat.co is the venture of RVR Innovations LLP