HTML Input Types

HTML provides various input types to create different types of form elements. Some of the common input types include:

  1. Text
  2. Password
  3. Button
  4. Number
  5. Email
  6. Checkbox
  7. Date
  8. Submit
  9. Radio
  10. File
  11. Reset
  12. Hidden

Each input type has a specific purpose and can be used to create different types of form fields.

Text

To create a text input field in HTML, you can use the <input> element with the type="text" attribute.

<label for="username">Username:</label> <input type="text" id="username" name="username">
run this source code Browser View

In the above example, the label element provides a text label for the input field, while the input element creates the actual input field with the type="text" attribute. The id and name attributes are used to uniquely identify the input field and send its value to the server when the form is submitted.

Password

To create a password input field in HTML, you can use the <input> element with the type="password" attribute.

<label for="password">Password:</label> <input type="password" id="password" name="password">
run this source code Browser View

In the above example, the label element provides a text label for the password input field, while the input element creates the actual input field with the type="password" attribute. The id and name attributes are used to uniquely identify the password input field and send its value to the server when the form is submitted.

Difference between "text" and "password" input types

The main difference between "text" and "password" input types in HTML is that the value entered in a password input field is not visible to the user while typing, whereas the value entered in a text input field is visible.

In a text input field, the entered value is displayed as plain text, while in a password input field, the entered value is masked with dots or asterisks to prevent it from being visible to others.

The purpose of a password input field is to allow users to enter confidential information, such as passwords or PINs, without revealing them to others. In contrast, a text input field is used for general text input, such as names, addresses, or messages.

Both input types can be customized using CSS and JavaScript to change their appearance and behavior.

Button

To create a button field in HTML, you can use the <button> element. Here's an example of how to create a basic button:

<button>Click me!</button>
run this source code Browser View

You can customize the button by adding various attributes to the <button> element. Here are some commonly used attributes:

  1. type: specifies the type of button. Common types are "button", "submit", and "reset".
<button type="submit">Submit</button>
  1. name: specifies the name of the button, which can be used to identify it when the form is submitted.
<button name="myButton">Click me!</button>
  1. value: specifies the value of the button, which is sent to the server when the form is submitted.
<button name="myButton" value="1">Click me!</button>
  1. onclick: specifies a JavaScript function to be executed when the button is clicked.
<button onclick="alert('Hello, world!')">Click me!</button>
run this source code Browser View

Number

<label for="quantity">Quantity:</label> <input type="number" id="quantity" name="quantity">
run this source code Browser View

In the above example, the type="number" attribute specifies that the input field should accept only numeric input. The id and name attributes are used to identify the input field.

You can also add other attributes to the <input> element to further customize the number input field. Following are some commonly used attributes:

  1. min: specifies the minimum value that the user can enter.
  2. max: specifies the maximum value that the user can enter.
  3. step: specifies the increment/decrement value when the user clicks the up/down arrows.
  4. value: specifies the default value of the input field.
  5. required: specifies that the input field must be filled out before submitting the form.
  6. disabled: specifies that the input field should be disabled and cannot be edited by the user.

Following is an example that uses some of these attributes:

<label for="quantity">Quantity:</label> <input type="number" id="quantity" name="quantity" min="1" max="10" step="1" value="1" required>
run this source code Browser View

In the above example, the input field only accepts values between 1 and 10, with a default value of 1 and an increment/decrement value of 1. The required attribute specifies that the input field must be filled out before submitting the form.

email

To create an email input field in HTML, you can use the <input> element with the type="email" attribute.

<label for="email">Email:</label> <input type="email" id="email" name="email">
run this source code Browser View

In the above example, the type="email" attribute specifies that the input field should accept only email addresses. The id and name attributes are used to identify the input field.

You can also add other attributes to the <input> element to further customize the email input field. Here are some commonly used attributes:

  1. placeholder: specifies a short hint that describes the expected value of the input field.
  2. required: specifies that the input field must be filled out before submitting the form.
  3. autocomplete: specifies whether the browser should autocomplete the input field. The values can be "on" (default) or "off".
  4. pattern: specifies a regular expression pattern that the input field's value must match.

