HMTL5 FORMS

COMP 126: Practical Web Design & Development for Everyone

the <form> element

<form method="GET" action="https://www.google.com/search">
  ...
</form>

<form> is a container for all the input-gathering elements inside it

 

<form> takes two attributes

  • action: tells the form where to send the data
  • method: GET (user is requesting information) or POST (user is sending information)

GET or POST?

Search for info

Send a message

Log in

Ask for a password hint

Create an account

Select a preference

fields

<form method="GET" action="https://www.google.com/search">
  <input type="text" name="search-query">
</form>

Users need somewhere to enter or request information. We call these "fields". Each field should have its own unique "name" attribute and a type (this doesn't have to be unique.

 

The most common fields are

  • input: limited field for a certain kind of information
  • textarea: general text input area
  • select: for a checkbox or radio button

LABELS

<form method="POST" action="/">
  <label>
	username
  <input type="text" name="userid">
  </label>
</form>

Labels tell users what information goes into each field. You can nest fields inside a label element to link the label with the field.

Or you can keep the label and input elements separate and link them with matching for and id attributes.

<form method="POST" action="/">
  <label for="username">username</label>
  <input id="username" type="text" name="userid">
</form>

BUTTONS

<form method="POST" action="/">
  <label>
	username
  <input type="text" name="userid">
  </label>
  <button type="submit">submit</button>
</form>

The <button> element is used to submit a form. Its type value is SUBMIT.

TEXT FIELD <input> types

  • Phone number: <input type="tel" name="phone">
  • Email address: <input type="email" name="email-address">
  • Numbers: <input type="number" name="age">
  • URL: <input type="url" name="website">
  • And more input types

FIELDSETS

Used to group related fields; require a legend attribute

<fieldset>
  <legend>Mother</legend>
  <label for="mother-given">Given Name</label>
  <input type="text" name="mother-given" id="mother-given">
  <label for="mother-family">Family Name</label>
  <input type="text" name="mother-family" id="mother-family">
</fieldset>
<fieldset>
  <legend>Father</legend>
  <label for="father-given">Given Name</label>
  <input type="text" name="father-given" id="father-given">
  <label for="father-family">Family Name</label>
  <input type="text" name="father-family" id="father-family">
</fieldset>

checkboxes

Yes/no questions

<label>
  <input type="checkbox" name="signup" value="yes">
  Would you like to receive discounts by email?
</label>

Selections from a group

<fieldset>
  <legend>What languages do you speak?</legend>
  <label>
    <input type="checkbox" name="language" value="ar">
    Arabic
  </label>
  <label>
    <input type="checkbox" name="language" value="es">
    Spanish
  </label>
  <label>
    <input type="checkbox" name="language" value="en">
    English
  </label>
</fieldset>

RADIO buttons

Single selection from a group

<fieldset>
  <legend>What is your preferred language?</legend>
  <label>
    <input type="radio" name="language" value="ar">
    Arabic
  </label>
  <label>
    <input type="radio" name="language" value="es">
    Spanish
  </label>
  <label>
    <input type="radio" name="language" value="en">
    English
  </label>
</fieldset>

input attributes

unstyled form

styled form

recommendations

  • required fields first, optional fields last

  • single-column layout is best for forms: better for usability and responsiveness

  • in most cases, and definitely on mobile labels should go ABOVE their fields to cut down on width

  • on desktop, labels can go to the left if it works

  • labels should be clear, concise, skimmable

  • note: for now, our form data won't actually go anywhere, since we're not adding scripts