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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML Form Practice</title>
    <style>
        form {
            width: 400px;
            margin: 20px auto;
            font-family: Arial, sans-serif;
        }
        label {
            display: block;
            margin: 10px 0 5px;
        }
        input, select, textarea {
            width: 100%;
            padding: 8px;
            margin-bottom: 10px;
        }
        input[type="submit"] {
            width: auto;
            background-color: #2c3e50;
            color: white;
            border: none;
            cursor: pointer;
            padding: 10px 20px;
        }
        input[type="submit"]:hover {
            background-color: #1abc9c;
        }
    </style>
</head>
<body>

    <h1>Contact Form</h1>

    <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" required>

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

        <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>

        <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>

        <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>

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

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

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

</body>
</html>

HTML Forms