- Introduction To HTML
- HTML Editors
- 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 Attributes
The Value Attribute
The input value attribute identifies an input field's initial value:
<html>
<body>
<h1>The input value attribute</h1>
<p>The value attribute specifies an initial value for an input field:</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>
</body>
</html>
The Readonly Attribute
The input readonly attribute specifies a read-only input field.
A read-only input field is unmodifiable (however, a user can tab to it, highlight it, and copy the text from it).
The value of a read-only input field will be transmitted when the form is submitted!
<html>
<body>
<h1>The input readonly attribute</h1>
<p>The readonly attribute specifies that an input field should be read-only (cannot be changed):</p>
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John" readonly><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>
</body>
</html>
The Disabled Attribute
The input disabled attribute indicates whether an input field is disabled.
A disabled input field is inaccessible and cannot be clicked.
The value of a disabled input field will not be transmitted when the form is submitted!
<html>
<body>
<h1>The input disabled attribute</h1>
<p>The disabled attribute specifies that an input field should be disabled (unusable and un-clickable):</p>
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John" disabled><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>
</body>
</html>
The Size Attribute
The input size attribute specifies the visible width of an input field in characters.
The default size value is 20.
The size attribute is compatible with the text, search, tel, url, email, and password input types.
<html>
<body>
<h1>The input size attribute</h1>
<p>The size attribute specifies the width (in characters) of an input field:</p>
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" size="50"><br>
<label for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin" size="4"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
The Maxlength Attribute
The input maxlength attribute indicates the maximum number of allowed characters in an input field.
When a maxlength is specified, the input field will only accept the specified number of characters. Nonetheless, this attribute provides no feedback. Therefore, to alert the user, JavaScript code is required.
<html>
<body>
<h1>The input maxlength attribute</h1>
<p>The maxlength attribute specifies the maximum number of characters allowed in an input field:</p>
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" size="50"><br>
<label for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin" maxlength="4" size="4"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
The Min And Max Attributes
The minimum and maximum values for an input field are specified by the input min and max attributes.
min and max are compatible with the following input types: number, range, date, datetime-local, month, and week.
Use the max and min attributes in conjunction to define a range of valid values.
<html>
<body>
<h1>The input min and max attributes</h1>
<p>The min and max attributes specify the minimum and maximum values for an input element.</p>
<form action="/action_page.php">
<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"><br><br>
<label for="quantity">Quantity (between 1 and 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
The Multiple Attribute
The input multiple attribute indicates that the user may enter multiple values into an input field.
The multiple attribute is compatible with email and file input types.
<html>
<body>
<h1>The input multiple attributes</h1>
<p>The multiple attribute specifies that the user is allowed to enter more than one value in an input field.</p>
<form action="/action_page.php">
<label for="files">Select files:</label>
<input type="file" id="files" name="files" multiple><br><br>
<input type="submit" value="Submit">
</form>
<p>To select multiple files, hold down the CTRL or SHIFT key while selecting.</p>
</body>
</html>
The Pattern Attribute
The input pattern attribute specifies a regular expression against which the value of the input field is compared when the form is submitted.
The pattern attribute is compatible with the input types text, date, search, url, tel, email, and password.
Use the global title attribute to provide the user with a description of the pattern.
In our JavaScript tutorial, you can learn more about regular expressions.
<html>
<body>
<h1>The input pattern attribute</h1>
<p>The pattern attribute specifies a regular expression that the input element's value is checked against.</p>
<form action="/action_page.php">
<label for="country_code">Country code:</label>
<input type="text" id="country_code" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code"><br><br>
<input type="submit" value="Submit">
</form>
<p><strong>Note:</strong> The pattern attribute of the input tag is not supported in Safari 10 (or earlier).</p>
</body>
</html>
The Placeholder Attribute
The input placeholder attribute specifies a brief description of an input field's expected value (a sample value or a short description of the expected format).
Prior to the user entering a value, the short hint is displayed in the input field.
This attribute is compatible with the following input types: text, search, url, tel, email, and password.
<html>
<body>
<h1>The input placeholder attribute</h1>
<p>The placeholder attribute specifies a short hint that describes the expected value of an input field.</p>
<form action="/action_page.php">
<label for="phone">Enter a phone number:</label>
<input type="tel" id="phone" name="phone" placeholder="123-45-678" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
The Required Attribute
The input required attribute specifies that a form input field must be completed prior to submission.
The required attribute works with text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file input types.
<html>
<body>
<h1>The input required attribute</h1>
<p>The required attribute specifies that an input field must be filled out before submitting the form.</p>
<form action="/action_page.php">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<input type="submit" value="Submit">
</form>
<p><strong>Note:</strong> The required attribute of the input tag is not supported in Safari prior version 10.1.</p>
</body>
</html>
The Step Attribute
The input step attribute indicates the permissible number intervals for an input field.
If step="3", then legal numbers could include -3, 0, 3, 6, etc.
This attribute, along with the max and min attributes, can be used to create a range of legal values.
The step attribute is compatible with the input types number, range, date, datetime-local, month, time, and week.
<html>
<body>
<h1>The input step attribute</h1>
<p>The step attribute specifies the legal number intervals for an input element.</p>
<form action="/action_page.php">
<label for="points">Points:</label>
<input type="number" id="points" name="points" step="3">
<input type="submit" value="Submit">
</form>
</body>
</html>
The Autofocus Attribute
The input autofocus attribute specifies that a field should acquire focus automatically when the page loads.
<html>
<body>
<h1>The input autofocus attribute</h1>
<p>The autofocus attribute specifies that the input field should automatically get focus when the page loads.</p>
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" autofocus><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
The Height And Width Attributes
The input height and width attributes define the size of an <input type="image"> element.
<html>
<body>
<h1>The input height and width attributes</h1>
<p>The height and width attributes specify the height and width of an input type="image" element.</p>
<form action="/action_page.php">
<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>
The List Attribute
The input list attribute identifies a datalist> element containing predefined options for an <input> element.
<html>
<body>
<h1>The input list attribute</h1>
<p>The list attribute refers to a datalist element that contains pre-defined options for an input element.</p>
<form action="/action_page.php">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit" value="Submit">
</form>
<p><b>Note:</b> The datalist tag is not supported in Safari 12.0 (or earlier).</p>
</body>
</html>
The Autocomplete Attribute
The input autocomplete attribute specifies whether autocompletion should be enabled or disabled for a form or input field.
The browser's autocomplete feature predicts the value. When a user begins typing in a field, the browser should suggest possible values based on previously entered data.
The autocomplete attribute is compatible with the form> element and the following input> types: text, search, url, tel, email, password, datepickers, range, and colour.
<html>
<body>
<h1>The autocomplete attribute</h1>
<p>The autocomplete attribute specifies whether or not an input field should have autocomplete enabled.</p>
<p>Fill in and submit the form, then reload the page to see how autocomplete works.</p>
<p>Notice that autocomplete is "on" for the form, but "off" for the e-mail field!</p>
<form action="/action_page.php" autocomplete="on">
<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>
<label for="email">Email:</label>
<input type="email" id="email" name="email" autocomplete="off"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Products
Partner
Copyright © RVR Innovations LLP 2024 | All rights reserved - Mytat.co is the venture of RVR Innovations LLP