HTML Forms

💡 The Concept

Client Side and Server Side

HTML forms are how websites collect input from visitors, from simple search boxes to multi-field registration and checkout pages. To understand forms, you need to understand that they involve two sides: the client side and the server side.

• Client side: everything that happens in the browser. You build the client side with HTML and CSS. The user sees the form fields, types their information, and clicks Submit.
• Server side: what happens after Submit is clicked. The data is sent to a web server where a back-end language like PHP, Python, or Node.js processes it, stores it in a database, sends an email, or returns a response.

This course covers only the client side. You will build forms that look right and are wired up correctly. The server-side processing is a separate topic.

Forms are used for many things on the web:

• Contact forms
• Search boxes
• Placing an order at an online store
• Subscribing to a newsletter
• Online calculators and quizzes

Basic Form Structure

Every form starts with a <form> element. Inside it you place labels and input fields. Here is a simple contact form:

<form action="process.php" method="post">
   <label for="name">Name:</label>
   <input type="text" id="name" name="name">

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

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

The <form> Element

The <form> element is the container that wraps all of your fields. It also controls what happens to the data when the user submits. Two attributes handle that: action and method.

The action attribute tells the browser where to send the form data when the user clicks Submit. It points to the server-side script that will process it:

<form action="process.php" method="post">

The method attribute is almost always post for forms that send data. This keeps the data out of the URL.

Below is the actual PHP script we will use as the action for the exercise later in this lesson. You do not need to write or fully understand it, since server-side code is a separate topic. What matters is what it does: it reads each submitted field by its name using $_POST, then echoes the values back to the screen so you can confirm your form worked. This is why the name attributes in the exercise must match exactly, such as first_name and email. If a name does not match, that field comes back blank.

The <input> Element

Most form fields are created with the <input> element. A single <input> tag can collect many different kinds of data, and the type attribute decides which kind. Changing the type changes how the field looks and behaves, and on phones it even changes which keyboard appears.

Here are some of the most common input types:

• text: a single line of plain text, the default
• email: an email address, with basic format checking
• password: hides the characters as they are typed
• number: numbers only, often with up and down arrows
• tel: a telephone number, which opens a numeric keypad on phones
• date: a date, usually with a date picker
• checkbox: a box the user can switch on or off
• radio: a group of options where only one can be chosen

You set the type right on the tag. These three inputs each collect different data:

<input type="text" id="first_name" name="first_name">
<input type="email" id="email" name="email">
<input type="password" id="password" name="password">

The placeholder attribute adds light hint text inside the field that disappears as soon as the user starts typing. It is a nice way to show an example without taking up space:

<input type="email" id="email" name="email" placeholder="you@example.com">

Every input field needs both a name and an id attribute. They often have the same value but serve different purposes:

• name: used by the server to identify which field the data came from
• id: used to connect a <label> to its input, and by JavaScript

The for attribute on a <label> should match the id of its input. This means clicking the label text will focus the input, which improves usability.

🎬 The Video

This video demonstrates how to build an HTML form.

Exercise: Try It Yourself

Step 1. Open JSFiddle (or your website template).

Step 2. Add a <form> tag with this action and method. You will build the rest of the form inside it:

<form action="https://webdevstudents.com/portfolio/submit-form.php" method="post">

</form>

Step 3. Inside the form, add a label and text input for first_name. Use the exact word for the name, id, and for attributes, because the PHP script looks for these exact field names. Here is the first one, done for you:

<label for="first_name">*First Name</label>
<input type="text" name="first_name" id="first_name">

Step 4. Now type the other three fields yourself, following the same pattern. Use these exact field names for the name, id, and for attributes, just as you did for first_name, or the PHP script will not receive that field. Use the right input type for each: last_name is a text field, email is an email field, and phone is a tel field.

Step 5. Add <br> tags between the fields so the form lays out vertically, and place a submit button at the bottom.

Step 6. Run your fiddle and confirm the form shows all four fields and a submit button. It should look like the screenshot below.

Step 7. Fill out the form and click Submit. If the field names are correct, the server echoes your entered values back on the screen, like this:

❓ Frequently Asked Questions

★ Key Takeaways

Forms let visitors interact with your website by entering and submitting information. This lesson covered the basic form elements, including text inputs, labels, and submit buttons. Next, you will learn how to style forms with CSS. A styled form looks much more professional and is easier for users to fill out.

← Back to Special Topics Lessons

← Back to All Lessons