FORM elements in HTML
- HTML forms are essential elements for gathering user input on a website.
- They provide a way for users to submit data to a server for processing.
- Some commonly used HTML form elements:
- Defines the start of an HTML form.
- It encloses form elements and specifies how data will be sent to the server (using the `action` and `method` attributes).
<form action="/submit_form.php" method="post">
<!-- Form elements go here -->
</form>
2. `<input>`:
- Creates an input field where users can enter data.
- The `type` attribute determines the type of input (text, password, checkbox, radio, etc.).
<input type="text" name="username" placeholder="Enter your username" />
3. `<textarea>`:
- Defines a multiline text input field.
- Useful for longer text entries, such as comments.
<textarea name="message" placeholder="Enter your message"></textarea>
4. `<select>`:
- Creates a dropdown list.
- Contains one or more `<option>` elements.
<select name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
5. `<button>`:
- Creates a clickable button.
- Used to submit forms or trigger JavaScript functions.
<button type="submit">Submit</button>
6. `<label>`:
- Associates a label with a form control.
- Improves accessibility and user experience.
<label for="username">Username:</label>
<input type="text" id="username" name="username" />
7. `<fieldset>` and `<legend>`:
- `<fieldset>` groups related form elements.
- `<legend>` provides a caption for the `<fieldset>`.
<fieldset>
<legend>Contact Information</legend>
<!-- Form elements go here -->
</fieldset>
8. `<input type="radio">`:
- Creates a radio button, allowing users to select one option from a group.
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
9. `<input type="checkbox">`:
- Creates a checkbox, allowing users to select multiple options.
<input type="checkbox" name="subscribe" value="yes"> Subscribe to newsletter
10. `<input type="password">`:
- Creates a password input field.
- The entered text is usually masked for security.
<input type="password" name="password" />
These are fundamental HTML form elements, and you can combine them to create complex and interactive forms on your website.
Additionally,
JavaScript can be used to enhance form functionality and validation.
-----------------------------------------
0 Comments