HTML Input Types

HTML Input Types

The <input> element supports many different types, each designed for a specific kind of user input. If the type attribute is omitted, the default value is text.

Available Input Types

• button, checkbox, color, date
• datetime-local, email, file, hidden
• image, month, number, password
• radio, range, reset, search
• submit, tel, text, time
• url, week

Input Type: Text

Defines a single-line text input field.

 <form>   <label for="fname">First name:</label><br>   <input type="text" id="fname" name="fname"><br>   <label for="lname">Last name:</label><br>   <input type="text" id="lname" name="lname"> </form> 

Input Type: Password

Defines a password field where characters are masked.

 <form>   <label for="username">Username:</label><br>   <input type="text" id="username" name="username"><br>   <label for="pwd">Password:</label><br>   <input type="password" id="pwd" name="pwd"> </form> 

Input Type: Submit

Defines a button that submits form data to the server.

 <form action="/action_page.php">   <input type="submit" value="Submit"> </form> 

If the value attribute is omitted, a default label is used.

Input Type: Reset

Resets all form fields to their default values.

 <input type="reset" value="Reset"> 

Input Type: Radio

Allows the user to select only one option from a group.

 <input type="radio" name="lang" value="HTML"> HTML <input type="radio" name="lang" value="CSS"> CSS 

Input Type: Checkbox

Allows the user to select zero or more options.

 <input type="checkbox" value="Bike"> Bike <input type="checkbox" value="Car"> Car 

Input Type: Button

Defines a clickable button, often used with JavaScript.

 <input type="button" value="Click Me" onclick="alert('Hello World!')"> 

Input Type: Color

Provides a color picker.

 <input type="color" name="favcolor"> 

Input Type: Date and Time

Date-related input types allow users to select dates and times.

 <input type="date"> <input type="datetime-local"> <input type="month"> <input type="time"> <input type="week"> 

Input Type: Email

Used for email addresses and supports basic validation.

 <input type="email" name="email"> 

Input Type: File

Allows users to select a file for upload.

 <input type="file" name="myfile"> 

Input Type: Hidden

Stores data that is not visible to the user but is submitted with the form.

 <input type="hidden" name="userId" value="3487"> 

Input Type: Number

Defines a numeric input field with optional limits.

 <input type="number" min="0" max="100" step="10" value="30"> 

Input Type: Range

Defines a slider control for selecting a numeric value.

 <input type="range" min="0" max="50"> 

Input Type: Search

Used for search fields.

 <input type="search" name="query"> 

Input Type: Tel

Used for telephone numbers.

 <input type="tel" name="phone"> 

Input Type: URL

Used for URL input with validation support.

 <input type="url" name="homepage"> 

Input Restrictions

Input attributes can restrict or validate user input.

• checked, disabled, readonly, required
• min, max, step, maxlength
• pattern, size, value

Input Type Attribute

The type attribute specifies how an <input> element is displayed and behaves.