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>
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
126-forms
By tkjn
126-forms
- 2,893
