7 Forms Flashcards
Get input from the user (html side)
<form>
</form>
Every form requires an action
t or f
t
Specify specific file name to output form information to
action=”filename and location”
Add the values from the form to the end of the URL
Used to request data from a specified resource.
method=”get”
Send the values to HTTP headers
Used to send data to a server to create/update a resource.
method=”post”
When do you use
method=”get” (2 situations)
short forms (such as search boxes)
when you are just retrieving data from the web server (not sending information that should be added to or deleted from a database)
When do you use
method=”post” (4 situations)
If your form:
allows users to upload a file
is very long
contains sensitive data
(e.g. passwords)
adds information to, or deletes information from, a
database
Control size of form
size attribute
but just use CSS now
What are the kinds of inputs?
(18 kinds)
Which of them do not follow the input type=”” format? (2) And what goes in the middle for them?
<input type=”text” />
<input type=”search”/>
<input type=”password”/>
<input type=”email”/>
<input type=”url”/>
<textarea> default text </textarea>
<input type=”radio”/>
(name=”” to define a group)
(checked=”checked” to set which one starts checked)
<input type=”checkbox”/>
(name=”” to define a group)
(checked=”checked” to set which one starts checked)
<input type=”range”/>
<select>
<option> option text </option>
<option> option text </option>
</select>
(selected=”selected” to set which one starts selected)
(multiple=”multiple” in the select tag to define that multiple options can be selected)
<input type=”file”/>
<input type=”submit” name=”SUBMIT”/>
(value attribute to define what text is on the tag
<input type=”image”/>
(same as submit)
<input type=”hidden”>
<input type=”date”/>
<input type=”email”/>
<input type=”number”/>
<input type=”tel”/>
<input type=”color”/>
textarea and select do not use the input type=”” format
When the form is inputted, ensure each input type is recognizable in the backend?
name=”name”
For those input types that do not have text or files as inputs, set the input value
value=”value”
use an image for a button
<button> <img src etc> Add
</button>
Make sure screen readers know what inputs are which
And expand clickable area to the text of the radio buttons for instance
< label> < input type=”blah”/> </label>
or
<input id=”female” type=”radio” name=”gender”
value=”f”>
<label for=”female”>Female</label>
Group form items into a box
Label the box
(good for checkboxes and radios)
(good for screenreaders to be able to separate related form options)
< fieldset>
< legend> Text </legend>
</ fieldset>
Require a form entry to be filled in before submission (in html)
required=”required”
or just
required
Have placeholder text in certain text input elements
Have text already in the field
<input type=”text” id=”first_name” placeholder=”greyed out text”>
<input type=”text” id=”first_name” value=”prefilled text”>
Set the height and width of a textarea
<textarea rows=”20” cols=”60”></textarea>
Setup a select group
optgroup (option group)
<select name=”fashion”>
<optgroup label=”Clothing”>
<option value=”t_shirt”>T-Shirts</option>
<option value=”sweater”>Sweaters</option>
<option value=”coats”>Coats</option>
</optgroup>
<optgroup label=”Foot Wear”>
<option value=”sneakers”>Sneakers</option>
<option value=”boots”>Boots</option>
<option value=”sandals”>Sandals</option>
</optgroup>
</select>
How do radio buttons know which group they’re in?
the name attribute
Types of buttons
type=”submit”
type=”reset”
type=”button” (generic)
Why should you always set the button type?
a button within a form with the type value of submit <strong>(which happens to be the default value)</strong> will always try to make a new request and submit data back to the server. Hence, for buttons that are used within a form for different purposes other than submitting the data, the type attribute should always be specified to avoid unwanted effects of submitting a form.
Make sure an element is read out loud a specific way
example, you want an input area to be required but if you add a *, it will read as “star” on screen readers
aria-label=”required”
And
add a title attribute for the sighted
It’s better to use lists for forms
t or f
t
Don’t use heading tags within a form
t or f
F
good practice to organize a form into lists.
How to define an email or phone number format?
Why do you need to?
the pattern attribute
Some emails don’t have a .com end
there are many different phone number formats all around the world
So the tel and email input types don’t define a format
Make it so users can select multiple options on a <select> input by holding control
add the multiple attribute
Have suggested options for a text field
list attribute to a data list element <label for="myFruit">What's your favorite fruit?</label> <input type="text" name="myFruit" id="myFruit" list="mySuggestion"> <datalist id="mySuggestion"> <option>Apple</option> <option>Banana</option> <option>Blackberry</option> <option>Blueberry</option> <option>Lemon</option> <option>Lychee</option> <option>Peach</option> <option>Pear</option> </datalist>
Add ticks to a range input
<input type="range" list="tickmarks"> <datalist id="tickmarks"> <option value="0"></option> <option value="10"></option> <option value="20"></option> <option value="30"></option> <option value="40"></option> <option value="50"></option> <option value="60"></option> <option value="70"></option> <option value="80"></option> <option value="90"></option> <option value="100"></option> </datalist>
Add a progress bar
<progress max=”100” value=”75”>75/100</progress>
add a meter bar (a sort of non moving progress bar to show other kinds of quantities)
Make the colour change when the number gets past a certain point
<meter min=”0” max=”100” value=”75” low=”33” high=”66” optimum=”50”>75</meter>
Change position of fieldset legend
fieldset {
position: relative;
}
legend {
position: absolute;
bottom: 0;
right: 0;
}
Form styling is often taken from the OS
Prevent OS styling
input {
-webkit-appearance: none;
appearance: none;
}
You will need both for different reasons
ie search inputs on macOS need appearance: none
pseudoclass for checkboxes checked or not checked
:checked
:disabled
put something at the very beginning or end of an element
like checkboxes in a checkbox or radio input
or little arrow of a dropdown list at the end
(pseudo-element)
::before
::after
What are some pseudo classes relevant to forms
6 groups
hover
focus
active
required and optional
valid, invalid, in-range, out-of-range (range is like with sliders) (valid is like when an email address doesn’t match the valid format)
enabled, disabled,
read-only, read-write
checked, indeterminate, default
What are form controls?
The input elements on a form that request the input data.
What is the name attribute for?
to set the key name for the form object in the backend. So we know what the data is.
Set a minimum and maximum length for text inputs
minlength=”3”
maxlength=”30”
attributes
Set a minimum and maximum number value for number inputs
min=”1”
max=”10”
Define an email, credit card or zip code format
pattern=”(\d{5}([-]\d{4})?)”
Make a text field REQUIRE banana or cherry
pattern=”[Bb]anana|[Cc]herry”
it does B or b between [ ]
