HTML HTML Tutorial HTML Forms HTML Graphics HTML Media HTML APIs HTML Tags



HTML Input Types

HTML input types are used to create different types of input fields in a web form. These input fields allow users to enter data and submit it to the server for processing. There are several types of input fields available in HTML, each with its own unique purpose and functionality.

Text Input

The text input type is used to create a single-line text input field. This type of input field is commonly used for collecting user names, email addresses, and other short pieces of text. Here is an example of how to create a text input field:

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

The above code will create a text input field with the name "username" and a placeholder text of "Enter your username".

Password Input

The password input type is used to create a single-line text input field that masks the characters entered by the user. This type of input field is commonly used for collecting passwords and other sensitive information. Here is an example of how to create a password input field:

<input type="password" name="password" placeholder="Enter your password">

The above code will create a password input field with the name "password" and a placeholder text of "Enter your password".

Checkbox Input

The checkbox input type is used to create a checkbox that allows users to select one or more options from a list. This type of input field is commonly used for collecting user preferences and other types of data that require multiple selections. Here is an example of how to create a checkbox input field:

<input type="checkbox" name="option1" value="Option 1"> Option 1
<input type="checkbox" name="option2" value="Option 2"> Option 2
<input type="checkbox" name="option3" value="Option 3"> Option 3

The above code will create three checkbox input fields with the names "option1", "option2", and "option3". Each checkbox has a value that will be submitted to the server if it is selected by the user.

Radio Input

The radio input type is used to create a set of radio buttons that allow users to select one option from a list. This type of input field is commonly used for collecting user preferences and other types of data that require a single selection. Here is an example of how to create a radio input field:

<input type="radio" name="option" value="Option 1"> Option 1
<input type="radio" name="option" value="Option 2"> Option 2
<input type="radio" name="option" value="Option 3"> Option 3

The above code will create three radio input fields with the name "option". Only one radio button can be selected at a time, and the value of the selected radio button will be submitted to the server.

Select Input

The select input type is used to create a drop-down list that allows users to select one option from a list. This type of input field is commonly used for collecting user preferences and other types of data that require a single selection. Here is an example of how to create a select input field:

<select name="option">
  <option value="Option 1">Option 1</option>
  <option value="Option 2">Option 2</option>
  <option value="Option 3">Option 3</option>
</select>

The above code will create a select input field with the name "option" and three options to choose from. The value of the selected option will be submitted to the server.

File Input

The file input type is used to create a file upload field that allows users to select a file from their computer. This type of input field is commonly used for uploading images, documents, and other types of files. Here is an example of how to create a file input field:

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

The above code will create a file input field with the name "file". When the user selects a file, the file will be uploaded to the server.

Submit Input

The submit input type is used to create a button that allows users to submit the form data to the server. Here is an example of how to create a submit input field:

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

The above code will create a submit input field with the text "Submit". When the user clicks the button, the form data will be submitted to the server.

Conclusion

HTML input types are an essential part of web forms. They allow users to enter data and submit it to the server for processing. By using the appropriate input types, web developers can create forms that are easy to use and provide a great user experience.

References

Activity