Tutorial

Sign Up

log In

HTML
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 ❯
Whereisstuff is simple learing platform for beginer to advance level to improve there skills in technologies.we will provide all material free of cost.you can write a code in runkit workspace and we provide some extrac features also, you agree to have read and accepted our terms of use, cookie and privacy policy.
© Copyright 2024 www.whereisstuff.com. All rights reserved. Developed by whereisstuff Tech.