1. SYST 28043 Web Technologies SYST 28043 Web Technologies XHTML Forms

2. 12/15/2015Wendi Jollymore, ACES2 Forms Used to get user input on a web page Can use scripts or server programs to process form data We’ll use PHP next week Form element Contains all the other elements that define your input controls

3. 12/15/2015Wendi Jollymore, ACES3 Tag Tag Contains the entire form Attributes: method=“GET/POST” How the form data is sent to the server action=“” Contains the name of the file that processes your page …

4. 12/15/2015Wendi Jollymore, ACES4 GET vs. Post GET Sends form data as part of URL After URL, a ? symbol, then data Name-value pairs fieldName=value Pairs separated with & field1=value1&field2=value2 http://www.blah.ca?name=Fred+Flintstone&iq=2 This is not very secure or private

5. 12/15/2015Wendi Jollymore, ACES5 GET vs. POST POST Data is sent in a separate input stream Allows you to send more data URL length is limited More secure GET data is recorded in server logs, browser history etc POST data is not We’ll talk more about GET/POST when we learn PHP

6. 12/15/2015Wendi Jollymore, ACES6 Input Tags Most input controls can be defined with tag Type attribute defines the kind of input control: E.g. Text, password, checkbox, radio, hidden, button, submit, reset, file, etc. Value attribute The value the control has Depends on the type attribute

7. 12/15/2015Wendi Jollymore, ACES7 Input Tags Name vs. ID Name attribute Unique name for this element Id attribute Same as name (replacing name, eventually) Sometimes you’ll use one or other Safer to just use both

8. 12/15/2015Wendi Jollymore, ACES8 Text Boxes To get plain text input from user type=“text” Attributes maxlength=“n” Maximum number of characters allowed size=“n” Visible size of box in # of characters Value attribute Can contain default value in box

9. 12/15/2015Wendi Jollymore, ACES9 Password Fields A text box that doesn’t show contents Shows * symbols instead of characters type=“password” Other attributes same as text box

10. 12/15/2015Wendi Jollymore, ACES10 Check Boxes Used for on/off or yes/no type of questions Used for lists that allow multiple selections type=“checkbox” Value attribute contains the value sent to the server if box is checked Checked=“checked” Sets default to checked

11. 12/15/2015Wendi Jollymore, ACES11 Radio Buttons Used for lists of items User can select only one type=“radio” name attribute must be the same for each radio button in a group Treats group like one input field Value attribute contains value returned for this field (selected button) checked=“checked” To select default item

12. 12/15/2015Wendi Jollymore, ACES12 Buttons Submit button When clicked, triggers form processing type=“submit” Reset button Automatically reloads form Causes all controls to be reinitialized type=“reset” Set value property if you want these to day something else

13. 12/15/2015Wendi Jollymore, ACES13 Buttons If you want some other kind of button type=“button” Need to set onclick event E.g. run a script

14. 12/15/2015Wendi Jollymore, ACES14 Text Area A multi-line text box Max 1,024 characters Attributes: rows=“n” cols=“n” Sets number of visible rows and columns Default text goes between the tags

15. 12/15/2015Wendi Jollymore, ACES15 Lists List Box A list of items that might show a scroll bar Drop-down list A list of items that you have to “pull down” to see Both use the tag size=“n” attribute To set the number of visible rows in list box Leave this out to make a drop-down list

16. 12/15/2015Wendi Jollymore, ACES16 Lists Lists contain a set of elements Each one represents an item in the list Value attribute contains the value returned when an item is selected selected=“selected” For default selection tags Used to group items in the list

17. 12/15/2015Wendi Jollymore, ACES17 Setting Tab Order The order in which the user moves from control to control using tab key A logical and natural tab order helps user fill out a form faster Tab index = the numeric order of tabbed controls tabindex=“n” added to an element

18. 12/15/2015Wendi Jollymore, ACES18 Using Field Labels Most input controls will have prompts Field labels make pages more accessible They’re also very cool You can click the label to put cursor in/on control tag Prompt goes in between for=“” attribute The name of the control the label is paired with

19. 12/15/2015Wendi Jollymore, ACES19 Using Field Labels Examples: Your Name: Your Gender: Male Female

20. 12/15/2015Wendi Jollymore, ACES20 Fieldset and Legend Putting borders and labels around groups of controls Organization, neat, professional Adds a border Use CSS style attribute to customize Text label Put inside fieldset to add a label Can also customize with CSS

21. 12/15/2015Wendi Jollymore, ACES21 Homework Exercise See Forms Notes Make up your own survey, or do the one in the notes Due at the end of next class Work on this during the rest of class Next class: Finish homework exercise given today PHP!