8. Forms

Let us start by looking at the world of forms in HTML. Forms are a really important aspect of dynamic, interactive sites that allow the users to fill in data and interact with your web applications. Those might be contact forms, search bars or login pages. HTML forms give the structure and tools needed for gathering user input.

In this chapter we’re going to go over the principles of building forms. We’re going to cover form controls, talk about form validation and explain how to utilize labels in order to ensure our forms are accessible. Also we’ll take a closer look at the attributes that a form can contain: action, method, and type.

8.1 Basic Form Structure (form)

Every form has an HTML element <form> at its core. What defines this kind of section within the document consisting of input fields and controls is that it allows users to be able to submit data to the server or interact with the web application.

Basic Form Example:

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

In this basic example, you will see:

• The <form> tag marks the form.
• The action attribute determines where the data of the form is sent on submission.
• The method attribute determines how data is to be sent; most are either via GET or POST.
• The element <input> is used to collect data about the user. Here we also have a text input field and a submit button.
• The element <label> is associated with the text input for accessibility.

This one collects the name, sending it to the server when the user clicks “Submit.”

Activity:
Construct a basic form with fields to take a user’s name and their email address. Add a submit button and don’t forget to add the <label> element for accessibility

8.2 Form Controls

Controls in forms are the interactive elements that allow users to fill in forms. HTML offers a rich variety of controls ranging from simple text input to more advanced alternatives such as dropdown menus, checkboxes, and radio buttons.

Common Form Controls:

• Text Input (<input type="text">): Enters a single line of text.
• Password Input (<input type="password">): Consoles the input value; the input entered is not visible, mainly used for passwords.
• Radio Buttons (<input type="radio">): It is used to allow the user to choose only one from the group.
• Checkboxes (<input type="checkbox">): It is used to allow a user to select one or more from the different options.
• Dropdown Menus (<select>): It is used to create a dropdown list of options from which the user can choose.
• Text Area (<textarea>): It is used to allow the user to type a large amount of text.

Form Controls Example:

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

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

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

  <label for="hobbies">Hobbies:</label>
  <input type="checkbox" name="hobbies" value="reading"> Reading
  <input type="checkbox" name="hobbies" value="traveling"> Traveling

  <label for="country">Country:</label>
  <select id="country" name="country">
    <option value="nepal">Nepal</option>
    <option value="india">India</option>
  </select>

  <label for="bio">Bio:</label>
  <textarea id="bio" name="bio"></textarea>

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

In the above example, we use several controls to submit a form: text input, password input, radio buttons, checkboxes, select, and textarea. Each of these items is indispensable to obtain users’ various kinds of data.

Activity:
Create a form with various controls: checkboxes, radio buttons, dropdown menu, to collect personal information: name, gender, hobbies, and bio.

8.3 Form Validation (Client-Side)

Form validation allows the user to input his data correctly before submitting a form. HTML provides many validation attributes, making this easier; you can force certain fields be filled in, specify a pattern, or enforce limits on what is acceptable to input.

Basic Form Validation Attributes:

• required: Forces the user to fill in the field before submitting.
• pattern: Specifies a regular expression that the input must match.
• min and max: Set limits for number inputs.
• maxlength: The number of characters to input in the text field.

Example for Form Validation:

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

  <label for="age">Age:</label>
  <input type="number" id="age" name="age" min="18" max="100">

  <label for="phone">Phone Number:</label>
  <input type="tel" id="phone" name="phone" pattern="[0-9]{10}" required>

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

In the following example:

• The required attribute will not allow the user to submit the form unless a user inputs an email.
• The min and max attributes restrict the age to be between 18 and 100.
• The pattern attribute ensures that the phone number is exactly ten digits.

HTML5 gives you some pretty powerful, client-side form validation that helps ensure users submit the right data format-and does all this without requiring you to use JavaScript.

Activity:
Validate a form, some fields as required, applying patterns for phone numbers or email addresses.

8.4 Labels and Accessibility

Proper use of labels is also important to form accessibility, especially for people who depend on screen readers. The <label> element binds text to form controls and makes it easier to use.

Label Example:

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

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

Each <label> element references a specific form control with for attributes, targeting it by its id. The advantages are that clicking on the label will automatically activate the corresponding input field.

Accessible Forms Best Practices:

• Always use the <label> element for each form control. This makes the site more accessible because it is clear, by default, what each field means.
• Give users suggestions, do not depend solely on placeholder text. Placeholder text disappears if the user begins entering text.
• Place related form controls together with the <fieldset> and <legend> elements allowing a screen reader to provide an even greater context for the grouping of form controls.

<fieldset>
  <legend>Personal Information</legend>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">

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

The fieldset groups related inputs and the legend provides a heading for the group, so enhancing both usability and accessibility.

Exercise:
Use labels and fieldsets on a form to make the form more accessible for screen readers and visually impaired users.

8.5 Form Attributes (action, method, enctype)

The <form> tag form has several attributes that determine how the form behaves when submitted. These attributes then determine how data is sent and then processed on the server.

The action Attribute:

The action attribute specifies where the form data is going when submitting the form. Typically it’s a URL, referencing a server-side script.

<form action="/submit-form">
  <!-- Form controls here -->
</form>

The method Attribute:

The method attribute defines how the form data should be submitted. It can have two values:

• GET: Form data is sent appended to the URL, which is visible in the browser address bar.
• POST: Carries form data in the message body. Here, data is not passed in the URL. It’s safer for sensitive data

<form action="/submit-form" method="POST">
  <!-- Form controls here -->
</form>

The type Attribute:

The enctype attribute specifies the type of encoding used for the form data when it is sent to the server. It’s used only with POST method, but very crucial for file uploads.

• application/x-www-form-urlencoded: Default encoding, used for all regular forms.
• multipart/form-data: For file uploads.
• text/plain: Sends data unencoded (rarely used).

<form action="/upload" method="POST" enctype="multipart/form-data">
  <input type="file" name="file">
  <input type="submit" value="Upload">
</form>

In this example how the multipart/form-data encoding allows users to upload files using the form.

Activity:
Design a form that uploads a file and ensure you use the appropriate enctype attribute.

Quiz Time:

Conclusion

You have learned thus far about:

• Basic structure of an HTML form with the <form> element.
• Form Controls: Different Form Controls
• Client-side form validation
• Labels of design in form.
• Accessibility in form design.
• How to use action, method, enctype attributes.

Forms are something that really makes up the majority of user interaction on the web. It makes one serious web developer understand how to build functional, accessible, and safe forms.

Here, in the following section, we are going to learn about HTML Semantics and Layout. We will study how to effectively structure the layout of a website. Let's get started!