Building a Contact Form

A contact form is the perfect place to learn the remaining input types because it uses almost all of them. Every website you have ever visited that had a "Get in touch" page was built with exactly what you are about to learn.

Let us build it piece by piece, and by the end you will have a complete working form.

Labels

Before we start putting a real form together, there is one thing you need to know about first because everything else depends on it.

Every input on a page needs a label. A label is simply the text that tells the user what that input is for. "Full Name". "Email Address". "Your Message". That kind of thing.

You have probably been seeing text sitting next to inputs and thinking it is just text. Technically you can do that. But the proper way is to use the <label> tag and actually connect it to its input.

Here is how:

The for attribute on the label must match the id on the input. That is the connection. When they match, two things happen.

First, clicking the label text will automatically focus the input. So if a user clicks the words "Full Name", the cursor jumps straight into the text box. On checkboxes and radio buttons this is even more useful because clicking the label text will tick the box, not just clicking the tiny box itself.

Second, and more importantly, screen readers use labels to tell visually impaired users what each input is for. Without a label, a screen reader just says "text box" and the user has no idea what they are supposed to type. With a label, it says "Full Name, text box." That is the difference between a usable form and an unusable one.

Text Input

The most basic input. A single line where the user can type something.

The placeholder is the grey hint text that sits inside the box until the user starts typing. It disappears the moment they do. Use it to give an example of what to type, not to replace the label. A lot of beginners remove the label and only keep the placeholder. Do not do that. The placeholder vanishes when the user starts typing, so if they get confused halfway through, there is nothing left to remind them what the field was for.

Email Input

Looks identical to a text input. But it is smarter.

When the user tries to submit the form, the browser checks that what they typed actually looks like an email address. If there is no @ sign, the browser stops them and shows an error automatically. You get that for free just by writing type="email" instead of type="text".

On mobile, it also pulls up the email keyboard with the @ key front and center. Small detail, but your users will notice.

Textarea

A regular text input only gives one line. For longer responses like a message or a description, you need a textarea. It gives the user a big open box to write as much as they want.

Notice that textarea is not self-closing like input. It has an opening and a closing tag.

rows controls how tall the box is and cols controls how wide. Think of rows as how many lines tall, and cols as roughly how many characters wide. The user can also resize it by dragging the corner, which is default browser behavior.

Dropdown Menu

When you want the user to pick one option from a list, but there are too many options to show as radio buttons, use a dropdown. Radio buttons are great for two or three choices. Any more than that and a dropdown is the cleaner way to go.

The <select> tag is the container. Each <option> inside it is one item in the list. The value is what gets recorded when that option is chosen, and the text between the tags is what the user actually sees.

That first option with disabled selected is a common pattern you will see everywhere. It makes the dropdown start on a prompt like "Select a topic" instead of jumping straight to the first real option. disabled means the user cannot actually choose it, it is just there as a label. selected means it shows by default when the page loads.

Radio Buttons

When you have a small number of options and the user can only pick one, radio buttons are the right choice. They make all the options visible at once, which is better for short lists.

All three share the same name, which is what groups them together and makes sure only one can be selected at a time. Pick a different one and the previous one deselects automatically.

checked sets which one is selected by default when the page loads.

Checkbox

A checkbox is for situations where the user can pick multiple things at once, or just confirm something with a yes or no. This is the key difference from radio buttons. Radio buttons are one from many. Checkboxes are any from many.

Each checkbox has its own name because each one is its own independent question. Ticking one has zero effect on the other. That is what makes them different from radio buttons.

Submit Button

Every form needs a way to send the data. That is the submit button.

The value attribute controls what text appears on the button. Change it to whatever makes sense for your form. "Send Message", "Submit Application", "Get Started", whatever fits.

The Full Contact Form

Now let us put everything together into one complete form, using every input type you just learned, in the order they would naturally appear.

That is a real, complete contact form. Name, email, topic dropdown, preferred contact method, a message box, a newsletter opt-in, and a submit button. This exact structure shows up on real websites every single day.

Up next you will learn form validation, how to make sure users fill out your form correctly before it ever gets submitted.