HTML (Hypertext Markup Language) offers various form elements that allow users to interact with web pages by inputting data. Here’s an explanation of some common HTML form elements:
1. Input: The `<input>` element is the most versatile form element. It’s used to create a variety of form controls, such as text fields, checkboxes, radio buttons, buttons, etc. The `type` attribute determines the specific type of input control to display.
“`html
<input type=”text” name=”username” placeholder=”Enter your username”>
“`
2. Textarea: `<textarea>` allows users to input multiline text.
“`html
<textarea name=”message” rows=”4″ cols=”50″>Enter your message here</textarea>
“`
3. Button: `<button>` creates clickable buttons that can trigger actions when clicked.
“`html
<button type=”submit”>Submit</button>
“`
4. Select: `<select>` creates a dropdown list from which users can select one or more options.
“`html
<select name=”country”>
<option value=”usa”>USA</option>
<option value=”uk”>UK</option>
<option value=”canada”>Canada</option>
</select>
“`
5. Checkbox: `<input type=”checkbox”>` allows users to select one or more options from a list of choices.
“`html
<input type=”checkbox” name=”vehicle” value=”Car”> Car
<input type=”checkbox” name=”vehicle” value=”Bike”> Bike
“`
6. Radio Button: `<input type=”radio”>` allows users to select only one option from a list of choices.
“`html
<input type=”radio” name=”gender” value=”male”> Male
<input type=”radio” name=”gender” value=”female”> Female
“`
7. Submit: `<input type=”submit”>` creates a button that submits the form data to the server.
“`html
<input type=”submit” value=”Submit”>
“`
8. Reset : `<input type=”reset”>` creates a button that resets all form fields to their default values.
“`html
<input type=”reset” value=”Reset”>
“`
9. Hidden : `<input type=”hidden”>` creates an invisible input field that allows you to store data in the form without displaying it to the user.
“`html
<input type=”hidden” name=”user_id” value=”123″>
“`
These are some of the basic form elements in HTML. They can be combined and customized using attributes to create complex forms for gathering user input.