You have filled out a form more times than you probably realize.

When you searched for something on Google, that was a form. When you logged into your email, that was a form. When you typed a message to a friend, that was a form. You have been using them your whole life without even thinking about it.

Even the search box at the top of a Wikipedia page is a form.

You type something into that box and press Enter. The site takes what you typed and shows you results based on it. That is the whole concept of a form. It is simply a way for you to give information to a website, and for the website to use that information to do something.

The Basic Structure

Every HTML form starts with a <form> tag. Everything inside that tag is part of your form. Think of it like a container.

Now let us talk about what goes inside.

Text Input

The most common thing inside a form is a text box. A place where someone can type something.

You set type="text" because you want the user to type text. Simple as that.

Now, if you look at the Wikipedia search box, you will notice there is some grey text inside it that says "Search Wikipedia" before you start typing. That is called a placeholder. It is a hint that disappears the moment the user starts typing.

You add it like this:

Now the box shows that hint until the user starts typing.

The Submit Button

A form without a way to submit it is like a door with no handle. You need a button.

For that, you use another <input>, but this time with type="submit". You can control what text appears on the button using the value attribute.

Put it all together and you have a working search bar — a text box, a placeholder guiding the user, and a button to send the form. Just like Wikipedia.

Radio Buttons

Now look at the right side of a Wikipedia page — the Appearance section. You will see something like this:

You are giving input to the page, but not by typing anything. The page gives you a fixed list of options and you pick one. That is a radio button.

Here is what makes radio buttons work the way they do. Each option is its own input element, but they are all connected through a shared name attribute. Because they share the same name, the browser knows they belong to the same group and only lets you select one at a time. Pick a different one and the previous one deselects automatically.

To build a radio button you give it three things:

• type="radio" — to tell the browser what kind of input this is
• name="group-name" — to connect all the options in the same group
• value="something" — to store the actual answer when that option is selected

Here is what a group looks like in practice:

Breaking it down:

• type="radio" makes it a circular option button
• name="text-size" groups all three together so only one can be selected
• value="..." is what gets recorded when that option is chosen
• checked sets which option is selected by default when the page loads
• <br> is a line break — it pushes the next element onto a new line

There is More

So far you have seen three types of input:

• A text box for typing
• A submit button for sending the form
• Radio buttons for picking one option from a group

But forms can do a lot more than that. Think about the last time you signed up for something online. There was probably a box for writing a longer message, a dropdown to pick your country, maybe checkboxes for your interests. HTML has input types for all of those.

Next, we are going to build a contact form using the most commonly used input types. This is where things start to feel real.