Following is an example that uses some of these attributes:

<label for="email">Email:</label> <input type="email" id="email" name="email" placeholder="example@example.com" required autocomplete="off" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
run this source code Browser View

In the above example, the input field has a placeholder text that describes the expected value of the field. The required attribute specifies that the input field must be filled out before submitting the form. The autocomplete attribute is set to "off" to disable autocomplete. The pattern attribute specifies a regular expression pattern that the input field's value must match, to ensure that the value is a valid email address.

Date

To create a date input field, you can use the <input> element with the type="date" attribute.

<label for="birthdate">Birthdate:</label> <input type="date" id="birthdate" name="birthdate">
run this source code Browser View

In the above example, the type="date" attribute specifies that the input field should accept only dates. The id and name attributes are used to identify the input field.

You can also add other attributes to the <input> element to further customize the date input field. Here are some commonly used attributes:

  1. min: specifies the minimum date that the user can select.
  2. max: specifies the maximum date that the user can select.
  3. value: specifies the default value of the input field.
  4. required: specifies that the input field must be filled out before submitting the form.

Following is an example that uses some of these attributes:

<label for="birthdate">Birthdate:</label> <input type="date" id="birthdate" name="birthdate" min="1900-01-01" max="2023-05-04" value="2000-01-01" required>
run this source code Browser View

In this example, the input field only accepts dates between January 1, 1900 and May 4, 2023, with a default value of January 1, 2000. The required attribute specifies that the input field must be filled out before submitting the form.

Checkbox

To create a checkbox input field in HTML, you can use the <input> element with the type="checkbox" attribute.

<label for="agree">I agree to the terms and conditions</label> <input type="checkbox" id="agree" name="agree" value="yes">
run this source code Browser View

In the above example, the type="checkbox" attribute specifies that the input field should be a checkbox. The id and name attributes are used to identify the input field. The value attribute specifies the value that will be sent to the server if the checkbox is checked.

You can also add other attributes to the <input> element to further customize the checkbox input field. Here are some commonly used attributes:

  1. checked: specifies that the checkbox should be checked by default.
  2. disabled: specifies that the checkbox should be disabled and cannot be edited by the user.

Following is an example that uses some of these attributes:

<label for="subscribe">Subscribe to our newsletter</label> <input type="checkbox" id="subscribe" name="subscribe" value="yes" checked>
run this source code Browser View

In this example, the checkbox is checked by default because of the checked attribute.

Radio

To create a radio input field in HTML, you can use the <input> element with the type="radio" attribute. Radio buttons are used when you want to give the user a choice between several options, and only one option can be selected at a time.

<label>Choose your favorite color:</label> <input type="radio" id="red" name="color" value="red"> <label for="red">Red</label> <input type="radio" id="green" name="color" value="green"> <label for="green">Green</label> <input type="radio" id="blue" name="color" value="blue"> <label for="blue">Blue</label>
run this source code Browser View

In this example, three radio buttons, each with a different id, name, and value. The id attributes are used to identify each radio button, and the name attribute groups them together so that only one can be selected at a time. The value attribute specifies the value that will be sent to the server if the radio button is selected.

You can also add the checked attribute to specify which radio button should be selected by default.

<label>Choose your favorite fruit:</label> <input type="radio" id="apple" name="fruit" value="apple" checked> <label for="apple">Apple</label> <input type="radio" id="banana" name="fruit" value="banana"> <label for="banana">Banana</label> <input type="radio" id="orange" name="fruit" value="orange"> <label for="orange">Orange</label>
run this source code Browser View

In this example, the "Apple" radio button is selected by default because of the checked attribute.

file

To create a file input field in HTML, you can use the <input> element with the type="file" attribute.

<label for="myfile">Select a file:</label> <input type="file" id="myfile" name="myfile">
run this source code Browser View

In the above example, the type="file" attribute specifies that the input field should allow the user to select a file from their device. The id and name attributes are used to identify the input field.

