HTML
HTML Input Types
Different HTML input types are used in HTML. These include:
Input Type Text
The input type text is used to get data in a single line.
<input type="text" name="username" placeholder="Enter your username">
Input Type Password
It is used to add a password field. The characters used by the user to set the password are displayed as circles or asterisks instead of letters.
<input type="password" name="password" placeholder="Enter password">Input Type Email
It adds fields to the HTML form to receive the input as an email address.
<input type="email" name="email" placeholder="Enter your email">Input Type Number
This HTML input type adds a numeric input field to the form. Developers can also restrict the number usage in this field.
<input type="number" name="quantity" placeholder="Enter a number">Input Type Tel
It defines a field in an HTML form that can accept input as a telephone number.
<input type="tel" name="phone" placeholder="Enter your phone number">Input Type Checkbox
This HTML input type defines a checkbox. A user can select one or more than one option within the limited number of choices available for checkboxes.
<label>
<input type="checkbox" name="subscribe" value="newsletter">
Subscribe to our newsletter
</label>
Input Type Radio
It is used to add a radio button, and these buttons only have a few choices to select from.
<form>
<label>
<input type="radio" name="gender" value="male"> Male
</label>
<label>
<input type="radio" name="gender" value="female"> Female
</label>
</form>
Input Type Button
It can be used to define any button within the HTML form.
<input type="button" value="Click Me"
onclick="alert('Button clicked!')">
Input Type Submit
This button is used to submit form input data to a form handler. The form handler is a server page that processes input data.
<form>
<input type="submit" value="Submit">
</form>
Input Type Date
The <input type=’date’> element is used to add or define fields containing the date in an HTML form.
<form>
<label for="appointment">Select a date:</label>
<input type="date" id="appointment" name="appointment">
</form>
Input Type Datetime-local
This input type is used to specify the date and time field without any time zone in the HTML form.
<form>
<label for="meeting">Select date and time:</label>
<input type="datetime-local" id="meeting" name="meeting">
</form>
Input Type Month
Similar to the input type date, it defines the month and year fields in the form and provides several options for the user to select their response.
<form>
<label for="birthmonth">Select your birth month:</label>
<input type="month" id="birthmonth" name="birthmonth">
</form>
Input Type Week
This input type specifies a field where users select a week and year.
<form>
<label for="week">Select a week:</label>
<input type="week" id="week" name="week">
</form>
Input Type Time
This input type is used to add a field from where a user can select a time.
<form>
<label for="meeting-time">Select a time:</label>
<input type="time" id="meeting-time" name="meeting-time">
</form>
Input Type Image
This HTML input type allows to define and use an image as a submit button for the form.
<input type="image" src="#"
alt="Submit" width="100" height="50">Input Type File
It is used to upload a file. It gives options like “select file” or “browse” to upload a file.
<form>
<label for="file-upload">Choose a file:</label>
<input type="file" id="file-upload" name="file-upload">
</form>
Input Type Hidden
It is used when a field needs to be hidden from the end user. Developers usually use it to add or modify data as needed.
<input type="hidden" name="userId" value="12345">Input Type Color
It defines a field that contains a color.
<form>
<label for="color-picker">Choose a color:</label>
<input type="color" id="color-picker"
name="color-picker" value="#ff0000">
</form>Input Type Range
The input type range is used to define “min” and “max” attributes in a field. It controls what numbers can be added to the specified field.
<form>
<label for="volume">Volume:</label>
<input type="range" id="volume" name="volume"
min="0" max="100" value="50">
</form>
Input Type Search
Input type search defines a search field in the form. It is like a search bar that you use to search data by putting text in the given field.
<form>
<label for="search">Search:</label>
<input type="search" id="search" name="search"
placeholder="Enter search terms">
</form>
Input Type Reset
To undo all the actions or to reset all the values, input type reset is used.
<input type="reset" value="Reset Form">Input Type URL
The input type URL is used to define a field that contains a URL address.
<form>
<label for="website">Website URL:</label>
<input type="url" id="website" name="website"
placeholder="Enter a URL">
</form>