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