forms n.
Skip this Video
Loading SlideShow in 5 Seconds..
FORMS PowerPoint Presentation
Download Presentation

Loading in 2 Seconds...

play fullscreen
1 / 26

FORMS - PowerPoint PPT Presentation

  • Uploaded on

FORMS. Lesson 10 Unit K. Why Forms?. Free-form – input that is unstructured and does not limit choices. For example, lets say you ask clients to e-mail you the information about your pet so that your can book the pet a spot in the kennel.

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'FORMS' - nerina

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript


Lesson 10 Unit K

why forms
Why Forms?
  • Free-form – input that is unstructured and does not limit choices.
    • For example, lets say you ask clients to e-mail you the information about your pet so that your can book the pet a spot in the kennel.
      • E-mail number 1 - Bowser is a five year old grey and white female and weighs about 13 pounds. Bowser will be staying 3 days starting next Friday.
      • E-mail number 2 - Bubba is our family dog. Bubba is a very gentle brown Labrador Retriever. Lately Bubba has had some medical problems but it should not be 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?
form advantages
  • User does the work.
  • Can require information
  • Can limit choices
  • Can validate input
  • Can give default values
  • Can put information into discrete pieces – “chunks”
  • Which is better age or date of birth?
  • ANSWER: Date of birth because it does not change and age can be calculated.
where to start
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.
where to start1
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.
where to start2
Where to start?
  • Put related fields together.
  • Order should be what users expect.
  • Logical flow
    • left  right
    • top to bottom
  • Place a field for questions or comments at the bottom of the form.
form essentials
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.

FIELDSET – Group of form elements

LABEL – Descriptive text

LEGEND – Descriptive title for a fieldset

How many fieldsets in the following code?

Within contactinfo, what is the first legend and what is the first label?

input controls textfield
Input Controls - TEXTFIELD
  • Type is text
  • Name is crucial for input
  • Id is crucial for css
  • Placeholder gives direction
input from a form
Input from a FORM

What is submit is the name attribute of a field with the associated value.

how does a textfield get its size
How does a TEXTFIELD get its size?

In the css file

#nameinput, #emailinput {width: 30em; maxlength: 60}

#phoneinput {width: 12em; }

input controls checkboxes
Input Controls - CHECKBOXES
  • Why is value crucial?
input controls option buttons
Input Controls – OPTION BUTTONS

In order for buttons to work, each group MUST use the same value for name.

Checked indicates the default.

suppose you wanted to know what county they live in
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.
additional inputs

Textarea – multi-column text area.

addition item requiring input
ADDITION ITEM Requiring input.

New attribute in HTML5

Can be done with a script – javascript.

<legend><span>Contact Information</span></legend>


<input type="text" name="name" id="nameinput" required="required" placeholder="First and last name" />


action buttons

<fieldset id="submitbutton">

<input type="submit" id="submit“

value="Add to Cart" />


more about buttons

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

submit button
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="">