HTML Input attributes

HTML <input> element is so powerful because of its attributes; The type attribute described with the examples below is the most important. Since every element, regardless of type, is based on the HTMLInputElement interface, they technically have exactly the same attributes. In reality, however, most of the attributes affect only a certain subset of input types. In addition, the way some attributes affect an input depends on the input type and affects different input types in different ways.

Some HTML Input attributes

The available attributes are as follows:

Description of input attribute

The accept attribute

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>

The alt attribute

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>

The autocomplete attribute

(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>

The autofocus attribute

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>

The capture attribute

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.

The checked attribute

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>

The disabled attribute

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>

The height attribute

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 list attribute

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>

The max attribute

Valid for a date, month, week, time, local date and time, number, and range, define 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.

The min attribute

Valid for a 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>

The maxlength attribute

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 Max length 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 min length.

The minlength attribute

Valid for text, search, URL, tel, 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>

The multiple attribute

When the Boolean multiple attributes 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>

The name attribute

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.

name and radio buttons

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.

HTMLFormElement.elements

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>

The pattern attribute

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>

The placeholder attribute

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 'user'".

<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>

The readonly attribute

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>

The required attribute

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>

The size attribute

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>

The src attribute

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.

The step attribute

Valid for numeric input types, including number, date/time input types, and range, the passed attribute is a number that specifies the granularity to which the value must adhere.

• step defaults to 1 for number and range.
• For the date/time input types, the step is expressed in seconds, with the default step being 60 seconds. The step scaling factor is 1000 (which converts seconds to milliseconds as used in other algorithms).

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>

The type attribute

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 field.

Check input-type to learn more about input type attribute

The value 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 checkboxes, 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 attribute

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.