Forms — Content layout fundamentals

• Creating a form
• Form fields
  • textarea
  • input
• Lists
• Submittig the form
• Separating form sections
• Text inside a text box

Forms are an important interactive web page element. Like links, forms provide interaction between the user and the page, allowing data to be sent. There are special constructs in HTML for this that tell the browser which fields the user can use and how to handle them.

The forms are a far too big topic to cover in one lesson because all the possible nuances could make forms a course in and of themselves. Fear not – you'll learn here enough to be able to make good forms.

Creating a form

A special tag, <form>, is used to separate the form from the rest of the layout. If you don't use it, the browser will not understand what data to send. After all, there can be several forms on a page.

<form>
  <!-- Form Elements and Submit Button -->
</form>

The server is a remote computer where the entire project is stored. You're now looking at a page that was generated on the server and given to you at a certain address. This address is currently listed in your browser.

An example of interacting with a form is using a search engine, Google or Bing. You enter a search query, which is sent to the server. The server processes the results and gives you suitable sites. This interaction takes place using server-side programming languages such as PHP, Ruby, etc. When it comes to layout, we have no control over how the result is handled. The result is a set of tags used by the browser to collect data and send it to the server.

The <form> tag can take several different attributes. They're not required, but they can have a significant effect on your work. The most important of these is the action attribute. It allows you to specify the directory or file on the server where the data will be sent. If this attribute is not specified, the data will be sent to the same page where the form is located.

<form action="/forms/helper.php">
  <!-- The data from the form will be sent to the PHP file helper, which is located in the forms directory on the server -->
</form>

You'll understand the meaning of this action better if you're involved in backend development, for example, in PHP or Python. If you find it difficult right now, don't despair. The developers will always tell you where to send the data.

Form fields

The <form> tag alone is not enough to create a complete form because the user needs to enter some data. The easiest way is to give a text field where the user can enter information. HTML uses two tags for this:

• <input> - a single tag that contains a small amount of information. This can be a phone number, email, date of birth, name, etc
• <textarea> is a paired tag that allows the user to write more text. It can be a comment for an order or a review

textarea

The simplest tag is <textarea>. Its job is to create a large text box.

<form>
  <textarea></textarea>
</form>

In the example, you can see the two attributes of the <textarea> tag: cols and rows. They are responsible for the number of characters and strings that are available inside textarea. If there's more content, then there'll be a scroll bar.

Try resizing the <textarea> element. This can be done by pulling the bottom-right corner. You can do this not only to increase the width but also the height, too.

This behavior is often detrimental to our design. That's why developers don't allow it in most cases. There are several options here:

• You can set the height and width of the element using CSS. Then the browser won't let the element be stretched
• Use the resize property with the value set to none. Use it if your website doesn't support mobile browsers or Internet Explorer. For a complete list of supported browsers, visit the Can I Use website

input

A large group of fields can be created using the <input> tag, the main attribute of which is type. It specifies exactly how the browser should handle the element. It makes no sense to look at each value individually because so much information will quickly be forgotten if it is not used.

In this lesson, we'll look at some of the most popular values for the type attribute.

type="text"

The simplest kind is input, which allows you to enter any information from the user. This field doesn't have built-in validation, the only exception is removing line breaks before sending data to the server. If you want data with line breaks, use the <textarea> tag.

<form>
  <input type="text">
</form>

Note that now the field is not marked in any way, making it totally unclear what the user needs to enter. The first thing that comes to mind is to add a heading or a paragraph before the field. Yes, this will give the appearance of a field description. But appearance is only one thing! In terms of semantics, there is no connection between the text and the input field. This is critical for users who use screen readers, as they might not realize that the field name and the field itself are connected.

A screen reader is a device for reading text from a screen. Used by people who are blind or visually impaired.

To link the field and its name, we use the <label> tag and put text inside it. To link <label> and <input>, we can use one of two options. They're interchangeable, so you can use the one that's convenient for your particular situation.

• Link by identifier. For this purpose, the <input> tag is given a unique id. The <label> is given the attribute for, whose value is the input's id

<form>
  <label for="name">Your name</label>
  <input id="name" type="text">
</form>

• Embedding <input> inside <label>. This method means you don't have to give ids, but it can make the styling process a little more complicated

<form>
  <label>Your name
    <input type="text">
  </label>
</form>

Important: All elements that users can fill out must have a <label> tag. These are the <input> and <textarea> elements. This is true even if there is no visual caption for the field.

You can use the following CSS code to hide the element. As you grow as a developer, you'll get to understand all the rules described in this code. Usually, the used to hide an element is called .sr-only. This element will be invisible to the user, but the screen reader can read it.

.sr-only {
  position: absolute;

  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  overflow: hidden;

  white-space: nowrap;
}

<form>
  <label for="name" class="sr-only">Your name</label>
  <input id="name" type="text">

  <!-- The label is now invisible to the user, but the screen reader can read it -->
</form>

type="radio"

