Input Types

HTML forms are a way to collect user input on a website. While designing a form, you will often want to handle different types of input, like text fields, checkboxes, radio buttons, and more. HTML provides us with a variety of input types for this purpose. In this tutorial, we will explore some of the most commonly used types.

Text Input Type

The text input type is the default if the type attribute is not specified. It creates a single-line text input field.

<form>
    <label for="fname">First name:</label><br>
    <input type="text" id="fname" name="fname"><br>
</form>

Password Input Type

The password input type is used for input fields that should contain a password. The characters in a password field are masked (shown as asterisks or circles).

<form>
    <label for="pwd">Password:</label><br>
    <input type="password" id="pwd" name="pwd">
</form>

Submit Input Type

The submit input type is used to create a submit button. On clicking this button, the form data is sent to the server.

<form action="/submit">
    <input type="submit" value="Submit">
</form>

Radio Input Type

The radio input type is used to let a user select one option from a limited number of choices.

<form>
    <input type="radio" id="male" name="gender" value="male">
    <label for="male">Male</label><br>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">Female</label><br>
</form>

Checkbox Input Type

The checkbox input type is used to let a user select zero or more options of a limited number of choices.

<form>
    <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
    <label for="vehicle1"> I have a bike</label><br>
    <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
    <label for="vehicle2"> I have a car</label><br>
</form>

Number Input Type

The number input type is used for input fields that should contain numeric input.

<form>
    <label for="quantity">Quantity (between 1 and 5):</label><br>
    <input type="number" id="quantity" name="quantity" min="1" max="5">
</form>

Email Input Type

The email input type is used for input fields that should contain an e-mail address.

<form>
    <label for="email">Enter your email:</label><br>
    <input type="email" id="email" name="email">
</form>

Date Input Type

The date input type is used for input fields that should contain a date.

<form>
    <label for="birthday">Enter your birth date:</label><br>
    <input type="date" id="birthday" name="birthday">
</form>

These are just a handful of the many input types available in HTML. Depending on your specific requirements, you might also find color, file, range, search, tel, url, etc. useful. Always choose the input type that best suits the type of input you expect the user to enter. This will not only make your website more user-friendly but also enhance data accuracy and security.