Html Input Type

2. <input type="password">

The <input type="password"> field is crucial for privacy & security in web forms. This type of input allows users to enter sensitive information, such as passwords, which should not be visible to anyone else who might be looking at the screen. The characters entered into a password field are typically masked, appearing as dots or asterisks to keep the information confidential.

Here's an example of how to set up a password input in your HTML:

<form>

  <label for="password">Password:</label>

  <input type="password" id="password" name="password">

  <input type="submit" value="Submit">

</form>

Output

In this form, when a user types their password, it won't be displayed on the screen. Instead, each character they type is replaced by a dot. This helps prevent others from seeing the password, adding an essential layer of security. Just like with text inputs, when the form is submitted, the data entered into the password field is sent to the server, but the way it is handled must ensure it remains secure, usually by encrypting the data.

Note -: This input type is a fundamental tool in any form where user privacy is a priority, such as login screens, registration pages, & settings panels where passwords need to be entered or changed.

3. <input type="submit">

The <input type="submit"> button is essential for completing & submitting web forms. This button tells the browser to send the information entered in the form to the server. Without a submit button, users would not be able to send their data for processing, making the form incomplete.

Here's how you can include a submit button in your HTML form:

<form action="/submit-form" method="post">

  <input type="text" id="name" name="name" placeholder="Enter your name">

  <input type="submit" value="Submit">

</form>

In this example, the form includes a text input for the user's name & a submit button labeled "Submit." When a user clicks on this button, the form data is packaged & sent to the server at the specified action URL, in this case, "/submit-form." The method "post" ensures that the data is sent as part of the request body, keeping it hidden from the URL, which is safer and more secure than sending data via the URL.

Output

Note -: The submit button is straightforward but plays a critical role in the functionality of web forms, acting as the bridge between the user and the server.

4. <input type="reset">

The <input type="reset"> button is used in web forms to allow users to clear all the data they have entered into the form, resetting it back to its initial state. This can be useful in long forms or when users might need to start over due to errors or changes in their input.

Here's an example of incorporating a reset button into your HTML form:

<form>

  <label for="email">Email:</label>

  <input type="email" id="email" name="email">

  <label for="feedback">Feedback:</label>

  <textarea id="feedback" name="feedback"></textarea>

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

  <input type="submit" value="Submit">

</form>

Output

In this setup, the form includes fields for an email and feedback. If a user fills out part of this form and then decides they want to start over, clicking the "Clear All" reset button will erase the entered data, reverting the fields to their default values. This button does not submit any data to the server; it only clears the form on the user's device.

Note -: While not always necessary, the reset button can enhance user experience by providing an easy way to correct mistakes or reconsider the information they've entered before submission.

5. <input type="radio">

The <input type="radio"> button is a crucial element in HTML forms when you need users to select only one option from a set of choices. Radio buttons are designed to limit the user to one selection, ensuring that the form accurately captures preferences or decisions where only one choice is applicable.

Here’s how to use radio buttons in your HTML form:

<form>

  <p>Please select your age range:</p>

  <label>

    <input type="radio" name="age" value="under18">

    Under 18

  </label>

  <label>

    <input type="radio" name="age" value="18-24">

    18-24

  </label>

  <label>

    <input type="radio" name="age" value="25-34">

    25-34

  </label>

  <input type="submit" value="Submit">

</form>

Output

In this example, users can choose their age range from three options. Each radio button shares the same name attribute, which groups them together. This grouping tells the browser that these choices are connected, and only one can be selected at a time. When a user selects an option, any previously selected option in the group is deselected.

Note -: Radio buttons are simple but effective for gathering precise data where multiple choices are presented but only one is appropriate.

6. <input type="checkbox">

The <input type="checkbox"> allows users to select multiple options from a set of choices, unlike radio buttons which limit to one choice. This type of input is ideal for forms where users may need to indicate all applicable options, such as selecting interests, skills, or preferences.

Here’s an example of how checkboxes can be used in an HTML form:

<form>

  <p>Select your hobbies:</p>

  <label>

    <input type="checkbox" name="hobby" value="reading">

    Reading

  </label>

  <label>

    <input type="checkbox" name="hobby" value="traveling">

    Traveling

  </label>

  <label>

    <input type="checkbox" name="hobby" value="cooking">

    Cooking

  </label>

  <input type="submit" value="Submit">

</form>

Output

In this form, users can check one, two, or all three options, depending on what hobbies they enjoy. Each checkbox functions independently, so selecting or deselecting one does not affect the others. This flexibility makes checkboxes particularly useful for gathering data on multiple interests or features that can occur simultaneously.

Note -: Checkboxes enhance user interaction by providing freedom to choose multiple responses, making them essential for surveys, registration forms, and any application where multiple selections are relevant.

7. <input type="button">

The <input type="button"> is a versatile tool in HTML forms, used to create buttons that are not directly tied to submitting or resetting the form's data. These buttons can be programmed to perform various JavaScript functions, making them highly customizable for different interactive tasks on a webpage.

Here’s how you can integrate a button input into your HTML form:

<form>

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

</form>

Output

In this example, the button is set up with an onclick event that triggers a JavaScript alert displaying "Hello World!" when clicked. This shows how <input type="button"> can be used to add interactivity to your web pages beyond just collecting data. Users can interact with these buttons to trigger animations, open modal windows, validate form data before submission, and much more.

Note -: Unlike <input type="submit"> and <input type="reset">, the <input type="button"> does not have a default behavior of sending or clearing form data, which gives developers more control over its function without interfering with the form's main actions.

8. <input type="file">

The <input type="file"> element is essential for enabling users to upload files through a web form. This type of input creates a button that users can click to browse their device's storage and select a file to upload. It's widely used for uploading documents, photos, and other media, making it invaluable for applications like job applications, profile updates, and content management systems.

Here’s a basic example of how to include a file upload button in your HTML form:

<form>

  <label for="upload">Upload file:</label>

  <input type="file" id="upload" name="upload">

  <input type="submit" value="Submit">

</form>

Output

In this form, users can select a file from their device, and upon form submission, the selected file is sent to the server. This setup typically requires server-side processing to save and handle the file appropriately, which might include storing it in a database or a file storage system.

The <input type="file"> element is particularly versatile because it supports multiple file types, which can be specified using the accept attribute to limit the types of files that can be uploaded—for example, accept=".jpg, .jpeg, .png" for images.

Note -: This input type enhances the functionality of web forms by allowing for the integration of user-generated content, crucial for many interactive and dynamic websites.

9. <input type="image">

The <input type="image"> serves as both an image and a submit button in HTML forms. This input type allows developers to use a graphic as the submit button instead of the default button style, offering a way to integrate more engaging, visually appealing elements into forms.

Here's how you can use an image as a submit button in your HTML form:

<form>

  <label for="username">Username:</label>

  <input type="text" id="username" name="username">

  <label for="password">Password:</label>

  <input type="password" id="password" name="password">

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

</form>

Output

In this example, when users fill out the form and click on the image, the form data is submitted. The <input type="image"> tag uses the src attribute to specify the URL of the image to display as the button, and the alt attribute provides text for screen readers, enhancing accessibility.

Note -: This type of input makes the form more attractive and can be crucial for maintaining a consistent visual theme across a website. It combines the practicality of submitting form data with the flexibility of customizing button appearance to better fit the design of the web page.

HTML5 Newly Added <input> Types

HTML5 introduced several new <input> types that enhance the functionality and user experience of web forms by allowing for more specific data input without the need for additional scripting or workarounds.

1. <input type="color">

The <input type="color"> provides a color picker to users, enabling them to select a color. This is particularly useful for applications that need users to choose a color for a design or style setting.

<form>

  <label for="favcolor">Choose your favorite color:</label>

  <input type="color" id="favcolor" name="favcolor" value="#ff0000">

  <input type="submit" value="Submit">

