HTML INPUT TYPE

Maha



HTML Input Type

HTML form inputs are interactive elements within an HTML form that allow users to input data. 
They are essential for creating forms on web pages where users can enter information such as text, numbers, dates, selections, and more. 
Form inputs are defined using the <input> element primarily, although other elements like <textarea>, <select>, and <button> also play important roles.

List of HTML Input types

1. Text Input

Allows users to enter single-line text.

Syntax:

<label for="username">Username:</label>
<input type="text" id="username" name="username" required>

2. Password Input

Masks the entered text for sensitive information.

Syntax:

<label for="password">Password:</label>
<input type="password" id="password" name="password" required>

3. Checkbox

Allows selecting multiple options independently.

Syntax:

<label for="subscribe">Subscribe to Newsletter:</label>
<input type="checkbox" id="subscribe" name="subscribe" value="yes">

4. Radio Buttons

Allows selecting only one option from a group.

Syntax:

<fieldset> <legend>Gender:</legend> <label for="male">Male</label> <input type="radio" id="male" name="gender" value="male"> <label for="female">Female</label> <input type="radio" id="female" name="gender" value="female"> </fieldset>

5. Textarea

Allows entering multiline text.

Syntax:

<label for="message">Message:</label><br> <textarea id="message" name="message" rows="4" cols="40"></textarea>

6. Select Dropdown

Presents a list of options, from which one can be selected.

Syntax:

<label for="cars">Choose a car:</label> <select id="cars" name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select>

7. File Upload

Allows users to select files to upload.

Syntax:

<label for="file">Upload a file:</label>
<input type="file" id="file" name="file">

8. Hidden Input

Stores a hidden value that is not displayed or editable by the user.

Syntax:

<input type="hidden" name="token" value="abc123">

9. Date Input

Allows users to enter a date.

Syntax:

<label for="birthdate">Birthdate:</label> <input type="date" id="birthdate" name="birthdate">

10. Email Input

Allows users to enter an email address.

Syntax:

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

11. Number Input

Allows users to enter a number.

Syntax:

<label for="quantity">Quantity:</label> <input type="number" id="quantity" name="quantity" min="1" max="10" step="1">

12. Range Input

Allows users to select a value from within a specified range.

Syntax:

<label for="range">Range:</label> <input type="range" id="range" name="range" min="0" max="100">

13. Color Picker

Allows users to select a color.

Syntax:

<label for="color">Choose a color:</label>
<input type="color" id="color" name="color">

14. Time Input

Allows users to enter a time.

Syntax:

<label for="meeting-time">Meeting time:</label> <input type="time" id="meeting-time" name="meeting-time">

15. URL Input

Allows users to enter a URL.

Syntax:

<label for="website">Website URL:</label>
<input type="url" id="website" name="website">

16. Telephone Input

Allows users to enter a telephone number.

Syntax:

<label for="phone">Phone number:</label> <input type="tel" id="phone" name="phone">

17. Week Input

The user can choose a week and year using the <input type="week">. The input field may display a date picker, contingent on browser support.

Syntax:

<label for="week">Select a week:</label> <input type="week" id="week" name="week">

Example:


<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML Form Input Types Example</title> </head> <body> <h2>HTML Form Input Types Example</h2> <form action="/submit-form" method="post"> <label for="username">Username:</label><br> <input type="text" id="username" name="username" required><br><br> <label for="password">Password:</label><br> <input type="password" id="password" name="password" required><br><br> <label for="subscribe">Subscribe to Newsletter:</label><br> <input type="checkbox" id="subscribe" name="subscribe" value="yes"><br><br> <fieldset> <legend>Gender:</legend> <label for="male">Male</label> <input type="radio" id="male" name="gender" value="male"> <label for="female">Female</label> <input type="radio" id="female" name="gender" value="female">
</fieldset><br><br> <label for="cars">Choose a car:</label><br> <select name="cars" id="cars"> <option value="volvo">Volvo</option> <option value="tata nexon">Tata Nexon</option> <option value="maruti fronx">Maruti Fronx</option> <option value="audi">Audi</option> </select> </select><br><br> <label for="file">Upload a file:</label><br> <input type="file" id="file" name="file"><br><br> <label for="week">Select a week:</label><br> <input type="week" id="week" name="week"><br><br> <label for="birthdate">Birthdate:</label><br> <input type="date" id="birthdate" name="birthdate"><br><br> <label for="email">Email:</label><br> <input type="email" id="email" name="email" required><br><br> <label for="quantity">Quantity:</label><br> <input type="number" id="quantity" name="quantity" min="1" max="10" step="1"><br><br> <label for="range">Range:</label><br> <input type="range" id="range" name="range" min="0" max="100"><br><br> <label for="color">Choose a color:</label><br> <input type="color" id="color" name="color"><br><br> <label for="meeting-time">Meeting time:</label><br> <input type="time" id="meeting-time" name="meeting-time"><br><br> <label for="website">Website URL:</label><br> <input type="url" id="website" name="website"><br><br> <label for="phone">Phone number:</label><br> <input type="tel" id="phone" name="phone"><br><br> <button type="submit">Submit</button> </form> </body> </html>


Output:






More topic in HTML

Our website uses cookies to enhance your experience. Learn More
Accept !

GocourseAI

close
send