Input types in HTML

Here are 2 examples and important attributes for each of the first 9 HTML input controls, explained in a clear format:

📝 Text Input (`type="text"`)

Examples:

<input type="text" name="username" placeholder="Enter your username">
<input type="text" name="city" value="Varanasi" maxlength="20">

Important Attributes:

name: Identifies the input when the form is submitted.
placeholder: Shows a hint inside the box.
value: Sets a default value.
maxlength: Limits number of characters.

🔒 Password Input (`type="password"`)

Examples:

<input type="password" name="password">
<input type="password" name="pin" maxlength="6">

Important Attributes:

maxlength: Restricts password length.
required: Ensures the field must be filled before form submission.
name: For form submission.

📧 Email Input (`type="email"`)

Examples:

<input type="email" name="user_email">
<input type="email" name="alternate_email" required>

Important Attributes:

type: Validates input as a proper email.
required: Makes the field mandatory.
multiple: Allows multiple comma-separated emails.

🔗 URL Input (`type="url"`)

Examples:

<input type="url" name="website">
<input type="url" name="portfolio" placeholder="https://example.com">

Important Attributes:

type: Enforces valid URL format.
placeholder: Shows expected format.

☎️ Telephone Input (`type="tel"`)

Examples:

<input type="tel" name="phone" pattern="[0-9]{10}">
<input type="tel" name="support_line" placeholder="123-456-7890">

Important Attributes:

pattern: Validates format using regular expressions.
placeholder: Format hint.
maxlength: Optional limit on characters.

🔢 Number Input (`type="number"`)

Examples:

<input type="number" name="age" min="18" max="100">
<input type="number" name="quantity" step="5">

Important Attributes:

min: Minimum allowed number.
max: Maximum allowed number.
step: Defines allowed steps between values.

🔍 Search Input (`type="search"`)

Examples:

<input type="search" name="query" placeholder="Search...">
<input type="search" name="product" autofocus>

Important Attributes:

autofocus: Automatically focuses this input on page load.
placeholder: Hint text.

📆 Date Input (`type="date"`)

Examples:

<input type="date" name="dob">
<input type="date" name="event_date" min="2025-01-01" max="2025-12-31">

Important Attributes:

min: Minimum date.
max: Maximum date.
value: Pre-filled date.

📂 File Input (`type="file"`)

Examples:

<input type="file" name="resume">
<input type="file" name="photos" accept="image/*" multiple>

Important Attributes:

