# Introduction to forms

• Forms collect user input for processing on the server.
• Examples of their use are in a search bar, in user registration, in online surveys, and in e-commerce checkout.

# Tags related to forms

# <form> tag

# Action Attribute

• The 'action' attribute defines where the form data is sent.
• It usually contains the URL of a server-side script (like PHP, Python, or Node.js) to process the form data.
• If the action attribute is omitted, the form data is sent to the current page.

<form action="https://it-fact.be/form.php">
    <!-- Form fields go here -->
</form>
 
        Copied!
    

# Method Attribute

• The method attribute specifies the HTTP method used to send the form data.
• The two most common methods are GET and POST.

<form action="https://it-fact.be/form.php" method="post">
    <!-- Form fields go here -->
</form>
 
        Copied!
    

# HTTP Requests

When a form is submitted, it sends an HTTP request to the server. The method used in the request determines the type of action the server should perform. Here are the two most commonly used methods:

• GET:
  Used to retrieve data from the server, for example: Searching for a product in a webshop.
  • The form data is sent as part of the URL (e.g., ?search=product).
  • It is visible in the browser's address bar.
  • Best for actions that do not change data on the server.
• POST:
  Used to send data to the server, for example: Submitting a registration form.
  • The form data is sent in the body of the request (not visible in the URL).
  • Best for actions that create or update data on the server.

<!-- Example of GET and POST methods -->
<form action="https://it-fact.be/form.php" method="get">
    <input type="text" name="search" placeholder="Search...">
    <button type="submit">Search</button>
</form>

<form action="https://it-fact.be/form.php" method="post">
    <input type="text" name="username" placeholder="Enter your name">
    <button type="submit">Submit</button>
</form>
 
        Copied!
    

In addition to GET and POST, there are other HTTP methods that are used for specific actions. These will be covered in more detail later in the course:

• PUT: Used to replace existing data on the server.
• PATCH: Used to update part of the data on the server.
• DELETE: Used to delete data from the server.

For now, focus on understanding GET and POST, as they are the most commonly used methods in forms.

# <label> tag

The <label> tag plays a crucial role in forms as it links form controls with their respective labels. It provides the following benefits:

• Labels make it easier for users to understand the purpose of a form control.
• Labels are essential for users who rely on assistive technologies such as screen readers.
• Clickability: Associating labels with form controls allows users to click on the label text, activating the associated control.

To associate a label with a form control, you can use the for attribute on the label tag and specify the id attribute of the corresponding form control element.

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

# Form elements

# <input> tags

• Form data can be collected from input tags.
• They can have different 'types' like 'text', 'checkbox', 'radio', 'password', etc.

<form action="https://it-fact.be/form.php" method="post">
    <label for="username">Username:</label>
    <input type="text" name="username" id="username">
    <label for="password">Password:</label>
    <input type="password" name="password" id="password">
    <input type="submit" value="Submit">
</form>
 
        Copied!
    

• The type attribute determines the kind of input.
• The name attribute defines the variable name for the form data.
• The id attribute is used to associate the input with a label.
• The value attribute sets the initial value or label of the input field.

# HTML Input Types

# Radio Buttons

• Radio buttons are used when you want the user to select only one option from a set.
• Grouping radio buttons with the same name ensures that selecting one will unselect any other selected option in the group.
• The unique id makes sure the input can be linked to a label.

In the example below, both radio buttons have the same name driving_license, which means the user can only select one of the options.

# Checkboxes

• Checkboxes allow users to select multiple options.
• Each checkbox needs a unique name to handle the input data and id for specific labeling.

# <textarea> tag

• The textarea tag is used for multi-line text input.
• It is useful for collecting longer text inputs like comments, reviews, or longer messages.
• With the optional rows and cols attributes, you can define the visible number of lines and width of the textarea.

# <select> tag

• The select tag creates a drop-down list.
• It is used when the user needs to select one or more options from a list of choices.
• The optional size attribute can be used to define the number of visible options in the list.

# <option> tag

• The option tag inside a select tag defines an option in the drop-down list.
• The text inside the option tag is the visible option, and the value attribute is the value sent to the server when the form is submitted.
• With the optional selected attribute, you can pre-select an option when the page loads.

# <optgroup> tag

• The optgroup tag groups related options in a drop-down list. I
• If you have a long list of options, grouping them can make it easier for users to find the option they need.
• The label attribute specifies the name of the group of options.

# <button> tag

• The button tag defines a clickable button.
• The type attribute specifies the button's behavior. Here are the three common types:

<!-- Example of different button types -->
<button type="submit">Submit</button>
<button type="reset">Reset</button>
<button type="button" onclick="alert('Button clicked')">Click Me</button>
 
        Copied!
    

# <fieldset> and <legend> tags

• The fieldset tag groups related tags in a form.
• The legend tag defines a caption for the fieldset.

# Validation Attributes

HTML5 validation attributes allow you to validate form data directly in the browser, without the need for JavaScript.
These attributes can make your forms more user-friendly and improve the user experience by preventing incorrect submissions.

# Common Validation Attributes

# Placeholder Attribute

While not a validation attribute, the placeholder attribute can be used to provide a hint or example of the expected input format. It is displayed in the input field until the user starts typing.

# Example

In this example:

• The username field is required, with a minimum length of 3 characters and a maximum length of 20 characters.
• The email field is required and is validated to ensure it's a valid email format.
• The age field is validated to ensure the value is a number between 18 and 99, but it's not required (can be left empty).
• The postal code field is validated to ensure it matches a format of 4 digits, but it's not required.