Radio buttons are used to select one option from multiple available ones. Why radio? There is a belief that this type got its name from the first car radios. There were several radio stations available, but only one could be chosen at a time. The meaning here is very similar to that of radio receivers.

In addition to the attributes used in the previous examples, there is another important attribute for radio buttons - name. It's unique to the group of radio buttons.

<form>
  <h2>Select a radio station</h2>
  <div>
    <label>
      <input type="radio" name="radio-fm" value="87.1 FM">
      87.1 FM
    </label>
    <br>

    <label>
      <input type="radio" name="radio-fm" value="95.5 FM">
      95.5 FM
    </label>
    <br>

    <label>
      <input type="radio" name="radio-fm" value="101.4 FM">
      101.4 FM
    </label>
    <br>

    <label>
      <input type="radio" name="radio-fm" value="103.2 FM">
      103.2 FM
    </label>
  </div>
</form>

In addition to the name attribute, radio buttons also use the value attribute. Inside it is the value that will be sent to the server.

type="checkbox"

Checkboxes are a bit like radio buttons, but have a significant difference - you can select several values at once. Imagine the user is choosing their favorite dishes. It's probably more than one dish. They could use <textarea>, but checkboxes are preferable.

<form>
  <h2>Your favorite dishes</h2>
  <div>
    <label>
      <input type="checkbox" name="dishes" value="pizza">
      Pizza
    </label>
    <br>

    <label>
      <input type="checkbox" name="dishes" value="burger">
      Burgers
    </label>
    <br>

    <label>
      <input type="checkbox" name="dishes" value="paste">
      Pasta
    </label>
  </div>
</form>

Lists

Lists are separate elements in forms. Imagine a filter on a tech store website. You can only filter items in one category at a time. You can use radio buttons for this, or even checkboxes in the case of multiple choices. But there is another way, you can use a list.

Creating a list is very similar to creating a piece of text that's a list. We use the <select> select tags for this in forms, and its items are found inside <option> tags.

<form>
  <h2>Category</h2>
  <select name="category">
    <option value="computer">PC</option>
    <option value="phone" selected>Smartphones</option>
    <option value="appliances">Home appliances</option>
  </select>
</form>

In the example, there is a new attribute - selected. It's responsible for which item is selected by default. If it's not specified, the first item in the list will be selected.

For radio button and checkbox elements, the checked attribute is used by default.

There's another interesting attribute is available for lists, multiple. With it, the list becomes similar to checkboxes and allows you to select several items.

<form>
  <h2>Category</h2>
  <select name="category" multiple>
    <option value="computer">PC</option>
    <option value="phone" selected>Smartphones</option>
    <option value="appliances" selected>Home appliances</option>
  </select>
</form>

Submittig the form

In the last section, we looked at the different ways in which the user and the form can interact. But it doesn't make any sense if the form won't be sent. To do this, you need to create an element that will send a form when interacted with.

The form can be sent in one of two ways:

• Create an <input> with type submit. In this case, an element will be created in the form of a button with the name specified as the value of the value attribute
• Using a paired <button> tag. This method gives your more opportunities because the button can contain any HTML code, which, when clicked, will send the form. This method is very convenient for creating a button that's an icon. Right now, this method is the most popular

Separating form sections

Forms that aren't separated into sections are a nightmare for users. Once you get to the middle of the form, you'll have no idea which fields are filled with what. You can separate sections with headers or visually. But browsers provide a special mechanism for dividing sections of the form into logical sections - fieldset. They can be seen as an alternative to the <section> tag, but only for forms. The <legend> tag is used as the header.

<form>
  <fieldset>
    <legend>User Data</legend>
    <label>
      First Name
      <input type="text" name="name">
    </label>
    <br>

    <label>
      Last Name
      <input type="text" name="surname">
    </label>
  </fieldset>
  <fieldset>
    <legend>Delivery method</legend>
    <label>
      Courier
      <input type="radio" name="delivery" value="courier">
    </label>
    <br>

    <label>
      Pickup
      <input type="radio" name="delivery" value="pickup">
    </label>
  </fieldset>

  <button>Order</button>
</form>

Text inside a text box

In all the examples in this lesson, the text fields were originally blank. You've probably often seen that there is text in the field before you click on it, inviting you to enter data or showing the format of the expected input.

The placeholder attribute, whose value is the text that is displayed before you click on it (actually, before focus event).

<form>
  <fieldset>
    <legend>User Data</legend>
    <label>
      First Name
      <input type="text" name="name" placeholder="Enter your first name">
    </label>
    <br>

    <label>
      Last Name
      <input type="text" name="surname" placeholder="Enter your last name">
    </label>
  </fieldset>
  <button>Submit</button>
</form>

Important: placeholder is not a replacement for the <label> tag. Think of placeholder as the description of a text field, and <label> as the name of that field.

Do it yourself

Create a user registration form for a website with the following fields:

• First name
• Last name
• Login
• Date of birth
• Password

Use different variations of <input> types. All possible types can be found in the additional information for this lesson.

Recommended materials

1. Form element attributes
2. Input types
3. Resize property