</form>

Output

2. <input type="date">

The <input type="date"> allows users to enter a date through a built-in date picker. It's ideal for forms requiring a specific date, such as bookings and events.

<form>

  <label for="birthdate">Birthdate:</label>

  <input type="date" id="birthdate" name="birthdate">

  <input type="submit" value="Submit">

</form>

Output

3. <input type="datetime-local">

This input type lets users enter both a date and a time, without specifying a timezone, which is useful for scheduling events that are time-sensitive but location-independent.

<form>

  <label for="appointment">Appointment:</label>

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

  <input type="submit" value="Submit">

</form>

Output

4. <input type="email">

The <input type="email"> is designed for email address entries, validating the correct format of the email address before the form is submitted.

<form>

  <label for="email">Email:</label>

  <input type="email" id="email" name="email">

  <input type="submit" value="Submit">

</form>

Output

5. <input type="month">

This type lets users select a month and year, useful for forms requiring users to specify a period without a specific day.

<form>

  <label for="startmonth">Start Month and Year:</label>

  <input type="month" id="startmonth" name="startmonth">

  <input type="submit" value="Submit">

</form>

Output

6. <input type="number">

The <input type="number"> allows users to enter a numeric value, which can be restricted in range and incremented/decremented using spinner controls.

<form>

  <label for="quantity">Quantity:</label>

  <input type="number" id="quantity" name="quantity" min="1" max="100">

  <input type="submit" value="Submit">

</form>

Output

7. <input type="url">

This type allows for the entry of URLs, ensuring the format is correct before submitting the form.

<form>

  <label for="homepage">Homepage:</label>

  <input type="url" id="homepage" name="homepage">

  <input type="submit" value="Submit">

</form>

Output

8. <input type="week">

Enables users to select a week and year, which is handy for scheduling tasks or events that are measured in weeks.

<form>

  <label for="weekselection">Select Week and Year:</label>

  <input type="week" id="weekselection" name="weekselection">

  <input type="submit" value="Submit">

</form>

Output

9. <input type="search">

Designed to make search bars more functional, this type includes features like clearing the search field.

<form>

  <label for="search">Search:</label>

  <input type="search" id="search" name="search">

  <input type="submit" value="Search">

</form>

Output

10. <input type="tel">

This input type is for telephone numbers, helping ensure that users enter a number in a format that the form can validate.

<form>

  <label for="phone">Phone Number:</label>

  <input type="tel" id="phone" name="phone">

  <input type="submit" value="Submit">

</form>

Output

Frequently Asked Questions

Why should I use specific input types like <input type="email"> or <input type="url">?

Using specific input types like <input type="email"> and <input type="url"> helps ensure that the data entered conforms to the required format, reducing errors and improving data quality. The browser automatically checks if the input matches the expected pattern and notifies the user if it doesn't.

Can <input type="date"> handle different date formats?

The <input type="date"> element displays date formats based on the browser locale, ensuring compatibility with regional date formats. However, the data submitted to the server is always in the format YYYY-MM-DD, regardless of the display format.

How does <input type="number"> improve form data handling?

Using <input type="number"> restricts users to enter only numerical values, which can be further controlled by specifying limits using attributes like min, max, and step. This prevents invalid entries and simplifies validation on the server side.

Conclusion

In this article, we have learned about the various HTML <input> types, including the standard ones like text, password, and submit, as well as the newly introduced HTML5 inputs such as color, date, email, and more. Each input type is designed to fulfill specific data collection needs, making your forms more user-friendly and efficient. 

You can refer to our guided paths on the Coding Ninjas. You can check our course to learn more about DSA, DBMS, Competitive Programming, Python, Java, JavaScript, etc. Also, check out some of the Guided Paths on topics such as Data Structure andAlgorithms, Competitive Programming, Operating Systems, Computer Networks, DBMS, System Design, etc., as well as some Contests, Test Series, and Interview Experiences curated by top Industry.