Learn Java, Angular, SQL with Coding Exercises & Career Tips

Form

HTML Forms are essential for collecting user input on a webpage. Whether it is logging in, submitting feedback, or placing an order, forms help users interact with your website.

What is an HTML Form?

An HTML Form is a section of a webpage where users enter data. It can include:

Text fields (e.g., name, email)

Checkboxes and radio buttons

Drop-down menus

Submit buttons

These inputs are wrapped inside a <form> tag, which defines where and how the data is sent.

Why Are Forms Important?

User Interaction: Collect login, registration, or feedback details.

Data Collection: Essential for surveys, orders, and queries.

Personalized Experience: Enables dynamic and custom web responses.

Basic Structure of an HTML Form

<form action="/submit_form" method="post">
  <!-- Form elements go here -->
</form>

action: URL where the form data is sent.
method: HTTP method to send data. Common methods:

1. GET: Appends data to URL; used for non-sensitive data.

2. POST: Sends data securely; recommended for forms.

Example: Simple Form

<!DOCTYPE html>
<html>

<head>
    <title>Feedback Form</title>
</head>

<body>
    <h2>Feedback Form</h2>
    <form action="/submit_form" method="post">
        <label for="name">Name:</label><br>
        <input type="text" id="name" name="name" placeholder="Your name"><br><br>

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

        <label for="subject">Subject:</label><br>
        <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><br><br>

        <label for="message">Message:</label><br>
        <textarea id="message" name="message" placeholder="Write something..." style="height:150px;"></textarea><br><br>

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

</html>

Output:

Key Point

Always wrap form elements in a <form> tag.

Use placeholder text to guide users.

Organize inputs with proper <label> tags.

Use POST for secure data handling.

Style your form for better readability and usability.

With this foundation, you are now ready to build interactive and user-friendly web forms.