You can also add other attributes to the <input> element to further customize the file input field. Here are some commonly used attributes:

  1. accept: specifies the types of files that the input field should accept (e.g. ".pdf,.docx,.jpg").
  2. multiple: specifies that the user can select multiple files.

Following is an example that uses some of these attributes:

<label for="myfiles">Select one or more files:</label> <input type="file" id="myfiles" name="myfiles" accept=".pdf,.docx,.jpg" multiple>
run this source code Browser View

In this example, the accept attribute specifies that the input field should only accept files with the extensions ".pdf", ".docx", or ".jpg". The multiple attribute specifies that the user can select multiple files.

Submit

To create a submit input field in HTML, you can use the <input> element with the type="submit" attribute.

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

In the above example, the type="submit" attribute specifies that the input field should be a submit button. The value attribute specifies the text that should be displayed on the button.

You can also add other attributes to the <input> element to further customize the submit button. Here are some commonly used attributes:

  1. name: specifies the name of the submit button (useful if you have multiple submit buttons on the same form).
  2. form: specifies the ID of the form that the submit button should be associated with (useful if you have multiple forms on the same page).

Following is an example that uses some of these attributes:

<form action="process-form.php" method="post"> <input type="text" name="name" placeholder="Enter your name"> <input type="email" name="email" placeholder="Enter your email"> <input type="submit" name="submit-form" value="Submit"> </form>
run this source code Browser View

In this example, the submit button is associated with the form using the form attribute. The name attribute is used to give the submit button a name (submit-form), which can be used to identify it on the server side when the form is submitted.

reset

To create a reset input field in HTML, you can use the <input> element with the type="reset" attribute.

<input type="reset" value="Reset">
run this source code Browser View

In the above example, the type="reset" attribute specifies that the input field should be a reset button. The value attribute specifies the text that should be displayed on the button.

When a user clicks on a reset button, all the form fields will be reset to their default values. Note that this can be a destructive action, so you should only use a reset button if it makes sense for your form.

You can also add other attributes to the <input> element to further customize the reset button. Here are some commonly used attributes:

form: specifies the ID of the form that the reset button should be associated with (useful if you have multiple forms on the same page)

Following an example that uses the form attribute:

<form action="process-form.php" method="post" id="myform"> <input type="text" name="name" placeholder="Enter your name"> <input type="email" name="email" placeholder="Enter your email"> <input type="reset" value="Reset" form="myform"> <input type="submit" name="submit-form" value="Submit"> </form>
run this source code Browser View

In this example, the reset button is associated with the form using the form attribute. When the user clicks on the reset button, the name and email fields will be reset to their default values.

Hidden

To create a hidden input field in HTML, you can use the <input> element with the type="hidden" attribute.

<input type="hidden" name="myhiddenfield" value="myhiddenvalue">

In this example, the type="hidden" attribute specifies that the input field should be hidden from the user. The name attribute specifies the name of the hidden field, and the value attribute specifies the value that should be associated with the hidden field.

Hidden input fields are often used to store data that needs to be passed between pages or scripts, but that the user should not see or interact with. For example, you might use a hidden input field to store a session ID or a CSRF token.

You can also use JavaScript to dynamically set the value of a hidden input field. For example:

<input type="hidden" name="mydynamicfield" id="mydynamicfield"> <script> document.getElementById("mydynamicfield").value = "dynamicvalue"; </script>

In the above example, the value of the hidden field is set dynamically using JavaScript. The document.getElementById("mydynamicfield").value expression retrieves the hidden field by its ID (mydynamicfield), and sets its value to "dynamicvalue".

Conclusion:

Input types refer to the various ways in which data can be entered or provided to a computer system or software. Some common input types include keyboard input, mouse input, voice input, touch input, and sensors input. Different input types may require different hardware or software to interpret and process the data effectively. The choice of input type depends on the specific requirements of the application and the preferences of the user.






Related Topics
  1. HTML Form Attributes
  2. HTML Form Elements
  3. HTML Form Action
  4. HTML Input Attributes
  1. HTML Input Form Attributes