HTML Forms

HTML forms are how websites collect information from you. When you sign up for a social media account like ModafVibe, log into your email, or search on Google, you are using an HTML form.

The form Element

The <form> element is a container for all the input elements like text fields, checkboxes, radio buttons, and submit buttons. Think of it like a digital paper form that users fill out.

<form>
  <!-- form elements go here -->
</form>

By itself, the form tag does nothing visible. It just groups the input elements together.

The input Element

The <input> element is the most important form element. It can display as many different types of controls depending on the type attribute.

Text Fields (Single-line input)

Use <input type="text"> to create a single-line text field for names, addresses, or short answers.

The placeholder attribute shows hint text inside the field that disappears when the user starts typing.

The label Element (Important for Accessibility)

The <label> tag is used to add a text label to a form field. It is important for screen readers and also makes the form easier to use.

When you click on a label, it automatically focuses the input field. This is especially helpful for small checkboxes and radio buttons.

To connect a label to an input, the for attribute of the label must match the id attribute of the input.

Radio Buttons (Select ONE)

Radio buttons allow the user to select exactly ONE option from a group. All radio buttons in a group must share the same name attribute.

Notice you can only select one option. That is how radio buttons work. If you try to select another, the first one unselects automatically.

Checkboxes (Select ZERO or MORE)

Checkboxes allow users to select zero, one, or multiple options from a list. Unlike radio buttons, checkboxes do not need to share the same name.

You can select as many as you want. You can also select none at all. That is the difference between radio buttons (select one) and checkboxes (select many).

The Submit Button (Send the Form)

The submit button sends the form data to a server for processing. The action attribute tells the browser where to send the data.

The method="post" tells the browser to send the data securely (as opposed to method="get" which puts data in the URL).

The Name Attribute (Required!)

Every input field that needs to be submitted must have a name attribute. Without a name, the input value will not be sent to the server.

Think of the name as the key in a key-value pair. The name is “username”, the value is what the user types.

<input type="text" id="username" name="username">

<input type="text" id="username">

Complete Form Example

Here is a complete form combining all the elements we learned:

Quick Summary

• Use <form> to wrap all your form elements.
• Use action="/action_page.php" to specify where to send form data (in real websites, this points to a server-side script).
• Use <label> with for attribute to connect to inputs. This improves accessibility.
• Use type="text" for single-line text inputs.
• Use type="radio" when users can select only ONE option.
• Use type="checkbox" when users can select ZERO or MORE options.
• Use type="submit" to send the form data.
• Always give each input a name attribute. Without it, the value will not be sent.
• Use placeholder for hint text inside the field.
• Use required to make a field mandatory.

What Just Happened? Let Me Explain

• Forms are how the web collects data. Every time you sign up for a website like ModafVibe, you are filling out an HTML form.
• The action attribute tells the browser where to send the data. In real websites, this is a backend script that processes the information.
• The name attribute is critical. It tells the server what each piece of data is called. Think of it like a question: “What is your fullname?” The answer is whatever the user types.
• Radio buttons are named the same so only one can be selected. If you give them different names, they become independent and the user could select multiple.
• Checkboxes are independent by default. That is why they usually have different names.

HTML Forms Reference

Here are the tags and attributes we covered in this chapter: