The available attributes are as follows:
| Attribute | Supported type/types | Description |
|---|---|---|
| accept | file | Hint for expected file type in file upload controls e.g For image file only add this (accept="image/gif, image/jpeg, image/png") |
| alt | image | alt attribute for the image type. Required for accessibility. |
| autocomplete | all | Hint for form autofill feature |
| autofocus | all | Automatically focus the form control when the page is loaded |
| capture | file | Media capture input method in file upload controls |
| checked | radio, checkbox | Whether the radio/checkbox or control is checked |
| disabled | all | Whether the form control is disabled |
| height | image | Same as height attribute for <img> |
| list | almost all | Value of the id attribute of the <datalist> of autocomplete options |
| max | numeric types / also we can used in date input type ( example ) |
Maximum value |
| maxlength | password, search, tel, text, url | Maximum length (number of characters) of value |
| min | numeric types / also we can used in date input type ( example ) |
Min value |
| minlength | password, search, tel, text, url | Minimum length (number of characters) of value |
| multiple | email, file | Boolean. Whether to allow multiple values |
| name | all | Name of the form control. Submitted with the form as part of a name/value pair. |
| pattern | password, text, tel | Pattern the value must match to be valid |
| placeholder | password, search, tel, text, url | Text that appears in the form control when it has no value set |
| readonly | almost all | Boolean. The value is not editable |
| required | almost all | Boolean. A value is required or must be check for the form to be submittable |
| size | email, password, tel, text | Size of the control |
| src | image | Same as src attribute for <img>; address of image resource |
| step | numeric types | Incremental values that are valid. |
| type | all | Type of form control |
| value | all | At first, the initial value if specified explicitly in HTML. More generally, the current value of the form control. Submitted with the form as part of a name/value pair. |
| width | image | Same as width attribute for <img> |
The accept attribute is only valid for the file input type and defines which file types can be selected in a file upload control.
<form>
<label for="pic">Select picture only : </label>
<input type="file" name="pic" id="pic" accept="image/gif, image/jpeg, image/png"/>
</form>
This above code will be displayed in a browser as:
Valid only for the image button, the alt attribute provides an alternative text for the image, showing the attribute value if the image src is missing or not loaded. See the type of image input.
<form>
<input type="image" name="pic" src="../img/tdb-logo.jpg" alt="submit button img logo"/>
</form>
(Not a boolean attribute!) The autocomplete attribute uses a space-separated character string as its value that describes what kind of autocomplete functionality the input should provide, if any. A typical implementation of autocomplete calls up previous values entered in the same input field, but more complex forms of autocomplete, for example, could be integrated into a device's contact list to automatically complete e-mail addresses in an e-mail input field . See values in The HTML Auto-Complete Attribute for valid values.
<form>
<input type="text" name="name" autocomplete placeholder="with suggestion">
<input type="text" name="name" autocomplete="off" placeholder="without suggestion">
</form>
A Boolean attribute that, if present, indicates that the input should automatically have focus when the page has fully loaded (or when the item has been displayed).
<form>
<label for="pic">field is automatically focus on load : </label>
<input type="text" name="text" autofocus>
</form>
Introduced in the HTML Media Capture specification and valid only for the file input type, the capture attribute defines which media (microphone, video, or camera) should be used to capture a new file for upload with file upload control in supported scenarios . file input type.
Enabled for radio and checkbox types. A Boolean attribute is activated. If it is present in a radio type, this means that the radio button is the one currently selected in the group of radio buttons with the same name. If it is present in a checkbox type, it is present indicates that the checkbox is selected by default (when the page loads). It does not indicate whether this check box is currently selected: If the status of the check box is changed, this content attribute will not reflect the change. (Only the marked IDL attribute of HTMLInputElement is updated.
<form>
<label for="checkbox">already checked checkbox : </label>
<input type="checkbox" id="checkbox" checked> <br>
<label for="radio">already checked radio button : </label>
<input type="radio" id="radio" checked> <br>
</form>
A Boolean attribute that, if present, indicates that the user cannot interact with the input. Disabled inputs are usually rendered with a darker color or some other form of indication that the field is not available for use.
Specific disabled inputs do not receive the click event and disabled inputs are not sent with the form.
<form>
<label for="checkbox">this is disabled input field : </label>
<input type="text" id="checkbox" disabled placeholder="you can't change or remove it">
</form>
This above code will be displayed in a browser as:
Valid only for the image input button, the height is the height of the image file that will be displayed to represent the graphic submit button. See the type of image input.
The value given to the list attribute must be the id of an <datalist> element located in the same document. Provides a list of predefined values to suggest to the user for this input. Any value in the list that is not compatible with the type is not included in the suggested options. The values provided are suggestions, not requirements - users can select from this predefined list or provide a different value.
It is valid for text, search, url, phone, email, date, month, week, time, date / time-local, number, area and color.
<form>
<datalist id="colorsxx">
<option>#ee0000</option>
<option>#dd0000</option>
<option>#cc0000</option>
<option>#bb0000</option>
</datalist>
<datalist id="numbersxx">
<option>2</option>
<option>4</option>
<option>8</option>
<option>16</option>
<option>32</option>
<option>64</option>
</datalist>
<label for="colorx">Color</label> <input type="color" list="colorsxx" id="colorx"><br><br>
<label for="numberx">Number</label> <input type="number" min="0" max="64" list="numbersxx" id="numberx">
</form>
This above code will be displayed in a browser as:
Valid for date, month, week, time, local date and time, number and range, defines the highest value in the range of allowed values. If the value entered in the element exceeds this, the element fails the validation of the constraint. If the value of the max attribute is not a number, then the element does not have a maximum value.
Valid for date, month, week, time, date / time local, number and range. It defines the most negative value in the range of permissible values. If the value entered in the element is less than this value, the element's restriction check fails. If the value of the min attribute is not a number, the element does not have a minimum value.
<form>
<label for="maxno">Enter a no less than 50:</label>
<input type="number" id="maxno" max="50"> <br><br>
<label for="datemax">Enter a date before 2021-01-01:</label>
<input type="date" id="datemax" max="2020-01-02"> <br><br>
<label for="minno">Enter a no greater than 50:</label>
<input type="number" id="minno" min="50"> <br><br>
<label for="datemin">Enter a date afer 2021-01-01:</label>
<input type="date" id="datemin" min="2020-01-02">
</form>
This above code will be displayed in a browser as:
Valid for text, search, url, tel, email and password, it defines the maximum number of characters (as UTF-16 code units) that the user can enter in the field, this must be an integer value 0 or higher, if not Maxlength is specified, or an invalid value is specified, the field has no maximum length. This value must also be greater than or equal to the value of minlength.
Valid for text, search, url, tell, email and password, defines the minimum number of characters (as UTF-16 code units) that the user can enter in the input field, this must be a smaller non-negative integer value than or equal to the value specified by maxlength. If minlength is not specified, or an invalid value is specified, the input does not have a minimum length.
<form method="post" action="form_action.php">
<label for="namesmax">Enter your name (maximum 5 character):</label>
<input type="text" id="namesmax" name="firstName" maxlength="5"> <br><br>
<label for="emailmin">Enter your email (minimum 5 character):</label>
<input type="email" id="emailmin" name="email" minlength="5"><br>
<input type="submit">
</form>
This above code will be displayed in a browser as:
When the Boolean multiple attribute is set, the user can enter e-mail addresses separated by commas in the e-mail widget or select more than one file with the file input. See Email and File Entry Type.
<input type="file" multiple>
This above code will be displayed in a browser as:
A string that specifies a name for the input control. This name is submitted along with the value of the control when the form data is submitted.
The name attribute creates unique behavior for option buttons.
Only one option button in a group of option buttons can be marked with the same name at a time. Selecting any radio button in that group automatically deselects any currently selected radio button in the same group. The value of that marked radio button is submitted along with the name if the form is submitted,
Note: Consider the name a required attribute (even if it isn't). If no name was given for an entry or the name is empty, the entry value will not be sent with the form! (Disabled controls, unchecked radio buttons, unchecked checkboxes, and reset buttons are also not sent.
When an input element is given a name, that name becomes a property of the HTMLFormElement.elements property of the owning form element. If you have one input whose name is set to Guest and another whose name is hat size, the following code can be used:
<form>
<label for="eamil">Email:</label>
<input type="eamil" id="eamil" name="email"> <br>
<label for="pass">Password:</label>
<input type="password" id="pass" name="pass"> <br>
<input type="submit">
</form>
<script>
let form = document.querySelector("form");
form.addEventListener("submit",function(e){
e.preventDefault();
// to stop form default function
let email = form.elements.email;
let hatSize = form.elements["pass"];
alert("Email: "+email.value);
alert("Password: "+hatSize.value);
});
</script>
If the pattern attribute is specified, it is a regular expression that the value of the input must match for the value to pass the constraint check. It must be a valid JavaScript regular expression, as used by the RegExp type and documented in our manual on Regular Expressions; The 'u' flag is specified when the regular expression is compiled, so the pattern is treated as a sequence of Unicode code points rather than ASCII. There should be no slashes around the sample text.
<form method="post" action="form_action_num.php">
<label for="num">Enter your age(only number and 2 digit number):</label>
<input type="text" id="num" name="num" pattern="[0-9]{2}"><br>
<input type="submit">
</form>
This above code will be displayed in a browser as:
The placeholder attribute is a string that gives the user a brief indication of what kind of information is expected in the field. It should be a word or short phrase that provides an indication of the type of data expected and no explanation. The text must not contain line breaks or line feeds. For example, if a field is expected to capture a user's first name and labeled "First Name", an appropriate placeholder might be "e.g 'azam'".
<form method="post" action="form_action.php">
<label for="names">Enter your name :</label>
<input type="text" id="names" name="firstName" placeholder="Enter your name e.g 'azam'"> <br><br>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email" placeholder="Enter your email"><br>
<input type="submit">
</form>
This above code will be displayed in a browser as:
A Boolean attribute that, if present, indicates that the user should not be able to edit the value of the input. The read-only attribute is text, search, url, phone, email, date, month, week, time, date and local time. , numbers, and password entry types.
<form method="post" action="form_action_read.php">
<label for="link">your link :</label>
<input type="text" id="link" name="id" value="https://www.tdbschool.com" readonly> <br><br>
<input type="submit">
</form>
This above code will be displayed in a browser as:
required is a Boolean attribute that, if present, indicates that the user must specify a value for the input before the owning form can be submitted. The required attribute is supported text, search, url, phone, email, date, month, week, time, local date and time, number, password, checkbox, radio, and file.
<form method="post" action="form_action_email.php">
<label for="email">your email :</label>
<input type="email" id="email" name="email" required> <br><br>
<input type="submit">
</form>
This above code will be displayed in a browser as:
Valid only for email, password, phone, and text entry types. Specifies how much of the input is displayed. It basically creates the same result as setting the width property of CSS with some specialties. The actual unit of the value depends on the type of input. password and text, it is a number of characters (or em units) with a default value of 20, and for others, it is pixels. CSS width takes precedence over size attribute.
<form method="post" action="form_action_email.php">
<label for="email">your email :</label>
<input type="email" id="email" required name="email" size="5"> <br><br>
<input type="submit">
</form>
This above code will be displayed in a browser as:
Valid only for the image input button, src is a string that specifies the URL of the image file to be displayed to represent the graphical submit button. See the type of image input.
Valid for numeric input types, including number, date / time input types, and range, the pass attribute is a number that specifies the granularity to which the value must adhere.
For example, if you have, <input type="number" min="10" step="2"> then any even integer, 10 or greater, is valid. If, is omitted,<input type="number"> any integer is valid, but floats (like 4.2) are not valid, because the default step is 1. For 4.2 to be valid, step would have to be set to any, 0.1, 0.2, or whatever, value minimum would have to be a number ending in .2, like <input type="number" min="-5.2">
<form method="post" action="form_action_number.php">
<label for="number">Any even integer, 10 or greater :</label>
<input type="number" id="number" name="number" min="10" step="2" required> <br><br>
<!-- any even integer, 10 or greater, is valid.-->
<input type="submit">
</form>
This above code will be displayed in a browser as:
A string that specifies the type of control to represent. For example, to create a check box, you use a check box value. If omitted (or an unknown value is specified), the text input type is used, creating a plain text input fiel
Check input-type to learn more about input type attribute
The value of the input control. If specified in the HTML, this is the initial value. From then on, it can be modified or retrieved at any time using JavaScript to access the value property of the relevant HTMLInputElement object. The value attribute is always optional, however, is considered mandatory for check boxes, radio and hidden
<form method="post" action="form_action_number.php">
<label for="number">Any even integer, 10 or greater :</label>
<input type="number" id="number" name="number" min="10" step="2" required value="16"> <br><br>
<input type="submit">
</form>
The width only applies to the image input type. The width is the width of the image file that should be displayed to represent the graphical submit button. See the image input type.
Share TDB SCHOOL
Share this E-Learning Website on social media platforms with your friends and followers