Here are the common HTML form elements with explanations:
1. <form>
- Purpose: The container for all form elements.
- Attributes:
action
: URL where form data is sent.method
: HTTP method (GET
orPOST
).
<form action="/submit" method="post">
<!-- Form elements go here -->
</form>
2. <input>
- Purpose: Collects user input.
- Types:
text
,email
,password
,checkbox
,radio
,file
,number
,submit
, etc.
<input type="text" name="username" placeholder="Enter your name">
<input type="password" name="password">
3. <label>
- Purpose: Describes an input field. Clicking it focuses the input.
- Attribute:
for
: ID of the input it describes.
<label for="email">Email:</label>
<input type="email" id="email" name="email">
4. <textarea>
- Purpose: Multi-line text input.
<textarea name="message" rows="4" cols="50">Enter message here...</textarea>
5. <select>
and <option>
- Purpose: Drop-down menu.
<select name="country">
<option value="us">USA</option>
<option value="ca">Canada</option>
</select>
6. <button>
- Purpose: Clickable button.
- Types:
submit
,reset
,button
<button type="submit">Submit</button>
<button type="reset">Reset</button>
7. <fieldset>
and <legend>
- Purpose: Group related elements together.
<fieldset>
<legend>Personal Info</legend>
<input type="text" name="fname" placeholder="First Name">
</fieldset>
Would you like a sample full form using all of these?
- Teacher: Admin User