WS WhereIsStuff
Tutorial Guides
Log In
Sign Up

Advertisement

Google Ad Slot: content-top

Inputs

~1 min read · HTML
On this page
❮ Previous Next ❯

In HTML, multiple types of inputs can be used in forms to capture different kinds of user data. Here are the most common input types:


Basic Inputs

Input types

Description

Text

Text (type="text"): Single-line text input.

Password

Password (type="password"): Hides the entered text.

Email

Email (type="email"): Ensures email format validation.

Select

Select (dropdown) for selecting options

Textarea

Textarea for multi-line text input

Radio

Radio (type="radio"): Single-choice selection from a group.

Checkbox

Checkbox (type="checkbox"): For multiple-choice selections.

Number

Number (type="number"): For numeric input, with min and max attributes.

Range

Range (type="range"): Input for numeric values via a slider.

Submit

Submit (type="submit"): A button that submits the form data.

Reset

Reset (type="reset"): A button that resets the form fields to their default values.

File

File (type="file"): Input for file uploads.

Input type text

Text (type="text"): Single-line text input.

Example
<!-- Text input -->
<label for="text">Text:</label>
<input type="text" id="text" name="text"><br><br>
Try it yourself

Input type password

Password (type="password"): Hides the entered text.

Example
<!-- Password input -->
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br><br>
Try it yourself

Input type email

Email (type="email"): Ensures email format validation.

Example
<!-- Email input -->
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
Try it yourself

Input type select

Select (dropdown) (<select>) for selecting options

Example
<!-- Dropdown (Select) -->
<label for="country">Country:</label>
<select id="country" name="country">
<option value="usa">USA</option>
<option value="canada">Canada</option>
<option value="mexico">Mexico</option>
</select><br><br>
Try it yourself

Input type textarea

Textarea (<textarea>) for multi-line text input

Example
<!-- Textarea -->
<label for="comments">Comments:</label>
<textarea id="comments" name="comments" rows="4" cols="50" placeholder="Enter your comments here"></textarea><br><br>
Try it yourself

Input type radio

Radio (type="radio"): Single-choice selection from a group.

Example
<!-- Radio button input -->
<label>Gender:</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br><br>
Try it yourself

Input type checkbox

Checkbox (type="checkbox"): For multiple-choice selections.

Example
<!-- Checkbox input -->
<label for="checkbox">Accept Terms:</label>
<input type="checkbox" id="checkbox" name="checkbox"><br><br>
Try it yourself

Input type number

Number (type="number"): For numeric input, with min and max attributes.

Example
<!-- Number input -->
<label for="number">Number:</label>
<input type="number" id="number" name="number" min="1" max="100"><br><br>
Try it yourself

Input type range

Range (type="range"): Input for numeric values via a slider.

Example
<!-- Range input -->
<label for="range">Range:</label>
<input type="range" id="range" name="range" min="1" max="100"><br><br>
Try it yourself

Input type submit

Submit (type="submit"): A button that submits the form data.

Example
<!-- Submit button -->
<input type="submit" value="Submit">
Try it yourself

Input type reset

Reset (type="reset"): A button that resets the form fields to their default values.

Example
<!-- Reset button -->
<input type="reset" value="Reset">
Try it yourself

Advanced Inputs

Input types
Description
Tel
Tel (type="tel"): Input for phone numbers (no built-in validation).
Color
Color (type="color"): Input for selecting a color.
Search
Search (type="search"): Input for search queries.
URL
URL (type="url"): Input for URLs.
Hidden
Hidden (type="hidden"): Hidden input field for including data in form submissions without showing it to the user.
Image
Image (type="image"): A submit button that includes an image.
Date
Date (type="date"): Input for selecting a date.
Month
Month (type="month"): Input for selecting a month and year.
Week
Week (type="week"): Input for selecting a week.
Time
Time (type="time"): Input for selecting time.
Datetime-local
Datetime-local (type="datetime-local"): Input for selecting both date and time.

Input type tel

Tel (type="tel"): Input for phone numbers (no built-in validation).

Example
<!-- Telephone input -->
<label for="tel">Phone Number:</label>
<input type="tel" id="tel" name="tel"><br><br>
Try it yourself

Input type color

Color (type="color"): Input for selecting a color.

Example
<!-- Color input -->
<label for="color">Favorite Color:</label>
<input type="color" id="color" name="color"><br><br>
Try it yourself

Input type date

Date (type="date"): Input for selecting a date.

