HTML forms let users enter data on web pages. The <input> element creates different kinds of fields such as text boxes, email fields, sliders, and file pickers. Choosing the right type helps browsers show better controls, perform basic validation, and improve the user experience.
As a beginner, learning the most common input types is the first step toward building interactive and user-friendly web forms.
text – plain single-line text.password – hidden characters for passwords.email – email address with basic validation.tel – phone number input (often shows phone keypad on mobile).url – website address, validated as a URL.search – search field, sometimes styled slightly differently.number – numeric values, with optional min/max.date, time – pickers for date and time.color – color picker widget.checkbox – on/off options; allow multiple selections.radio – choose exactly one option from a group.file – select files from the device.range – slider to pick a value between limits.reset, submit – buttons to reset or submit the form.Every input is created with the same basic tag, but the type changes its behavior:
<input type="text" name="username" placeholder="Enter your name">
<input type="email" name="email" required>
<input type="number" name="age" min="1" max="120">
Common attributes:
type – defines the kind of input (text, email, date, etc.).name – key used when sending data to the server.id – used to connect inputs with <label> elements.placeholder – hint text shown inside empty fields.required – marks a field as mandatory.min, max, step – control allowed numeric/range values.value – initial value of the field.
<form action="#" onsubmit="alert('Form submitted!'); return false;">
<label for="text">Text input:</label>
<input type="text" id="text" name="text" placeholder="Enter text" required>
<label for="password">Password input:</label>
<input type="password" id="password" name="password" placeholder="Enter password" required>
<label for="email">Email input:</label>
<input type="email" id="email" name="email" placeholder="example@mail.com" required>
<label for="number">Number input (1-10):</label>
<input type="number" id="number" name="number" min="1" max="10">
<label for="tel">Telephone input:</label>
<input type="tel" id="tel" name="tel" placeholder="+1234567890">
<label for="url">URL input:</label>
<input type="url" id="url" name="url" placeholder="https://example.com">
<label for="date">Date input:</label>
<input type="date" id="date" name="date">
<label for="time">Time input:</label>
<input type="time" id="time" name="time">
<label for="color">Color picker input:</label>
<input type="color" id="color" name="color" value="#ff0000">
<label>
<input type="checkbox" id="subscribe" name="subscribe">
Subscribe to newsletter
</label>
<label>Radio inputs:</label>
<label><input type="radio" name="gender" value="male"> Male</label>
<label><input type="radio" name="gender" value="female"> Female</label>
<label for="file">File upload input:</label>
<input type="file" id="file" name="file">
<label for="range">Range input (0-100):</label>
<input type="range" id="range" name="range" min="0" max="100">
<br><br>
<button type="submit">Submit Form</button>
</form>
Below is the same form rendered in the browser. Notice how each input type gives a different control and some provide built-in validation or custom UI (date picker, color picker, etc.).
type (for example, email instead of text for emails) to get built-in validation and better mobile keyboards.placeholder attribute to hint expected input, but always keep proper <label> elements for accessibility.required attribute to important fields to prevent empty form submissions.min, max, and step with number or range inputs for better data control.file inputs only let users choose files; server-side code is needed to process uploads.type="email", type="number", and required on key fields.<input> element supports many type values for different kinds of data.placeholder, required, min, and max for better form behavior.