7. Forms

So far visitors have a passive position since information travels one way from the hosting to their computers; they don't have tools to reverse the roles: they can read but not respond. The solution is to use forms, some interactive fields with the ability to collect information, provided by the user, to send it to the server. What happens next with that data doesn't concern us, it's not the Web Designer's job. Such is the separation of responsibility that there is even a specialization in charge of processing and storing the information: Back-End.

However there are other extremely important tasks we must pay special attention to:

• Give the appropriate structure.
• Set up an orderly and self-explanatory flow.
• Entertain the visitor.
• Work on accessibility.

Every form has 4 states.

1. Presentation: Usually left empty, with some visual aid in the form of text or iconography that explains each section.
2. Validation: If a field doesn't meet the desired format we must inform and guide so that the user can adjust it. A recurring resource is to show a red text with a brief explanation and an example.
3. Sent without problems: When clicking the submit button no validation was triggered and the web server confirms that it has received the information correctly. The user is informed and, if possible, taken to another section of the site.
4. Sent with problems: Oops! When the information was sent, the unimaginable happened: the web server tells us that it failed for some reason while processing the information. We must warn the user and bow our head in apology. The recommended thing would be to give an alternative option: a phone? an email?

Container

Every form must be wrapped in the following tag.

<form>
    <!-- Interactive fields -->
</form>

Inside we'll use various tags, each one specialized in a domain.

Insert text

The most popular values of type are:

• button
• checkbox
• color
• date
• email
• file
• number
• password
• radio
• range
• reset
• search
• submit
• text

<label>
    What is your favorite radio station?
    <input type="text" name="cadenaRadio">
</label>

As an alternative, if you couldn't nest the tags, you can link them with the for and id attributes.

<label for="miRadio">What is your favorite radio station?</label>

<input id="miRadio" type="text" name="cadenaRadio">

<label>
    Notes:
    <textarea name="anotaciones"></textarea>
</label>

Select

<select name="mascota">
    <option value="0">Dog</option>
    <option value="1">Cat</option>
    <option value="2">Hamster</option>
    <option value="3">Rabbit</option>
    <option value="4">Turtle</option>
</select>

A trick to have a title that afterwards can't be selected again is to use the disabled and selected attributes on the same <option>.

<select name="mascota">
    <option value="" aria-label="pet" disabled selected>What pet do you have?</option>
    <option value="0">Dog</option>
    <option value="1">Cat</option>
    <option value="2">Hamster</option>
    <option value="3">Rabbit</option>
    <option value="4">Turtle</option>
</select>

Buttons

<button type="submit">
    Send
</button>

It's easier to style <button> than <input type="button"> since you can include tags in the nesting such as <img> and use pseudo-elements (::after, ::before...).

Group fields

<fieldset>
  <!-- Fieldset title -->
  <legend>Ticket reservation</legend>

  <label>
      Full name
      <input type="text" name="nombre">
  </label>

  <label>
      Number of seats
      <input type="number" name="numero">
  </label>

  <button type="submit">Pay</button>
</fieldset>