HTML Forms -

1. Introduction to HTML Forms

Forms are an essential part of web development. They allow users to enter and submit data, which can then be processed by a server.

A basic HTML form is created using the <form> element, and it contains various input fields for user interaction.

Basic Form Structure

<form action="submit.php" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    <input type="submit" value="Submit">
</form>

The action attribute specifies the URL where the form data will be sent.
The method attribute determines how the data is submitted (GET or POST).
The <input> element creates different types of input fields.

2. Form Elements

2.1 Text Input Field

Used to collect user input in a single-line text field.

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

2.2 Password Input Field

Hides the entered text for security.

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

2.3 Email Input Field

Validates email format automatically.

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

2.4 Number Input Field

Allows only numerical values.

<label for="age">Age:</label>
<input type="number" id="age" name="age" min="1" max="100">

2.5 Date Input Field

Lets users select a date.

<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob">

2.6 Radio Buttons

Used for selecting one option from multiple choices.

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

2.7 Checkboxes

Allow users to select multiple options.

<label>Skills:</label>
<input type="checkbox" id="html" name="skills" value="HTML">
<label for="html">HTML</label>
<input type="checkbox" id="css" name="skills" value="CSS">
<label for="css">CSS</label>

2.8 Select Dropdown (Dropdown List)

Used for selecting an option from a list.

<label for="country">Country:</label>
<select id="country" name="country">
    <option value="usa">USA</option>
    <option value="canada">Canada</option>
    <option value="uk">UK</option>
</select>

2.9 Textarea (Multiline Input Field)

Allows users to enter multiple lines of text.

<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" cols="30"></textarea>

3. Form Buttons

3.1 Submit Button

Sends the form data to the server.

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

3.2 Reset Button

Clears all input fields in the form.

<input type="reset" value="Reset">

3.3 Button Element

Creates a clickable button that can run JavaScript actions.

<button type="button" onclick="alert('Button Clicked')">Click Me</button>

4. Form Attributes

Attribute	Description
`action`	Specifies where to send form data
`method`	Defines how to send data (`GET` or `POST`)
`target`	Determines how to open the form submission (`_self`, `_blank`)
`autocomplete`	Enables or disables browser autofill
`novalidate`	Disables form validation

5. GET vs POST Methods

Feature	GET	POST
Data Visibility	Visible in URL	Hidden from URL
Security	Less secure	More secure
Data Length	Limited	No limit
Use Case	Search queries, non-sensitive data	Login forms, sensitive data

Example:

<form action="search.php" method="get">
    <input type="text" name="query">
    <input type="submit" value="Search">
</form>

This sends the data as search.php?query=value.

6. Form Validation

6.1 Required Field

The required attribute ensures that a field is not left empty.

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

6.2 Minimum & Maximum Length

<input type="text" name="username" minlength="5" maxlength="15">

6.3 Pattern Matching (Regular Expressions)

<input type="text" name="zipcode" pattern="[0-9]{5}">

This ensures that only a 5-digit number is entered.

7. Complete Example: HTML Form with Validation

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML Form Example</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        form {
            width: 300px;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        input, select, textarea {
            width: 100%;
            margin: 8px 0;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 3px;
        }
        input[type="submit"] {
            background-color: blue;
            color: white;
            cursor: pointer;
        }
    </style>
</head>
<body>

    <h1>Contact Form</h1>

    <form action="submit.php" method="post">
        <label for="name">Full 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" required></textarea>

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

</body>
</html>

This form includes text fields, validation, and a submit button.

8. Best Practices for HTML Forms

Always use the label element for better accessibility.
Use placeholder text sparingly (labels are better).
Validate forms using both HTML and JavaScript.
Use POST for sensitive data like passwords.
Ensure forms are mobile-friendly with proper spacing.

Conclusion

In this chapter, you learned:

How to create text fields, radio buttons, checkboxes, and dropdowns.
The difference between GET and POST methods.
How to validate form inputs using attributes.
How to style and structure forms effectively.