• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

HTML Input Attributes

← Previous Next →

HTML input attributes allow you to control how form fields behave. These attributes help you set rules, give hints, limit user entries and improve the overall experience. In this chapter, you will learn the most important input attributes with practical examples so you can create better and more accurate forms.

What Are Input Attributes

Input attributes are properties added inside an <input> tag. They guide the browser on how the field should work. Some attributes set limits, some provide helpful text and others improve accessibility. You can combine many attributes in a single input.

The value Attribute

The value attribute sets the default value of a field. It appears inside the input when the page loads.

Example

<input type="text" value="India">

The placeholder Attribute

The placeholder provides a hint or sample text. It disappears as soon as the user starts typing.

Example

<input type="text" placeholder="Enter your full name">

The required Attribute

If an input is required, the form cannot submit until the user provides a value.

Example

<input type="email" required>

The readonly Attribute

readonly makes the input uneditable, but the value inside it can still be submitted.

Example

<input type="text" value="Read-only text" readonly>

The disabled Attribute

disabled completely blocks the field. It cannot be edited, selected or submitted.

Example

<input type="text" value="Disabled" disabled>

The minlength and maxlength Attributes

These attributes control the number of characters a user can type.

Example

<input type="text" minlength="3" maxlength="20">

The min and max Attributes

min and max set the allowed range for number inputs, date inputs and range inputs.

Example

<input type="number" min="1" max="100">

The step Attribute

step controls the interval between acceptable values. It works with numbers, dates and ranges.

Example

<input type="number" min="0" max="10" step="2">

The pattern Attribute

The pattern attribute allows you to use regular expressions to validate the input. This gives you more control over formats.

Example: Accept only 10-digit numbers

<input type="text" pattern="[0-9]{10}" placeholder="Enter phone number">

The autocomplete Attribute

autocomplete tells the browser whether to suggest previously entered values.

Options

  • on

  • off

Example

<input type="email" autocomplete="off">

The autofocus Attribute

autofocus automatically places the cursor inside a field when the page loads.

Example

<input type="text" autofocus>

The multiple Attribute

multiple lets users select more than one value. It is usually used with file and email inputs.

Example

<input type="file" multiple>

The size Attribute

size controls the visible width of an input box in characters.

Example

<input type="text" size="40">

The list Attribute (Datalist)

The list attribute connects an input field to a <datalist>, giving dropdown suggestions.

Example

<input type="text" list="countries">

<datalist id="countries">
  <option value="India">
  <option value="Nepal">
  <option value="Bhutan">
</datalist>

The name Attribute

The name attribute is important for backend processing. Without it, form data will not be submitted with a key.

Example

<input type="text" name="username">

The form Attribute

The form attribute links an input to a specific form even if the input is placed outside the form tag.

Example

<form id="f1">
  <input type="submit" value="Submit Form">
</form>

<input type="text" form="f1" name="extra">

The formnovalidate Attribute

Used with the submit button. It skips the validation rules in the form.

Example

<input type="submit" formnovalidate>

The formaction Attribute

When used with a submit button, formaction changes the URL where the form data will be sent.

Example

<input type="submit" formaction="/save-details">

The formenctype Attribute

Sets the encoding type for form data. Useful when uploading files.

Example

<input type="submit" formenctype="multipart/form-data">

The formmethod Attribute

Defines the HTTP method for form submission.

Options

  • get

  • post

Example

<input type="submit" formmethod="post">

The formtarget Attribute

Opens the form result in a specific location, such as a new tab.

Example

<input type="submit" formtarget="_blank">

A Complete Example Combining Attributes

<form>

  <input type="text" name="fullname" placeholder="Full Name" required minlength="3">

  <input type="email" name="email" placeholder="Email" autocomplete="off">

  <input type="number" name="age" min="18" max="60" step="1" required>

  <input type="file" name="resume" multiple>

  <input type="text" list="citylist" name="city" placeholder="Select City">

  <datalist id="citylist">
    <option value="Delhi">
    <option value="Mumbai">
    <option value="Chennai">
    <option value="Kolkata">
  </datalist>

  <input type="submit" value="Submit">

</form>

Summary of HTML Input Attributes

Input attributes play a major role in improving form usability. You learned how attributes like placeholder, required, readonly, disabled, minlength, maxlength, pattern, autocomplete, autofocus, multiple, list, name and many others work. Each attribute controls how users interact with inputs and ensures your form collects clean, structured and accurate data. With proper use of these attributes, your forms become easier to use and more reliable.

Practice Questions

Q1. Use required on a username and password field.

Q2. Create an email field that is readonly.

Q3. Add a placeholder text to a search box.

Q4. Limit a text field to 25 characters using maxlength.

Q5. Set a number input between 10 to 100 using min and max.

Q6. Use pattern="[A-Za-z]{3,}" to accept only alphabetic text (min 3 chars).

Q7. Add a file input that allows selecting multiple files.

Q8. Use autofocus on the first input in the form.

Q9. Create a checkbox that is pre-selected using checked.

Q10. Add a password field with pattern=".{8,}" and a title explaining the rule.

← Previous Next →

Try a Short Quiz.

coding learning websites codepractice

No quizzes available.

HTML

online coding class codepractice

HTML5 Basics

HTML Styling and Design

HTML Links and Media

HTML Layout and Structure

HTML Forms

HTML Graphics

HTML APIs

HTML Advanced Topics

codepractice logo
Login
Go Back Top