HTML Forms

Introduction to HTML Forms

HTML forms are used to collect user input on a website. Forms can include text fields, checkboxes, radio buttons, dropdowns, file uploads, and submit buttons.

Forms are essential for:

• User registration & login
• Contact pages
• Surveys and feedback
• Search functionality

Basic Structure of an HTML Form

The <form> tag wraps all input elements.

Syntax:

<form action="submit.php" method="post">
    <!-- Form elements go here -->
</form>

Important Attributes:

Attribute Description

action URL of the server-side script that processes the form data

method HTTP method to send data: get or post

enctype Encoding type for file uploads (multipart/form-data)

target Where to display response (_self, _blank)

Common Form Elements

1️⃣ Text Input

<label for="username">Username:</label>
<input type="text" id="username" name="username" placeholder="Enter your username">

• type="text" → Single-line text
• placeholder → Hint text
• name → Field name for form submission

2️⃣ Password Input

<label for="password">Password:</label>
<input type="password" id="password" name="password" placeholder="Enter password">

• Hides typed characters

3️⃣ Email Input

<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter your email">

• Browser validates proper email format

4️⃣ Radio Buttons

<p>Gender:</p>
<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>

• Only one option in the same name group can be selected

5️⃣ Checkboxes

<p>Languages Known:</p>
<input type="checkbox" id="html" name="language" value="HTML">
<label for="html">HTML</label>

<input type="checkbox" id="css" name="language" value="CSS">
<label for="css">CSS</label>

• Multiple selections allowed

6️⃣ Dropdown List (<select>)

<label for="country">Select Country:</label>
<select id="country" name="country">
    <option value="usa">USA</option>
    <option value="uk">UK</option>
    <option value="india">India</option>
</select>

7️⃣ Textarea (Multiline Input)

<label for="message">Message:</label>
<textarea id="message" name="message" rows="5" cols="30" placeholder="Type your message"></textarea>

8️⃣ File Upload

<label for="file">Upload File:</label>
<input type="file" id="file" name="file">

• Use enctype="multipart/form-data" in <form> when uploading files

9️⃣ Submit Button

<input type="submit" value="Submit">

• Sends form data to the server

Full Example Form

<form action="/submit.php" method="post" enctype="multipart/form-data">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" placeholder="Enter your username"><br><br>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" placeholder="Enter your email"><br><br>

    <p>Gender:</p>
    <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><br>

    <p>Languages Known:</p>
    <input type="checkbox" id="html" name="language" value="HTML">
    <label for="html">HTML</label>
    <input type="checkbox" id="css" name="language" value="CSS">
    <label for="css">CSS</label><br><br>

    <label for="country">Country:</label>
    <select id="country" name="country">
        <option value="usa">USA</option>
        <option value="uk">UK</option>
        <option value="india">India</option>
    </select><br><br>

    <label for="message">Message:</label><br>
    <textarea id="message" name="message" rows="5" cols="40" placeholder="Type your message"></textarea><br><br>

    <label for="file">Upload File:</label>
    <input type="file" id="file" name="file"><br><br>

    <input type="submit" value="Submit">
</form>

Best Practices for Forms

• Always use <label> for accessibility
• Use name attributes for all form elements
• Validate input with type and required attributes
• Style forms with CSS for better UX
• Group related fields using <fieldset> and <legend>

Practice Code Example