HTML - Basic forms

HTML Basic Forms

1. Introduction to HTML Forms

Forms in HTML allow users to enter data, such as text, numbers, or selections, and submit this information to a server. Forms are essential for interacting with users and collecting information. HTML forms are created using the <form> tag, and they consist of various input elements that enable users to provide data.

2. Basic Syntax of HTML Forms

The basic structure of an HTML form consists of the <form> tag and one or more input elements such as text fields, checkboxes, radio buttons, and submit buttons. The syntax for a form looks like this:

    <form action="submit_url" method="POST">
        <label>Label for input</label>
        <input type="text" name="input_name">
        <button type="submit">Submit</button>
    </form>
    

The action attribute specifies the URL where the form data will be sent, while the method attribute specifies how the data is sent (usually "GET" or "POST").

3. Form Elements

There are various form elements that allow users to input different types of data. Here are the most commonly used form elements:

3.1. Text Input

The <input> element with type="text" creates a single-line text input field. Users can enter text into this field.

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

Name:

3.2. Password Input

The <input> element with type="password" creates a password input field. This field hides the characters entered by the user.

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

Password:

3.3. Radio Buttons

Radio buttons are used when you want the user to select one option from a group. Use the <input> element with type="radio".

    <label>
        <input type="radio" name="gender" value="male"> Male
    </label>
    <label>
        <input type="radio" name="gender" value="female"> Female
    </label>
    

Male Female

3.4. Checkboxes

Checkboxes allow users to select multiple options. The <input> element with type="checkbox" creates checkboxes.

    <label>
        <input type="checkbox" name="newsletter" value="subscribe"> Subscribe to newsletter
    </label>
    

Subscribe to newsletter

3.5. Select Dropdown

The <select> element creates a dropdown menu. Inside the <select> tag, you can define <option> elements for each choice.

    <label for="country">Select a Country:</label>
    <select id="country" name="country">
        <option value="USA">United States</option>
        <option value="UK">United Kingdom</option>
        <option value="IN">India</option>
    </select>
    

Select a Country: United States United Kingdom India

3.6. Textarea

The <textarea> element creates a multi-line text input field, allowing users to input longer pieces of text.

    <label for="message">Message:</label>
    <textarea id="message" name="message"></textarea>
    

Message:

3.7. Submit Button

The <button> element with type="submit" creates a submit button that sends the form data to the server.

    <button type="submit">Submit</button>
    

Submit

4. Action and Method Attributes

The <form> tag has two important attributes: action and method:

4.1. Action Attribute

The action attribute specifies the URL to which the form data will be sent. It can point to a server-side script, such as a PHP or Node.js script.

    <form action="submit_form.php">