Date post: | 13-Dec-2015 |
Category: |
Documents |
Upload: | ambrose-patterson |
View: | 216 times |
Download: | 0 times |
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
Formsform
• 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
Formsform action
• action is the path to the page on the server that will process the form
• Written like this:•<form action= “contact_action”|
Formsform method
• method instructs the browser about how it should send the data: get and post
• Written like this:•<form action= “contact_action” method=“post”>
Formsget
• 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:• <form action= “contact_action” method=“post”>
Formsget
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
Formspost
• 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 Boxinput
• Most common element is the “single line text field”
• input with required type attribute
• Looks like this:
<input type=“text”
Text Boxinput
• input requires a type attribute
• the type attribute tells exactly which control is desired. Example:
<input type=“text”
Text Boxinput
• 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 Boxname 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 type=“text” name = “firstname”/>
input tag always empty, so put “/”
Text Boxform
• Set the visible width of the field: add size to the input tag:
<input type=“text” name = “firstname” size=“30” />
Text Boxform
• 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:
<input type=“text” name = “firstname” size=“30” maxlength = “20”/>
Text Boxform
• Prefill data using the value attribute:
<input type=“text” name = “firstname” size=“30” maxlength = “20” value=“Enter name here” />
Adding Labelslabel
• Apply two ways:
1. Wrap label text and input tag in the label tag:
<label>First Name: <input type=”text” name=“fname” /></label>
Use this when there is no code separating label from field
Adding Labelslabel
• 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:
• <td><label for=“fname”>First Name</label></td><td><input type=“text” name=“fname” id=“fname” /></td>
Use this when other code needs to appear between the label and the control.
Check Boxes & Radio Buttonscheck 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 Buttonscheck 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 Buttonscheck box radio
• Adding pre-select
• Use checked=“unchecked” attribute to the tag
• Example:
<input type=“checkbox” name=“offers” value=“1” checked=“checked”/>
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 Listoption 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
<select name=“states”>
<option value=“AL”>Alabama</option>
<option value=“AK”>Alaska</option>
</select>
Drop-Down Listmultiple
• 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 Optionsoptgroup
• 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 Optionsoptgroup
• Looks like this: • XHTML does not limit number of options in optgroups (just like select)
• Can’t nest subcategories
<optgroup label="Midwest Region"> <option value="AR">Arkansas</option> <option value="IL">Illinois</option> <option value="IN">Indiana</option> <option value="IA">Iowa</option> <option value="KS">Kansas</option> <option value="MI">Michigan</option> <option value="MN">Minnesota</option> <option value="MO">Missouri</option> <option value="NE">Nebraska</option> <option value="ND">North Dakota</option> <option value="OH">Ohio</option> <option value="SD">South Dakota</option> <option value="WI">Wisconsin</option>
</optgroup>
Insert Text Areatextarea
• 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 Areatextarea
• Setting size of box looks like this. Note that because textarea is a container element, there is a closing tag
<label>Additional Comments:<br /> <textarea name="comments" rows="5" cols="30" tabindex="70"></textarea> </label>
Insert Text Areatextarea
• Limiting input: without JavaScript, no way to limit the information into a textarea
• Some browsers restrict to 65,536 characters
Insert Text Areatextarea
• Allowing user to mark up text:• Use FCKEditor• Implemented with both XHTML and JavaScript
Add a Hidden Fieldhidden
• 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 Fieldhidden
• Looks like this:
– Use input, set the type attribute to hidden– name attribute is required– Provide value attribute representing data
being embedded<input type="hidden" name="ref" value="1" />
</p>
Add a Password Fieldpassword
• Use input with a type of password• Browser automatically replaces the text being
inserted with asterisks• Looks like this:<p><label>Please create a password:<input type="password" name="pword" tabindex="80" />
</label></p>
Add a File Upload Fieldfile
• 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 Fieldfile
• 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:<p><label>If you would like us to review a file, please upload it:<input type="file" name="upload" /></label></p>
Add a File Upload Fieldenctype
• 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 Fieldenctype
• Looks like this:
<form method=“post” action=“form_action” enctype=“ multipart/form-data”>
<label>Select a file to upload: <input type=“file” name=“upload” /> </label> </form>
Add a Submit Buttonsubmit
• 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 Buttonsubmit
• 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 typesreset 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