Forms Collecting Data CSS Class 5

Forms Create a form Add text box Add labels Add check boxes and radio buttons Build a drop-down list Group drop-down options Insert text area Add hidden field Add password field File upload field and submit button

What is a Form? A form is a page that collects data for some specified purpose An XHTML form is a section of a document that has normal content, markup, and special elements called "controls"

Forms Go to form links posted at blog (“form links”) Observe the following: What type of data is asked for? How the page is composed: header, body, footer Mixture of elements (dropdown windows, radio buttons, etc)

Controls Controls: are checkboxes, radio buttons, menus, etc) and labels on those controls Go to “ Tryit” links at blog and try checkboxes, radio buttons, etc

Forms form All content of form and form controls must be wrapped inside form Forms have two required attributes: action method

Forms What does the action do? –Action makes the “road” to the server that performs the action What does the method do? –Method tells the browser how to send the data. There are two ways

Forms form action action is the path to the page on the server that will process the form Written like this: <form action= “contact_action”|

Forms form method method instructs the browser about how it should send the data: get and post Written like this:

Forms get What is “get?” get sends the information as part of the URL as a query string URL visible on the action page will consist of the address of the page followed by a question mark and then the form data written like this:

Forms get Disadvantages of get: URL has a limited length Security Information can be altered by user Cannot send binary data Search engines use get because it can be saved as a bookmark or favorite

Forms post For forms where the information has any length, use post Browser sends the form data in the HTTP headers (the information it sends to the server when it connects) Any amount of data can be sent in a post get is default, recommended to use post

Text Box input Most common element is the “single line text field” input with required type attribute Looks like this: <input type=“text”

Text Box input input requires a type attribute the type attribute tells exactly which control is desired. Example: <input type=“text”

Text Box input When the browser sends info to server, it needs to associate the user-entered data with the form control into which it was entered, so every form control has a required name attribute

Text Box name attribute name may consist only of letters, numbers, dashes, and underscores Naming conventions (requirements of processing language, not XHTML: Begin with a letter, not a number Name may be case sensitive Check with developer of processing script for others Continuing… input tag always empty, so put “/”

Text Box form Set the visible width of the field: add size to the input tag:

Text Box form Limit the number of characters: –Set the length with the maxlength attribute, which does not need to be the same as size Looks like this:

Text Box form Prefill data using the value attribute:

Adding Labels label Apply two ways: 1.Wrap label text and input tag in the label tag: First Name: Use this when there is no code separating label from field

Adding Labels label 2. Associate them by7 add id attribute to the form field, then setting the label element’s for attribute to a value matching the id: First Name Use this when other code needs to appear between the label and the control.

Check Boxes & Radio Buttons check box radio Use when user selects from a list: –check boxes –radio buttons –select list Use input element Both require name (identical because the data can then be handled as a logical set)

Check Boxes & Radio Buttons check box radio Require a value Value should be unique to each button Value attribute allows you to set meaning of the check box or radio button

Check Boxes & Radio Buttons check box radio Adding pre-select Use checked=“unchecked” attribute to the tag Example:

Drop-Down List Drop-down lists are spacesavers Rely on two primary elements: select Option select defines the list as a whole and provides its name within select, there is a series of option tags

Drop-Down List option tags Each option tag has a value, which is the data to be sent to the server Between the opening and closing option tags is the text the user will see in the browser Alabama Alaska

Drop-Down List multiple select lists a single selection Create additional attributes with multiple Always has value of multiple Tells browser it should allow more than one selection size attribute determines number of options visible on screen Browser will automatically add scroll bar

Group Drop-Down Options optgroup Grouping elements within a long list Place in the select tag and will wrap around a set of option elements optgroup element takes a required label attribute Allows for insertion of a description of the group of options that follow

Group Drop-Down Options optgroup Looks like this:XHTML does not limit number of options in optgroups (just like select) Can’t nest subcategories Arkansas Illinois Indiana Iowa Kansas Michigan Minnesota Missouri Nebraska North Dakota Ohio South Dakota Wisconsin

Insert Text Area textarea To allow user to input large blocks of text –Example: craigslist textarea element Takes a required name attribute Size of box: –Default varies with browser –Accepts row and col to set size

Insert Text Area textarea Setting size of box looks like this. Note that because textarea is a container element, there is a closing tag Additional Comments:

Insert Text Area textarea Limiting input: without JavaScript, no way to limit the information into a textarea Some browsers restrict to 65,536 characters

Insert Text Area textarea Allowing user to mark up text: Use FCKEditor Implemented with both XHTML and JavaScript

Add a Hidden Field hidden For when designer needs to embed data that should not be editable by or visible to users Google hides preference for language in a hidden field named hl

Add a Hidden Field hidden Looks like this: –Use input, set the type attribute to hidden –name attribute is required –Provide value attribute representing data being embedded

Add a Password Field password Use input with a type of password Browser automatically replaces the text being inserted with asterisks Looks like this: Please create a password:

Add a File Upload Field file Consists of two parts: –Text field for the path to the file –Button that allows user to browse computer’s hard drive for file Use input field with type set to file Name required for file, of course

Add a File Upload Field file Designer issues: size and maxlength not supported Makes size of boxes different No control over Browse text Browsers only allow one file per upload field Looks like this: If you would like us to review a file, please upload it:

Add a File Upload Field enctype Also needed: –Add an additional attribute to the form tag: Enctype The default enctype is application/x- www-form-urlencoded, which makes browser send all text File needs to be sent as binary data, the rest can be sent as text, so add enctype and set its value to multipart/form-data Also set method to post

Add a File Upload Field enctype Looks like this: Select a file to upload:

Add a Submit Button submit Form complete, user now needs to send it Use input element with a type set to submit XHTML requires a name for the button Assure consistency across browsers by providing a value attribute Size of button determined by length of text but can be precisely controlled with CSS

Add a Submit Button submit Return or Enter key sending: –Browsers inconsistent in how this is handled vs. clicking the button –All browsers submit the form with Return and Enter but some do not submit the button’s name and value to the server –If using multiple submit buttons on a form, provide a unique name for each –Use server processing script to see which button was clicked, then do necessary processing

Other button types reset button reset Setting input type to reset creates a button that will clear form Use is not recommended button Setting input type to button creates a generic button with no default behavior With generic button, provide JavaScript code to instruct its function Often used for client-side scripting