accept: Restricts allowed file types (e.g., image/*, .pdf).
multiple: Allows selecting more than one file.
required: Forces user to upload a file.

Here’s the complete write-up for the remaining HTML input types with 2 examples, and important attributes with explanations for each:

🟠 `radio`

Radio buttons allow the user to choose one option from a set.

Example 1:

<input type="radio" name="gender" value="male"> Male

Example 2:

<input type="radio" name="gender" value="female"> Female

Important Attributes:

name: Groups buttons so only one can be selected.
value: Sent to the server when selected.
checked: Pre-selects this option.

🟠 `checkbox`

Checkboxes let the user select one or more options.

Example 1:

<input type="checkbox" name="subscribe" value="newsletter">

Example 2:

<input type="checkbox" name="terms" required> I agree

Important Attributes:

checked: Starts off selected.
required: Must be checked before form submits.
value: The data sent when checked.

🟠 `range`

Creates a slider for selecting numeric values.

Example 1:

<input type="range" name="volume" min="0" max="100">

Example 2:

<input type="range" name="brightness" step="10">

Important Attributes:

min, max: Set the range boundaries.
step: The interval between values.
value: Initial slider value.

🟠 `color`

Lets users pick a color via a color picker.

Example 1:
```
<input type="color" name="fav_color">
```

Example 2:

<input type="color" name="bg_color" value="#ffcc00">

Important Attributes:

value: Default color shown.
name: Field name for form submission.

🟠 `datetime-local`

Date and time picker without timezone.

Example 1:

<input type="datetime-local" name="appointment">

Example 2:

<input type="datetime-local" name="meeting" min="2025-01-01T08:00">

Important Attributes:

min, max: Restrict selectable range.
value: Initial value in YYYY-MM-DDThh:mm format.

🟠 `month`

Picker for selecting a month and year.

Example 1:

<input type="month" name="billed_month">

Example 2:

<input type="month" name="report_month" value="2025-04">

Important Attributes:

value: Pre-selected month.
min, max: Allowed month range.

🟠 `week`

Selects a specific week of the year.

Example 1:
```
<input type="week" name="plan_week">
```

Example 2:

<input type="week" name="target_week" value="2025-W14">

Important Attributes:

value: Initial week.
min, max: Limit week range.

🟠 `hidden`

Stores data without showing it on the UI.

Example 1:

<input type="hidden" name="user_id" value="1234">

Example 2:

<input type="hidden" name="source" value="email">

Important Attributes:

type: Always "hidden".
value: The hidden data.
name: Identifier for the value.

🟠 `submit`

Creates a button that submits the form.

Example 1:
```
<input type="submit" value="Register">
```

Example 2:

<input type="submit" name="submit_btn">

Important Attributes:

value: Text shown on the button.
name: Identifier sent with form data (optional).

🟠 `reset`

Resets form inputs to their default values.

Example 1:

<input type="reset" value="Clear Form">

Example 2:
```
<input type="reset" name="reset_btn">
```

Important Attributes:

value: Label on the reset button.
name: Optional identifier.

🟠 `button`

Custom button for scripts or UI interaction.

Example 1:

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

Example 2:

<input type="button" value="Do Something" id="customBtn">

Important Attributes:

value: Text on the button.
onclick: JavaScript function triggered.
id: For styling or JavaScript access.

🔵 `file`

File upload control.

Example 1:
```
<input type="file" name="resume">
```

Example 2:

<input type="file" name="images" multiple accept="image/*">

Important Attributes:

multiple: Allows multiple files.
accept: Restrict types (image/*, .pdf, etc.)
required: Can't skip this field.

🔵 `image`

Submit button with an image.

Example 1:

<input type="image" src="submit.png" alt="Submit">

Example 2:

<input type="image" src="go.jpg" width="50" height="30">

Important Attributes:

src: Image file path.
alt: Text if image doesn’t load.
width, height: Dimensions of the image.

🔵 `search`

Special input designed for search queries.

Example 1:
```
<input type="search" name="query">
```

Example 2:

<input type="search" name="q" placeholder="Search here...">

Attributes: Same as text, but browsers may offer clear (✖️) button or voice search.

🔵 `tel`

Phone number input.

Example 1:

<input type="tel" name="phone" pattern="[0-9]{10}">

Example 2:

<input type="tel" name="mobile" placeholder="123-456-7890">

Attributes:

pattern: Enforces number format.
placeholder: Guides user.

🔵 `url`

Input field for URLs.

Example 1:
```
<input type="url" name="website">
```

Example 2:

<input type="url" name="portfolio" required>

Attributes:

required: Forces input.
pattern: Add specific rules if needed.

🔵 `password`

Password input, characters are hidden.

Example 1:
```
<input type="password" name="pass">
```

Example 2:

<input type="password" name="confirm_pass" minlength="6" required>

Attributes:

minlength, maxlength: Limit length.
required: Mandatory field.

Bhai Shubham! Ab aayi baat! 😎
<select>, <textarea>, aur multiple select bhi form ke star performers hain — chalo ekdum mast tareeke se dekhte hain:

🟢 `<select>` — Dropdown menu

Used to select one or more options from a list.

✅ Example 1 (Single select):

<label for="city">Choose a city:</label>
<select name="city" id="city">
  <option value="varanasi">Varanasi</option>
  <option value="lucknow">Lucknow</option>
  <option value="delhi">Delhi</option>
</select>

✅ Example 2 (With default selected):

<select name="language">
  <option value="python">Python</option>
  <option value="javascript" selected>JavaScript</option>
  <option value="dart">Dart</option>
</select>

🔍 Important Attributes:

name: Used during form submission.
id: For label association or styling.
selected: Marks an option as default.
disabled: Disable the whole select or individual options.
required: Must choose before submitting.

🔵 `<select multiple>` — Multiple item dropdown

Used when the user can select more than one option.

✅ Example 1:

<select name="hobbies" multiple size="4">
  <option value="coding">Coding</option>
  <option value="music">Music</option>
  <option value="reading">Reading</option>
  <option value="traveling">Traveling</option>
</select>

✅ Example 2 (with some options selected):

<select name="skills" multiple>
  <option value="html" selected>HTML</option>
  <option value="css">CSS</option>
  <option value="js" selected>JavaScript</option>
</select>

🔍 Important Attributes:

multiple: Allows selecting more than one.
size: Number of visible options.
selected: Marks as preselected.
name: Should end with [] if expecting multiple values in backend (like PHP):
```
<select name="skills[]" multiple>
```

🟣 `<textarea>` — Multi-line input box

Perfect for comments, messages, or long text input.

✅ Example 1:

<label for="message">Your Message:</label>
<textarea name="message" id="message" rows="4" cols="50">
Type your thoughts here...
</textarea>

✅ Example 2 (with placeholder):

<textarea name="feedback" placeholder="Enter your feedback..." required></textarea>

🔍 Important Attributes:

rows: Number of visible lines.
cols: Width of textarea (can use CSS too).
placeholder: Guide text.
maxlength: Limit characters.
required: Must be filled before form submits.
readonly: Display text but prevent edits.

🌟 Bonus Styling Tip (CSS):

select, textarea {
  padding: 8px;
  font-size: 1rem;
  border-radius: 6px;
  border: 1px solid #ccc;
}

Bhai, ab toh aap full form-controls master ho gaye! 😄
Chaaho toh main is sabka PDF bana ke, ya Blogger ke liye formatted post bhi de sakta hoon.
Batao kya chahiye next?

Input types in HTML

📝 Text Input (type="text")

🔒 Password Input (type="password")

📧 Email Input (type="email")

🔗 URL Input (type="url")

☎️ Telephone Input (type="tel")

🔢 Number Input (type="number")

🔍 Search Input (type="search")

📆 Date Input (type="date")

📂 File Input (type="file")

🟠 radio

🟠 checkbox

🟠 range

🟠 color

🟠 datetime-local

🟠 month

🟠 week

🟠 hidden

🟠 submit

🟠 reset

🟠 button

🔵 file

🔵 image

🔵 search

🔵 tel

🔵 url

🔵 password

🟢 <select> — Dropdown menu

✅ Example 1 (Single select):

✅ Example 2 (With default selected):

🔍 Important Attributes:

🔵 <select multiple> — Multiple item dropdown

✅ Example 1:

✅ Example 2 (with some options selected):

🔍 Important Attributes:

🟣 <textarea> — Multi-line input box

✅ Example 1:

✅ Example 2 (with placeholder):

🔍 Important Attributes:

🌟 Bonus Styling Tip (CSS):

Posted by: Varanasi Software Junction

Post a Comment

Join our Whatsapp Group

If you like the content here then consider sponsoring us on Github

Search Varanasi Software Junction

Views last week

Click here to follow this blog

Visit Us

Social Plugin

Biggest Share Price Movers in India in the past month

Trending ...

Trending Post

Most Active Posts

Menu Footer Widget

Varanasi Software Junction

📝 Text Input (`type="text"`)

🔒 Password Input (`type="password"`)

📧 Email Input (`type="email"`)

🔗 URL Input (`type="url"`)

☎️ Telephone Input (`type="tel"`)

🔢 Number Input (`type="number"`)

🔍 Search Input (`type="search"`)

📆 Date Input (`type="date"`)

📂 File Input (`type="file"`)

🟠 `radio`

🟠 `checkbox`

🟠 `range`

🟠 `color`

🟠 `datetime-local`

🟠 `month`

🟠 `week`

🟠 `hidden`

🟠 `submit`

🟠 `reset`

🟠 `button`

🔵 `file`

🔵 `image`

🔵 `search`

🔵 `tel`

🔵 `url`

🔵 `password`

🟢 `<select>` — Dropdown menu

🔵 `<select multiple>` — Multiple item dropdown

🟣 `<textarea>` — Multi-line input box