Creating Forms in HTML

Example: Basic Form

<form action="/submit" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>
    <br>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
    <br>
    <button type="submit">Submit</button>
</form>
        

This example demonstrates a simple form with text and email input fields, along with a submit button.

Common Input Types

• text: Single-line text input
• email: Email input
• password: Password input
• checkbox: Checkbox input
• radio: Radio button input
• submit: Submit button

Example: Advanced Form

<form action="/register" method="post">
    <fieldset>
        <legend>Registration Form</legend>
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" required>
        <br>
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" required>
        <br>
        <label>Gender:</label>
        <input type="radio" id="male" name="gender" value="male">
        <label for="male">Male</label>
        <input type="radio" id="female" name="gender" value="female">
        <label for="female">Female</label>
        <br>
        <label for="terms">Accept Terms:</label>
        <input type="checkbox" id="terms" name="terms" required>
        <br>
        <button type="submit">Register</button>
    </fieldset>
</form>
        

This example includes a registration form with text, password, radio buttons, and a checkbox.

Best Practices for Forms

• Use label elements for accessibility.
• Validate user input using the required attribute.
• Group related inputs using fieldset and legend.
• Provide clear instructions and error messages.

Practice: Try It Yourself

1. Project: Contact Form
   Create a contact form with fields for name, email, subject, and message. Add a submit button.
2. Project: Survey Form
   Build a survey form with multiple-choice questions using radio buttons and checkboxes.

Continue Learning

• Next: Building Tables
• Previous: Adding Images to Your Page