WS WhereIsStuff
Tutorial Guides
Log In Sign Up

Advertisement

Google Ad Slot: content-top

Input attributes

Previous Next

HTML input elements support a wide range of attributes that allow developers to customize the behavior, appearance, and functionality of form fields. Here’s a comprehensive list of commonly used input attributes and their purposes:

Common HTML Input Attributes

Type:

type: Specifies the type of input (e.g., text, password, email, etc.).

<input type="text">
Try it yourself

Name:

name: Defines the name of the input, which is used to reference the data on form submission.

<input type="text" id="text" name="text">
Try it yourself

Value:

value: Specifies the default value of the input field.

<input type="text" id="text" name="text" value="Default text">
Try it yourself

Placeholder:

placeholder: Displays a short hint that describes the expected value of the input.

<input type="text" id="text" placeholder="Enter your name">
Try it yourself

Required:

required: Ensures that the input must be filled before submitting the form.

<input type="text" id="text" name="text" disabled>
Try it yourself

Disabled:

disabled: Disables the input field, preventing user interaction.

<input type="text" id="text" name="text" disabled>
Try it yourself

Readonly:

readonly: Makes the input field read-only, so users cannot change its value.

<input type="text" id="text" value="Cannot change this" readonly>
Try it yourself

Maxlength:

maxlength: Limits the maximum number of characters allowed in the input.

<input type="text" id="text" maxlength="10">
Try it yourself

Min and Max:

min and max: Defines the minimum and maximum values for inputs of types like number, range, date, etc.

<input id="number" type="number" min="1" max="100" value="2">
Try it yourself

Step:

step: Specifies the increment for numerical inputs.

<input type="number" id="number" step="2" value="2"
Try it yourself

Autocomplete:

autocomplete: Controls whether the browser should auto-fill the input based on previous entries (on or off).

<input type="text" id="text" name="text" autocomplete="on">
Try it yourself

Autofocus:

autofocus: Automatically focuses the input when the page loads.

<input type="text" id="text" autofocus>
Try it yourself

Pattern:

pattern: Defines a regular expression pattern that the input's value must match for validation.

<input type="text" id="text" name="text" pattern="[A-Za-z]{3,}">
Try it yourself

Multiple:

multiple: Allows multiple values for inputs of types like email or file.

<input type="email" id="email" name="email" multiple>
Try it yourself

Size:

size: Specifies the visible width (in characters) of the input.

<input type="text" id="text" name="text" size="40" >
Try it yourself

Minlength:

minlength: Specifies the minimum number of characters required for input.

<input type="text" id="text" name="text" minlength="5" required>
Try it yourself

List:

list: Connects the input to a <datalist> element to provide predefined options.

<input type="text" list="browsers">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
</datalist>
Try it yourself

Accept:

accept: Specifies the file types allowed when using input type="file".

<input type="file" accept=".jpg,.png,.pdf">
Try it yourself

Height and Width:

height and width: Specifies the size of an input type="image".

<img src="/assets/images/whereisstuff.png" alt="whereisstuff.com" width="100" height="100">
Try it yourself

Novalidate:

novalidate: When added to a form, disables HTML5 form validation.

<form novalidate>
<!-- Text input -->
<label for="text">Text:</label>
<input type="text" id="text" name="text"><br><br>
<!-- Submit button -->
<input type="submit" value="Submit">
</form>
Try it yourself

Previous Next