Certainly! In HTML, forms are created using the <form>
element, and various types of input elements are used to gather user input. Here is a list of common form input tags in HTML:
- Text Input:
<input type="text" name="username" placeholder="Username">
- Password Input:
<input type="password" name="password" placeholder="Password">
- Checkbox:
<input type="checkbox" name="subscribe" id="subscribe" value="1">
<label for="subscribe">Subscribe to newsletter</label>
- Radio Button:
<input type="radio" name="gender" value="male" id="male">
<label for="male">Male</label>
<input type="radio" name="gender" value="female" id="female">
<label for="female">Female</label>
- Submit Button:
<input type="submit" value="Submit">
- Reset Button:
<input type="reset" value="Reset">
- File Input (for file uploads):
<input type="file" name="fileUpload">
- Hidden Input:
<input type="hidden" name="userId" value="123">
- Textarea:
<textarea name="message" rows="4" cols="50" placeholder="Enter your message"></textarea>
- Select Dropdown:
<select name="country">
<option value="usa">USA</option>
<option value="canada">Canada</option>
<option value="uk">UK</option>
</select>
- Date Input:
<input type="date" name="birthdate">
- Email Input:
<input type="email" name="email" placeholder="Enter your email">
- Number Input:
<input type="number" name="quantity" min="1" max="10" placeholder="Quantity">
- Range Input:
html <input type="range" name="volume" min="0" max="100">
Certainly! Here are a few more HTML input types:
- Color Input:
<input type="color" name="color" value="#ff0000">
- Time Input:
<input type="time" name="appointment" value="12:00">
- URL Input:
<input type="url" name="website" placeholder="Enter website URL">
- Search Input:
<input type="search" name="search" placeholder="Search...">
- Tel Input (for telephone numbers):
<input type="tel" name="phone" placeholder="Enter phone number">
- Week Input (for selecting a week and year):
<input type="week" name="week" value="2023-W01">
- Month Input (for selecting a month and year):
<input type="month" name="month" value="2023-01">
- Datetime Input (for date and time):
<input type="datetime-local" name="meeting" value="2023-01-01T12:00">
- Datetime Input (for date and time with timezone):
<input type="datetime-local" name="meeting" value="2023-01-01T12:00" step="300">
- Week Input (for week selection):
<input type="week" name="week" value="2023-W01">
- Output (for displaying the result of a calculation):
<output name="result">Result goes here</output>
- Meter (for representing a scalar measurement within a known range):
html <meter value="50" min="0" max="100">50%</meter>
These input types provide more specialized options for different types of user input. Depending on your application’s needs, you can choose the appropriate input type to enhance user experience and facilitate data entry.
Show Comments