HTML — Input Form Attributes

Introduction – Why Form Attributes Matter

When you build a web form, the <input> element is only the start.
Attributes are extra words inside the tag that tell the browser how the field should behave.
They can enforce rules, give hints, or change the way data is sent to the server.

In the previous lesson we looked at visual attributes like type and placeholder.
This lesson dives into the attributes that affect validation, submission, and user experience.
By the end you will be able to create forms that guide users and reduce errors before the data ever reaches your server.

Core Form Attributes

required

Adding required tells the browser that the field cannot be left empty.

<form>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  <button type="submit">Send</button>
</form>

What the browser displays

The email box shows a red outline (or similar) if you try to submit without typing anything.
The browser also shows a built‑in message like “Please fill out this field.”

min and max (numeric limits)

Use min and max with number‑type inputs to set the lowest and highest acceptable values.

<label for="age">Age (1‑120):</label>
<input type="number" id="age" name="age" min="1" max="120" required>

What the browser displays

The spinner arrows let you increase or decrease the value.
If you type 0 or 130 and try to submit, the browser blocks the submission and shows an error.

pattern – custom regular‑expression check

pattern lets you define a regex that the input must match.

<label for="zip">U.S. ZIP code:</label>
<input type="text" id="zip" name="zip" pattern="[0-9]{5}(-[0-9]{4})?" placeholder="12345 or 12345-6789" required>

What the browser displays

If the entered text does not follow the pattern, the form will not submit and a message like “Please match the requested format.” appears.

readonly vs disabled

Both stop the user from changing a value, but they behave differently when the form is submitted.

<label for="code">Referral code (read‑only):</label>
<input type="text" id="code" name="code" value="ABC123" readonly>

<label for="promo">Promo code (disabled):</label>
<input type="text" id="promo" name="promo" value="SAVE10" disabled>

What the browser displays

The read‑only field looks normal but cannot be edited; its value is still sent.
The disabled field is grayed out and its value is omitted from the submission.

Attribute Groups for Data Formatting

maxlength and size

maxlength limits how many characters the user can type.
size controls the visible width of the input box (in characters).

<label for="username">Username (max 12 chars):</label>
<input type="text" id="username" name="username" maxlength="12" size="15">

What the browser displays

The box stops accepting characters after the 12th character.
The visual width is set by `size`, but the limit is enforced by `maxlength`.

autocomplete

The autocomplete attribute hints to the browser whether it should remember and suggest previous entries.

<input type="email" name="email" autocomplete="on" placeholder="you@example.com">
<input type="password" name="pwd" autocomplete="new-password" placeholder="Choose a password">

What the browser displays

The email field may show a dropdown of previously used email addresses.
The password field will not store the value because we used `new-password`.

Table: Quick Reference of Common Form Attributes

Attribute	Applies To	Typical Use	Example Value
required	all input types	Make field mandatory	required
min / max	number, date, range	Numeric or date limits	min="0"
pattern	text, search, tel	Regex validation	pattern="[A-Za-z]{3,}"
readonly	text, hidden, etc.	Show value but prevent edit	readonly
disabled	any form control	Exclude from submission	disabled
maxlength	text, password, email	Limit character count	maxlength="20"
size	text, password	Set visible width	size="30"
autocomplete	all	Hint for browser memory	autocomplete="off"

Common mistake: Forgetting that disabled fields are not sent to the server, which can lead to missing data in your backend.

Advanced Attributes for Submission Control

formaction, formenctype, formmethod, formtarget

These four attributes let a single <button> or <input type="submit"> override the form’s default action.

<form id="myForm" action="/default-handler" method="post">
  <input type="text" name="query" placeholder="Search…">
  <button type="submit">Standard Search</button>
  <button type="submit"
          formaction="/advanced-search"
          formmethod="get"
          formtarget="_blank">
    Advanced Search (new tab)
  </button>
</form>

What the browser displays

The first button sends a POST request to /default-handler.
The second button sends a GET request to /advanced-search and opens the result in a new tab.

novalidate – turn off built‑in validation

Sometimes you want to handle validation with JavaScript instead of the browser’s default.

<form action="/submit" method="post" novalidate>
  <input type="email" name="email" required>
  <button type="submit">Send</button>
</form>

What the browser displays

The form will submit even if the email field is empty or malformed; no automatic error messages appear.

Putting It All Together – A Complete Registration Form

<form action="/register" method="post" autocomplete="on">
  <h2>Register</h2>

  <label for="fullName">Full name:</label>
  <input type="text" id="fullName" name="fullName" required maxlength="50" size="30"><br>

  <label for="email">Email address:</label>
  <input type="email" id="email" name="email" required autocomplete="email"><br>

  <label for="age">Age:</label>
  <input type="number" id="age" name="age" min="13" max="120" required><br>

  <label for="zip">ZIP code:</label>
  <input type="text" id="zip" name="zip" pattern="[0-9]{5}" placeholder="12345" required><br>

  <label for="promo">Promo code (optional):</label>
  <input type="text" id="promo" name="promo" readonly value="WELCOME"><br>

  <button type="submit">Create account</button>
  <button type="reset">Clear</button>
</form>

What the browser displays

A tidy form with required fields highlighted if left empty, numeric limits on age, and a read‑only promo code that still gets sent.

Common mistakes checklist

• Using disabled when you meant readonly.
• Forgetting to add required to fields that must not be empty.
• Setting min greater than max (or vice‑versa).
• Relying solely on pattern without a fallback message.
• Not matching autocomplete values to the field purpose.

Mini Practice

1. Create a login form with email and password fields. Make the email required and the password at least 8 characters using pattern.
2. Build a survey question that asks for a rating from 1 to 5. Use type="range" with min="1" and max="5" and display the chosen value in a <span> (you can leave the JavaScript part optional).
3. Add a “terms and conditions” checkbox that must be checked before the form can be submitted. Use the appropriate attribute.
4. Write a small form that sends data to two different URLs depending on which button the user clicks. Use formaction and formmethod to achieve this.
5. Experiment with a disabled field and a readonly field. Submit the form and observe which values reach the server (you can check the URL query string for a GET form).