What are form attributes in HTML?

Form Attributes

Form attributes improve HTML forms by providing built-in features for user guidance and input validation, often reducing the need for a wide JavaScript code. Remember that browser support for some of these attributes, especially for newer input types, can vary.

placeholder:

The placeholder attribute provides a hint to the user about the  information should be entered into an <input> or <textarea> field when the field is empty. This text disappears when the user focuses on the field and starts typing. The placeholder text must not contain line feeds.

<input type="text" name="username" placeholder="Enter your username">
<textarea name="comment" placeholder="Write your thoughts here..."></textarea>

This attribute is supported by the latest versions of Mozilla, Safari, and Chrome browsers. It allows developers to provide guidance without needing JavaScript. You can also use the placeholder attribute with different input types like email, url, and The browser restores the placeholders when the form resets..

required

The required attribute is a Boolean attribute that the user must fill in a value for an input field or check a checkbox/radio button before the form can be submitted. If a required field is empty upon submission, supporting browsers will display an error message like “Please fill out this field”.

<input type="text" name="name" required>
<input type="password" name="password" required placeholder="Min 6 characters">
<input type="checkbox" name="accept" required> Accept Terms & Conditions
<select name="options" required>
  <option value="">Select an option</option>
  <option value="1">Option 1</option>
</select>
<textarea name="message" required></textarea>

The required attribute eliminates the need for basic client-side validation with JavaScript. Note that an initial value set with the value attribute will satisfy the required validation.

autofocus

The autofocus attribute is a Boolean attribute that specifies that an input element should automatically receive focus when the page loads. Only one form element can have the autofocus attribute in a given page.

<input type="text" name="search" autofocus>
<input type="text" id="firstname" name="first" required autofocus>
<textarea autofocus></textarea>
<select autofocus>
  <option value="a">A</option>
</select>

While convenient, it’s advised to use this attribute sparingly for better user experience and accessibility. If a user agent does not recognize the autofocus attribute, it will be ignored.

autocomplete

The autocomplete attribute specifies whether the form or individual input fields should have autocomplete functionality enabled. For most text-based form fields, this results in a dropdown appearing as the user types, suggesting previously entered values. It can be set to on or off. The default value is on for the form if the attribute is not applied.

<form autocomplete="off" action="/submit">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" autocomplete="on"><br><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="Submit">
</form>
<input type="password" name="password" autocomplete="off" placeholder="8-10 characters" />

You can apply autocomplete to the entire <form> or to specific <input> elements. Setting it to off for sensitive information like password fields is a common practice.

pattern

The pattern attribute specifies a regular expression that the input field’s value must match for the form to be considered valid. The title attribute should be provided along with pattern to give the user a hint about the expected format.

<input type="text" name="zipcode" pattern="{5}" title="Please enter a 5-digit zip code">
<input type="text" name="creditcardnumber" pattern="{16}" title="A credit card number is 16 digits with no spaces or dashes">

If the input value does not match the pattern, a pattern Mismatch will occur, and the browser will prevent form submission and display a validation message.

min

 The min attribute specifies the minimum acceptable value for an <input> element with types like number, range, date, datetime-local, month, time, and week.

<input type="number" name="quantity" min="1">
<input type="date" name="startdate" min="2023-10-27">
<input type="range" name="feedback" min="1" max="5">

This attribute is used for input validation to ensure the entered value is not below the specified minimum. It also sets the lower limit for controls like range sliders.

max

The max attribute requires the maximum acceptable value for <input> elements with types like number, range, date, datetime-local, month, time, and week.

<input type="number" name="quantity" max="100">
<input type="date" name="enddate" max="2023-12-31">
<input type="range" name="feedback" min="1" max="5">

Similar to min, max is used for input validation, ensuring the entered value does not exceed the specified maximum. It also sets the upper limit for controls like range sliders. The min and max attributes only result in validation when the user provides a value.

step

 The step attribute specifies the legal number intervals for <input> elements with types like number, range, date, datetime-local, month, time, and week.

<input type="number" name="quantity" min="0" max="10" step="2">
<input type="time" name="meetingtime" step="1800"> <!-- Steps in seconds (30 minutes) -->

For a number field with min=”0″ and step=”2″, acceptable values would be 0, 2, 4, and so on. This attribute defines the hardness of increments and decrements for the value.

HTML5 TOPICS