Building Interactive Forms
The <form> Element
Forms allow users to send data to a website. The <form> element wraps around input fields, labels, and buttons.
<form action="/submit" method="post">
... form fields here ...
</form>
... form fields here ...
</form>
Common Input Types
Input fields let users enter data. Here are some common input types:
<label> Name: <input type="text" name="name"> </label>
<label> Email: <input type="email" name="email"> </label>
<label> Password: <input type="password" name="password"> </label>
<label> Subscribe: <input type="checkbox" name="subscribe"> </label>
<label> Gender: <input type="radio" name="gender" value="male"> Male </label>
<label> Gender: <input type="radio" name="gender" value="female"> Female </label>
<label> Email: <input type="email" name="email"> </label>
<label> Password: <input type="password" name="password"> </label>
<label> Subscribe: <input type="checkbox" name="subscribe"> </label>
<label> Gender: <input type="radio" name="gender" value="male"> Male </label>
<label> Gender: <input type="radio" name="gender" value="female"> Female </label>
📝 Example Output:
Textareas
Use <textarea> for multi-line text input like comments or messages.
<label> Message:
<textarea name="message"></textarea>
</label>
<textarea name="message"></textarea>
</label>
📝 Example Output:
Buttons
Buttons allow users to submit or reset form data.
<button type="submit">Submit</button>
<button type="reset">Reset</button>
<button type="reset">Reset</button>
📝 Example Output: