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 element
<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>
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
HMTL5 FORMS COMP 126: Practical Web Design & Development for Everyone
126-forms
By tkjn
126-forms
- 3,381