Example
<!-- Date input -->
<label for="date">Date:</label>
<input type="date" id="date" name="date"><br><br>
Try it yourself

Input type month

Month (type="month"): Input for selecting a month and year.

Example
<!-- Month input -->
<label for="month">Month:</label>
<input type="month" id="month" name="month"><br><br>
Try it yourself

Input type week

Week (type="week"): Input for selecting a week.

Example
<!-- Week input -->
<label for="week">Week:</label>
<input type="week" id="week" name="week"><br><br>
Try it yourself

Input type time

Time (type="time"): Input for selecting time.

Example
<!-- Time input -->
<label for="time">Time:</label>
<input type="time" id="time" name="time"><br><br>

Input type datetime

Datetime-local (type="datetime-local"): Input for selecting both date and time.

Example
<!-- Datetime-local input -->
<label for="datetime">Local Date & Time:</label>
<input type="datetime-local" id="datetime" name="datetime"><br><br>
Try it yourself

Input type image

Image (type="image"): A submit button that includes an image.

Example
<!-- Image input (submit button with an image) -->
<label for="image">Submit with Image:</label>
<input type="image" id="image" src="/assets/images/whereisstuff.png" alt="Submit"><br><br>
Try it yourself

Input type Search  

Search (type="search"): Input for search queries.

Example
<!-- Search input -->
<label for="search">Search:</label>
<input type="search" id="search" name="search"><br><br>
Try it yourself

Input type url

URL (type="url"): Input for URLs.

Example
<!-- URL input -->
<label for="url">Website URL:</label>
<input type="url" id="url" name="url"><br><br>
Try it yourself

Input type hidden

Hidden (type="hidden"): Hidden input field for including data in form submissions without showing it to the user.

Example
<!-- Hidden input -->
<input type="hidden" id="hidden" name="hidden" value="secret"><br><br>
Try it yourself

All inputs Example
<!-- Text input -->
<label for="text">Text:</label>
<input type="text" id="text" name="text"><br><br>

<!-- Password input -->
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br><br>

<!-- Email input -->
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>

<!-- Dropdown (Select) -->
<label for="country">Country:</label>
<select id="country" name="country">
<option value="usa">USA</option>
<option value="canada">Canada</option>
<option value="mexico">Mexico</option>
</select><br><br>

<!-- Textarea -->
<label for="comments">Comments:</label>
<textarea id="comments" name="comments" rows="4" cols="50" placeholder="Enter your comments here"></textarea><br><br>


<!-- URL input -->
<label for="url">Website URL:</label>
<input type="url" id="url" name="url"><br><br>

<!-- Telephone input -->
<label for="tel">Phone Number:</label>
<input type="tel" id="tel" name="tel"><br><br>

<!-- Search input -->
<label for="search">Search:</label>
<input type="search" id="search" name="search"><br><br>

<!-- Number input -->
<label for="number">Number:</label>
<input type="number" id="number" name="number" min="1" max="100"><br><br>

<!-- Range input -->
<label for="range">Range:</label>
<input type="range" id="range" name="range" min="1" max="100"><br><br>

<!-- Date input -->
<label for="date">Date:</label>
<input type="date" id="date" name="date"><br><br>

<!-- Month input -->
<label for="month">Month:</label>
<input type="month" id="month" name="month"><br><br>

<!-- Week input -->
<label for="week">Week:</label>
<input type="week" id="week" name="week"><br><br>

<!-- Time input -->
<label for="time">Time:</label>
<input type="time" id="time" name="time"><br><br>

<!-- Datetime-local input -->
<label for="datetime">Local Date & Time:</label>
<input type="datetime-local" id="datetime" name="datetime"><br><br>

<!-- Color input -->
<label for="color">Favorite Color:</label>
<input type="color" id="color" name="color"><br><br>

<!-- Checkbox input -->
<label for="checkbox">Accept Terms:</label>
<input type="checkbox" id="checkbox" name="checkbox"><br><br>

<!-- Radio button input -->
<label>Gender:</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br><br>

<!-- File input -->
<label for="file">Upload File:</label>
<input type="file" id="file" name="file"><br><br>

<!-- Hidden input -->
<input type="hidden" id="hidden" name="hidden" value="secret"><br><br>

<!-- Image input (submit button with an image) -->
<label for="image">Submit with Image:</label>
<input type="image" id="image" src="submit_button.png" alt="Submit"><br><br>

<!-- Submit button -->
<input type="submit" value="Submit">

<!-- Reset button -->
<input type="reset" value="Reset">
Try it yourself

❮ Previous Next ❯