Forms | Beginner | Html Css Tutorial

Creating forms and collecting user input

Forms are used to collect user input in web applications. HTML provides a range of form elements to create interactive and user-friendly forms. This tutorial covers how to create forms and collect user input in HTML.

Key Points:

Forms are created using the <form> element.
Form elements include text fields, radio buttons, checkboxes, drop-down lists, and buttons.
The action attribute specifies where to send the form data when submitted.
The method attribute specifies how to send the form data (e.g., GET or POST).

Basic Form Structure

A basic HTML form consists of the following elements:

<form>: Defines the form.
<input>: Defines an input field.
<label>: Defines a label for an input field.
<textarea>: Defines a multi-line text input field.
<select>: Defines a drop-down list.
<option>: Defines an option in a drop-down list.
<button>: Defines a clickable button.

Here is an example of a basic form:


<form action="/submit" method="POST">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">

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

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

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

Text Fields

Text fields allow users to input text data. They are created using the <input> element with the type="text" attribute:


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

Password Fields

Password fields mask the input to protect sensitive information. They are created using the <input> element with the type="password" attribute:


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

Email Fields

Email fields validate the input to ensure it is a valid email address. They are created using the <input> element with the type="email" attribute:


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

Radio Buttons

Radio buttons allow users to select one option from a group. They are created using the <input> element with the type="radio" attribute. All radio buttons in a group should have the same name attribute:


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

Checkboxes

Checkboxes allow users to select one or more options from a group. They are created using the <input> element with the type="checkbox" attribute:


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

Drop-Down Lists

Drop-down lists allow users to select one option from a list. They are created using the <select> element and <option> elements for each item:


<label for="country">Country:</label>
<select id="country" name="country">
    <option value="us">United States</option>
    <option value="ca">Canada</option>
    <option value="uk">United Kingdom</option>
</select>

Text Areas

Text areas allow users to input multi-line text. They are created using the <textarea> element:


<label for="comments">Comments:</label>
<textarea id="comments" name="comments"></textarea>

Submit Buttons

Submit buttons are used to send form data to the server. They are created using the <input> element with the type="submit" attribute:

HTML CSS - Forms