HMTL5 FORMS, MEDIA, RESOURCES

COMP 126: Practical Web Design & Development for Everyone

HTML5

FORMS

<form method="get [or post]" action="/path to the script controlling the form data submission">

    ...contents of the form

</form>

 

<form method="get" action="/">

  <div>

    <label>

      field label that appears to the user

      <input type="whatever-type-of-input" id="whatever-id-for CSS&JS" name="whatever-name-to-transmit-data" value="whatever-value-assigned"/>

    </label>

  </div>

</form>

 

 

HTML input types

unstyled form

styled form

form design concerns

  • who are your users? what will their expectations be? discuss with potential user/s if possible

  • what should come first, second, etc? how can you group the fields?

  • connected fields should be visually grouped using the <fieldset> tag; this is also good for accessibility

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

HTML5 ODDS & ENDS

OTHER RESOURCES

126-forms

By tkjn

126-forms

  • 2,166