3. FORMS
Lesson 10 Unit J

4. Why Forms? Free-form – input that is unstructured and
does not limit choices.
For example, lets say you ask clients to you the information about your pet so that your can book the pet a spot in the kennel.
number 1 - Bowser is our new puppy. Bowser is brown and white. Bowser will be staying 3 days next week.
number 2 - Bubba is our family dog. Bubba is a very gentle 5 year old terrier. Lately Bubba has had some medical problems but it should not be a problem during the stay on the upcoming holiday weekend.
Do you know the gender, type of animal, status of shots or even exactly which days and nights the animal will be at the kennel?

5. Forms provide structured input.

6. What are the ADVANTAGES of using forms?
User does the work
Can require information
Can limit choices
Can validate input
Can give default values
Can put information into discrete pieces – “chunks”
Birthdate
Better
Phone number
Better
PatJones
Pat Jones

7. Which IS Better? Which is better a persons age or their date of birth?
ANSWER: Date of birth because it does not change and age can be calculated.
Derived data - data value can be computed based upon other data.

8. Derive or update each visit?
Dog’s weight?
ANSWER: Enter each visit
Dog’s shots?
ANSWER: Enter each visit – law requires that they are current in their shots.

9. Where to start? What is the purpose of the form?
How will the information be used?
What type of data?
Yes/no, numbers to what decimal, abbreviations, codes
How discreet? First name, initial, last name
Break down into multiple has advantages and disadvantages.
Talk to the users if possible.

10. Where to start? Design on paper first. Put a title on the form
Place a unique identifier of the form
(usually in top right corner or in the footer).
Provide instructions and explanations.
Every input should have a label.

11. Where to start? Put related fields together.
Order should be what users expect.
Logical flow
left  right
top V
bottom
Place a field for questions or comments at the bottom of the form.

12. Form Essentials Define the form with form tags
<form> </form>
Your entire form MUST be within the form tags!
Add input controls – they all must be within the form tags.
Add action buttons – at bottom of form before the end form tag.

13. Without css

14. With css

15. Fieldset: group of fields that forms a logical unit
Label: element containing descriptive text that is associated with a field
Associate each field with a label to make the significance of the field clear to users
Fieldset: group of fields that forms a logical unit
Legend: a descriptive title for a fieldset
Add legends to fieldsets to further increase usability of the form

16. How many fieldsets in the following code?
Within contactinfo, what is the first legend and what is the first label?

20. Input Controls - TEXTFIELD
Type is text for the first input, type is for the second input
name= is crucial for input
id= is crucial for css
Placeholder gives direction

21. Input from a FORM
What is submit is the name attribute of a field with the associated value.

22. How does a TEXTFIELD get its size?
In the css file
#nameinput, # input {width: 30em; maxlength: 60}
#phoneinput {width: 12em; }

23. Input Controls - CHECKBOXES
Why is value crucial?

24. Input Controls – OPTION BUTTONS
In order for buttons to work, each group MUST use the same value for name.
Checked indicates the default.

25. Suppose you wanted to know what county they live in.
How many counties in Arizona? 15
Which state has the fewest counties?
Alaska has 8 and Hawaii has only 5
But the trick answer is Louisiana has zero counties and 64 parishes
Which state has the most counties?
Texas has 254
Use Drop down menu for a selection of one from many. Limits choices and controls input.

26. Suppose you wanted to know what county they live in.

27. Input Controls provide a variety of input techniques.

28. ADDITIONAL INPUTS
Textarea – multi-column text area.

29. ADDITION ITEMS

30. ADDITION ITEM Requiring input.
New attribute in HTML5
Can be done with a script – javascript.
<legend><span>Contact Information</span></legend>
<label>Name
<input type="text" name="name" id="nameinput" required="required" placeholder="First and last name" />
</label>

31. EVEN MORE ADDITIONAL ITEMS

32. ACTION BUTTONS <fieldset id="submitbutton">
<input type="submit" id="submit"
value=“Submit" />
</fieldset>

33. TEXT on THE ACTION BUTTON
<fieldset id="submitbutton">
<input type="submit" id="submit"
value=“Submit my information" />
</fieldset>

34. MORE ABOUT BUTTONS
On the begin form tag you can indicate an action and a method for how the form is submitted.

35. Submit button
“action” attribute used to specify name and location of script that will accept form data
“method” attribute used to indicate how data should be submitted
On the form tag you might have:
<form action=“my_form.asp" method="get"> or
<form method="post" action="

36. Figure J-19: HTML code for form action and submit button
Figure J-22: results.html page showing submitted form data