HTML Input Types

The <input> tag is the most flexible form element. The type attribute decides what kind of field it is. HTML5 added many new types, which give better keyboards on phones and built-in checks.

---

Common input types

Type	Use
text	Single line text (default)
password	Text hidden with dots
email	Email address, with a built-in format check
number	Numbers only, with up and down arrows
tel	Phone number
url	Website address
search	Search box
date, time	Date picker and time picker
color	Colour picker
range	Slider
file	Choose a file to upload
checkbox	Choose none, one or many options
radio	Choose only one option from a group
hidden	Not shown, but sent with the form
submit, reset, button	Buttons

<input type="text" name="name" placeholder="Your name">
<input type="password" name="pass" placeholder="Password">
<input type="email" name="email" placeholder="you@example.com">
<input type="number" name="age" min="1" max="100">
<input type="date" name="dob">
<input type="color" name="colour">
<input type="range" name="level" min="0" max="10">
<input type="file" name="photo">

---

Useful input attributes

Attribute	Meaning
name	Name of the field, needed to send its value
value	Starting value
placeholder	A hint shown inside an empty field
required	The field cannot be left empty
min, max	Smallest and biggest number or date
maxlength	Maximum number of characters
pattern	A regular expression the value must match
readonly	The value can be seen but not changed
disabled	The field is switched off and its value is not sent
autofocus	The cursor goes to this field when the page loads

---

Built-in validation

With required, type="email" and pattern, the browser checks the form before sending it, and shows a message when something is wrong.

<form>
  <input type="email" name="email" required>
  <input type="text" name="pin" pattern="[0-9]{6}" maxlength="6" placeholder="6 digit PIN" required>
  <button type="submit">Send</button>
</form>

---

Summary

• The type decides how an input works.
• Use the right type, like email or number, for better keyboards and checks.
• Use required, pattern, min and max for basic validation.
• Learn the basics of forms in HTML Forms.

• Previous Page
• Next Page

---

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.