HTML FORMS

HTML Forms or web forms are containers used to collect data from users.
Forms are online tools where users can enter information using checkboxes, radio buttons, or text fields. These forms can look like paper forms or database entry screens.

Forms are essential for creating web forms because:

User Interaction: They let users interact with websites by submitting data like login details, feedback, or purchase info.
Data Collection: They are crucial for gathering information for surveys, orders, and registrations.
Dynamic Content: Forms help create personalized and dynamic user experiences.

Key-Points:

Form Tag: Always enclose form elements within <form> tags. The action attribute specifies where to send the form data when submitted, and the method attribute specifies the HTTP method (typically POST or GET).
The submit button initiates the process to send the data to the server.

How to create HTML Forms

Basic Structure of an HTML Form An HTML form is defined using the <From> tag. Within the form, various form elements such as input fields, checkboxes, radio buttons, and buttons are used to collect user data.

There are two attributes of forms:

Action: The URL where the form data will be sent when the form is submitted.
Method: The HTTP method to be used when sending form data. Common methods are GET and POST.

The two HTML Methods can be described as:

GET: It is used to request data from a specific HTTP address in the form of a URL. It cannot be used while handling sensitive data.
POST: It is used to send data via HTTP Transaction. It is safer than GET.

Syntax:

<form action="submit_form.php" method="post">
  //input controls e.g. textfield, textarea, radiobutton, button  
</form>

Examples:

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Simple Form</title>
</head>

<body>

    <h2>Feedback Form</h2>

    <div class="form-container">
        <form action="/submit_form" method="post">
            <div class="form-group">
                <label for="name">Name:</label>
                <input type="text" id="name" name="name" placeholder="Your name..">
            </div>

            <div class="form-group">
                <label for="email">Email:</label>
                <input type="email" id="email" name="email" placeholder="Your email..">
            </div>

            <div class="form-group">
                <label for="subject">Subject:</label>
                <select id="subject" name="subject">
                <option value="">Select a subject</option>
                <option value="inquiry">General Inquiry</option>
                <option value="feedback">Feedback</option>
                <option value="support">Support</option>
            </select>
            </div>

            <div class="form-group">
                <label for="message">Message:</label>
                <textarea id="message" name="message" placeholder="Write something.." style="height:200px"></textarea>
            </div>

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

</body>

</html>

Output :