HTML Input Types
HTML input types are used to define the type of data that can be entered into an HTML form element.
Here are some of the most commonly used HTML input types:
- Text: Allows users to enter plain text into a form field.
As an example:
<input type="text" />
- Password: Allows users to enter a password into a form field, which is hidden as they type.
As an example:
<input type="password" />
- Number: Allows users to enter a numeric value into a form field.
As an example:
<input type="number" />
- Checkbox: Allows users to select one or more options from a list of checkboxes.
As an example:
<input type="checkbox" />
- Radio: Allows users to select one option from a list of radio buttons.
As an example:
<input type="radio" />
- Date: Allows users to select a date from a calendar.
As an example:
<input type="date" />
- Email: Allows users to enter an email address into a form field.
As an example:
<input type="email" />
- File: Allows users to upload a file from their device.
As an example:
<input type="file" />
- Submit: Displays a button that, when clicked, submits the form data to the server.
As an example:
<input type="submit" />
- Reset: Displays a button that, when clicked, resets the form to its default values.
As an example:
<input type="reset" />
- Range: Allows users to select a value within a specified range by dragging a slider.
As an example:
<input type="range" />
- Color: Allows users to select a color from a color picker.
As an example:
<input type="color" />
- Time: Allows users to select a time using a time picker.
As an example:
<input type="time" />
- Month: Allows users to select a month and year using a month picker.
As an example:
<input type="month" />
- Week: Allows users to select a week and year using a week picker.
As an example:
<input type="week" />
- Tel: Allows users to enter a telephone number into a form field.
As an example:
<input type="tel" />
- Search: Allows users to enter a search query into a form field.
As an example:
<input type="search" />
- URL: Allows users to enter a URL into a form field.
As an example:
<input type="url" />
- Hidden: Allows you to create a form element that is hidden from the user.
As an example:
<input type="hidden" />
- Button: Displays a button that can be used to trigger a JavaScript function, but doesn't submit the form data to the server.
As an example:
<input type="button" />
Input Restrictions
HTML provides a number of input restrictions that you can use to ensure that users enter the correct type of data into your forms.
Here are some examples:
- Required: Specifies that an input field must be filled out before submitting the form.
As an example:
<input type="text" name="username" required />
- Maxlength: Specifies the maximum number of characters allowed in an input field.
As an example:
<input type="text" name="description" maxlength="100" />
- Min and Max: Specifies the minimum and maximum values allowed for a numeric input field.
As an example:
<input type="number" name="age" min="18" max="120" />
- Pattern: Specifies a regular expression pattern that the input value must match.
As an example:
<input type="text" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" />
- Readonly: Specifies that an input field should be read-only, and cannot be edited by the user.
As an example:
<input type="text" name="address" readonly />
- Disabled: Specifies that an input field should be disabled, and cannot be used by the user.
As an example:
<input type="text" name="password" disabled />
- Placeholder: Specifies a short hint that describes the expected value of an input field.
As an example:
<input type="text" name="email" placeholder="Enter your email address" />