HTML Forms

📝 What are HTML Forms?

HTML forms are used to collect user input. They contain form elements like text fields, checkboxes, radio buttons, and submit buttons that allow users to enter data.


<!-- Basic form structure -->
<form>
    <label>Name: <input type="text"></label>
    <button type="submit">Submit</button>
</form>

Basic Form Elements

📝

Text Input

Single-line text input

<input type="text" name="username">

🔘

Radio Button

Choose one option

<input type="radio" name="size" value="small">

☑️

Checkbox

Select multiple options

<input type="checkbox" name="agree">

🔽

Select Dropdown

Choose from a list

<select name="country">
  <option>USA</option>
</select>

🔹 Simple Contact Form

Here's a basic contact form example:

<form action="/submit" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>
    
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
    
    <label for="message">Message:</label>
    <textarea id="message" name="message" rows="4"></textarea>
    
    <button type="submit">Send Message</button>
</form>

Output:

🔹 Form Structure

Every form needs these basic parts:

Essential Form Components:

<form> - Container for all form elements
<input> - Various input types for data
<label> - Describes what each input is for
<button> - Submit or reset the form

<!-- Form with all basic parts -->
<form>
    <!-- Label and input pair -->
    <label for="username">Username:</label>
    <input type="text" id="username" name="username">
    
    <!-- Submit button -->
    <button type="submit">Login</button>
</form>