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.
