Form inputs are the main way users enter information. HTML provides many different input types depending on what data you need.

Common Input Types

Text Input

Designed for short textual data input, such as usernames, email addresses, or brief messages.

<input type="text" />

Password Input

Used for password input, where characters are masked for security purposes.

<input type="password" />

Email Input

Used for collecting email addresses from users. Performs client-side validation to ensure the entered value is valid in email format.

<input type="email" />

Telephone Input

Used for collecting telephone numbers from users.

<input type="tel" />

Number Input

Used for collecting numerical data from users. Provides a numeric keypad on mobile devices.

<input type="number" />

Checkbox

Allows users to select one or more options from a list of choices. Suitable for scenarios where multiple selections are allowed, such as selecting multiple items from a list or agreeing to terms and conditions.

<input type="checkbox" />

Radio Button

Allows users to select one option from a list of mutually exclusive choices. Suitable for scenarios where only one option should be selected, such as gender selection or choosing a payment method.

<input type="radio" />

File Input

Allows users to upload files from their device, choose from their local filesystem, and submit them with form data. This feature is particularly useful when attaching documents or images.

<input type="file" />

Date Input, Time Input, and DateTime Input

Allows users to input dates, times, or both. Provides user-friendly interfaces for selecting dates and times.

<input type="date" />
<input type="time" />
<input type="datetime-local" />

Input something into the fields, and they will suggest various options. Don't worry, no data will be collected.

You may have noticed that filling out the form is not very convenient when you do not understand what is being asked for in each field. That's why the labels come to our aid.