Building Simple HTML Forms

24 May, 2023

Contributors

Shruti Balasa

@shrutibalasa

Forms are everywhere - starting from the smallest newsletter subscription forms to social media sign-ups to forms with hundreds of fields on government websites. You’ll see what constitutes HTML forms and build a simple one yourself.

The Form Element

To create a form, can you guess which tag we need? Yes, the <form> tag. This is the container for all the form fields and buttons.

<form>
	<!-- Form fields and buttons -->
</form>

Input Fields

The most common type of field where you type in data like your first name, last name or job title is called a text field. This is created using the <input> tag with type attribute value set to text.

<input type="text">

Add this line within <form> tags, and you get a box where you can type. Try it out on your own web page.

Input types

There are other types of inputs too:

— email: This type checks for valid email format when the form is submitted

— password: The entered text is masked when this type is used

— date: A date picker is shown

Try them out:

Email: <input type="email">
Password: <input type="password">
Date: <input type="date">

Here’s what you’ll see:

Labels

Though these simple lines of code create input fields, it’s insufficient. We need to use labels to specify what each field expects. It’s important for visually impaired people to interact with your website using screen readers.

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

The input tag has id and name attributes. The id attribute’s value is used as the value for the for attribute in the label. That’s how screen readers will know which is the label for that input when there are multiple inputs in a form.

And the name attribute is needed for the server to access the entered data to process it.

Placeholders

When you see an empty input box, you must look at the label to see what input is expected. Along with labels, you can use placeholders to further hint to the user what to type:

<label for="name">Full Name:</label>
<input type="text" id="name" name="name" placeholder="Enter your full name">

With this, the box is filled with text in a light color and goes away the moment you place your cursor on the input.

Radio Buttons and Checkboxes

To provide options to the user, we use radio buttons (choose one) and checkboxes (choose any number or choose none).

Radio buttons

Payment option:
<input type="radio" id="pay_now" name="payment" value="now">
<label for="pay_now">Pay now</label>

<input type="radio" id="pay_later" name="payment" value="later">
<label for="pay_later">Pay later</label>

Checkboxes

Additional requests:
<input type="checkbox" id="see_facing" name="updates" value="see_facing">
<label for="see_facing">Sea facing room</label>
<input type="checkbox" id="early_checkin" name="updates" value="early_checkin">
<label for="early_checkin">Early check-in</label>
<input type="checkbox" id="late_checkout" name="updates" value="late_checkout">
<label for="late_checkout">Late check-out</label>

Select Input Fields

For a dropdown of many options, we can use the select input field:

<label for="country">Country:</label>
<select id="country" name="country">
  <option value="india">India</option>
  <option value="us">United States</option>
  <option value="uk">United Kingdom</option>
  <option value="other">Other</option>
</select>

Textareas

When you expect multiple input lines from the user, a text input field is insufficient. You need a textarea:

<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea>

The rows and columns attributes are used to specify the size of the field. Try for yourself to understand better.

Buttons

Finally, you need a button to submit the form to the server side:

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

Making the Form work

You must be thinking, okay, I built a form, but how do I actually get the data user typed in it? Forms on their own are just a way to structure inputs - they don't actually do anything. To make a form functional, you need to use some additional form attributes: action and method.

<form action="/a_server_side_url" method="post">
  <!-- Form inputs here -->
</form>

The action attribute defines where the form data gets sent. This is usually a URL to a server-side script (like a PHP file) or a no-code service that processes your form data to save it, send an email, etc.

The method attribute defines how that data is sent. The two most common methods are GET (form data is appended to the URL) and POST (form data is sent as part of the request body, the user can’t see it).

This is a lot of information about forms. Make sure to put this new knowledge into practice.