web page design forms! website design. objectives what forms can do the attributes of the form tag...
TRANSCRIPT
Web Page Design
Forms!
Website Design
Objectives
• What forms can do• The Attributes of the form tag• Using
• Textboxes• Textareas• Checkboxes• Radio buttons• Select options
• Formatting Forms Cleanly
Competency Objectives
• Can use forms to 1. Send data via email 2. Create basic form elements3. Format forms properly4. Send forms to server side program
Competency Alert:You need to
know this!
Common Problem Area!
People seem to forget this
HTML Forms
• HTML Forms are used to:• Gather survey information on web• Submit passwords • Structure queries on a database• Submit orders
HTML Forms • When submit a form it can be sent:
• to a script (program) on a web server for processing
• via email to a valid email address
HTML Form
Submit
Program or database
on Webserver (e.g., ecnu)
Your machine
Web Server
HTML Form Elements
Text Box
Radio Buttons
Check Box
Select Box
Text Area
Submit/Reset button
Objectives
• What forms can do• The Attributes of the form tag• Using
• Textboxes• Textareas• Checkboxes• Radio buttons• Select options
• Formatting Forms Cleanly
Starting and Ending Forms
• HTML forms are created by using the HTML <FORM> and </FORM> tags.
• Within these tags, you place various HTML form elements, such as text areas, check boxes, and radio buttons.
• For example, • <FORM ACTION=”http://indellible-learning.com/stuff.cgi”
METHOD=”POST”> . . ---(Your FORM elements
here) .
</FORM>
Competency Alert:You need to
know this!
Two primary <FORM> arguments • <FORM
ACTION=”http://perl-pgm.com/cgi-bin/stuff.cgi” METHOD=”POST”>
• get appends the form arguments to the end of the Web address.
• post sends the data as part of the body of the HTML document.
• Will use post since get method may limit the amount of data you can send.
• http://www.w3school.com.cn/tags/html_ref_httpmethods.asp
ACTION= - Specifies the URL of the receiving file/program to start when the form is submitted
METHOD= - Defines the argument format that will be used to send data to the receiving program/file.
Some Form Tag Examples• Send the results to a program:
<FORM METHOD=POST ACTION="http://mysite/receivedata.php"><FORM METHOD=POST ACTION=“receivedata.php">
• Send the results via email: <FORM METHOD="POST“ ACTION="mailto:[email protected]">
• Most sites don’t use email address submission:• The email you get is a messy email. • Requires client (end-user) to have correct default email defined• Usually want more control, (e.g., send email to multiple addresses or log
email to a file, or hide precise location of where email goes)
Look over internet for this program
Sends results via email to this email address.
Look in my current directory.
Form tag with mailto: attribute
This form has the following form tag: <form method=post action=mailto:[email protected]>
Pre-addressed mail is created. Here with Mozilla email (even though it is not set up properly on this computer.)
Tag elements within <FORM>… </FORM>
<FORM METHOD=“POST” ACTION="save_it.php”>
Your Form Here
(Checklists, Text Boxes, Drop-down lists,
buttons, etc)
</FORM>
Objectives
• What forms can do• The Attributes of the form tag• Using
• Textboxes• Textareas• Checkboxes• Radio buttons• Select options
• Formatting Forms CleanlyCompetency
Alert:You need to
know this!
Creating Text Boxes
• Text boxes are those input areas on a form where the customer can input free-format typing.
Text Box
Text Box: Format
Please Enter Your Full Name <Input Type="Text" SIZE=20 MAXLENGTH=30
Name="fullname">
Where • Please Enter Your Full Name - is text to display immediately before the text
box. • Input Type - A keyword that says how input will come in. You can say
• "Text" - for text boxes with characters displayed in box as typed. • "Passwd" - For text boxes with asterisks "*" displayed in box as typed.
• SIZE= Width of (in chars) the input box.• MAXLENGTH= - The max number of characters the user can type into box.• Name= The name identifier passed to the email program. (E.g.,
name=“Zhou Hong" )
Text Box: Format
Please Enter Your Full Name <Input Type="Text" SIZE=20 MAXLENGTH=30 Name="fullname">
Where • Name= The name identifier passed to the email program.
Note: If the above was sent via the mailto: attribute, the resulting email would look like:fullname=Zhou+Hong
Text Box: Password
Can also create a password text box that: • Works like a text box except input is shown as asterisks,
• For example: *******
Note: Most sites do NOT use this mechanism to transmit password because:
• It transmits passwords in clear text over internet (anyone who can tap physical network can view it.
Please Enter you password <Input Type=“password" SIZE=20 MAXLENGTH=30 Name=“user_password">
Text Area: FormatJust like text box but bigger.
<textarea NAME="UNIT_COMMENTS"
ROWS=4 COLS=70 >Your comments here</textarea>
• Name= The name identifier passed to the action. (E.g., name=”UNIT_COMMENTS”)
• ROWS, COLS = Number of cols and rows of text box
Check Boxes
Check boxes are pre-defined optional input that you check.
Checkbox
Check Boxes: General Format
Pick your favorite: <BR><INPUT TYPE=“checkbox” NAME="baseball” VALUE=“yes">Baseball
<BR><INPUT TYPE=“checkbox” NAME="hockey" VALUE=“yes">Hockey
<BR><INPUT TYPE=“checkbox” NAME="soccer" VALUE=“yes">Soccer
Pick your favorite: - This is a string of characters the shows up before check box. input TYPE="checkbox" - Says create a checkbox within the form. NAME=“soccer" - a name (e.g., soccer) to the checkbox that will be passed to the email software. VALUE=“Like soccer" - Specifies the initial value of the control (all set to “like soccer”) Note: you can include a checked attribute that checks the box initially.
Radio Buttons: General Format
• Radio Boxes –
How is <b><i>Web Site Design Going</i></b>:
<br><input TYPE="radio" NAME="variable1" VALUE=“sleep">
I get my extra sleep in class.
<br><input TYPE="radio" NAME="variable1" VALUE=“lost">
I get so confused I get lost trying to find my car after class.
<br><input TYPE="radio" NAME="variable1" VALUE=“gaveup">I gave up and copy my answers from my neighbor.
<br><input TYPE="radio" NAME="variable1" VALUE=“great" checked> Great class
can't wait for the movie.
Specifies to create a radio button
Logical name is “variable1”
Variable1 is “set” to “great” if this item is picked
For radio buttons to cooperate together, must use same name.
Selection Lists• Use <select> tag to create scrolling and pull-down pick lists.
<select name="extras" size="3" multiple> <option selected> Electric windows </option> <option> AM/FM Radio </option> <option> Turbo Charger </option>
</select>
• name = the label shown from the mail. • size =number of selections shown • multiple = allow multiple options to pick • option = the option to pick • options selected = pre-selected option.
Submit Buttons• Submit - (send the form)
<INPUT TYPE="submit" VALUE="Submit It">
• Can also reset <INPUT TYPE="reset" VALUE="Erase This Form“>
Create a submit button
Put this text on the button.
Objectives
• What forms can do• The Attributes of the form tag• Using
• Textboxes• Textareas• Checkboxes• Radio buttons• Select options
• Formatting Forms Cleanly
Putting it all together<html>
<head>
<title>Survey Form</title>
</head>
<body>
<h1>Class Survey</h1>
<FORM METHOD="POST" ACTION="mailto:[email protected]">
Name: <INPUT TYPE=input NAME="Name" >
<br/>Class:<INPUT TYPE=input NAME="Class" >
<br/>Class Evaluation:
<BR><INPUT TYPE=radio NAME="Eval" VALUE="Y">Great
<BR><INPUT TYPE=radio NAME="Eval" VALUE="Y">Average
<BR><INPUT TYPE=radio NAME="Eval" VALUE="Y">Fair
<BR><INPUT TYPE=radio NAME="Eval" VALUE="Y">Poor
<br/>Comments:<INPUT TYPE=input NAME="Comments" >
<br/><INPUT TYPE="submit" VALUE="Submit">
<INPUT TYPE="reset" VALUE="Erase">
</form>
</BODY>
</HTML>
Common Problem Area!
People seem to forget this
Cleaning it up with Tables<body>
<h1>Class Survey</h1>
<TABLE>
<FORM METHOD="POST" ACTION="mailto:[email protected]">
<TR><TD>
Name: </TD><TD> <INPUT TYPE=input NAME="Name" >
</TD></TR><TR><TD>
Class</TD><TD><INPUT TYPE=input NAME="Class" > </TD>
</TD></TR><TR><TD>
Class Evaluation: </TD><TD>
<INPUT TYPE=radio NAME="Eval" VALUE="Y">Great
<INPUT TYPE=radio NAME="Eval" VALUE="Y">Average
<INPUT TYPE=radio NAME="Eval" VALUE="Y">Fair
<INPUT TYPE=radio NAME="Eval" VALUE="Y">Poor
</TD></TR><TR><TD>
Comments</TD><TD><INPUT TYPE=input NAME="Comments" >
</TD></TR><TR><TD>
<INPUT TYPE="submit" VALUE="Submit">
</TD><TD>
<INPUT TYPE="reset" VALUE="Erase">
</TR>
</form>
</BODY>
Competency Alert:You need to
know this!
Sending Data to Scripts
• As previously mentioned can set up forms to send data to scripts:
• Need to know URL of script on webserver• Need to coordinate webserver script with your form
• E.g.,if use <input type=text name=in_name> then the receiving script must be looking for input variable in_name
Example form sending to script
<html><head> <title>Forms Example </title> </head><body><form action=receiving.php method=post>Please pick a color . . . <input type=radio name=color value=red> Red<input type=radio name=color value=blue> Blue<input type=radio name=color value=green> Green<br>
Please provide your name<Input Type="name" sIZE=20 MAXLENGTH=30 Name="yourname"><br><Input Type="submit">
</form></body></html>
<html><head> <title>Password Example </title></head><body><?php$color = $_POST['color'];$name = $_POST['yourname'];print "<font color=$color> ";print "Hello, your name is $name <br>";print "</font>";?></body></html>
receiving.php
set_color.html
Name must match
Note: for this example to work correctly both set_color.html and receiving.php must be in the same folder on the webserver.
Summary
• What forms can do• The Attributes of the form tag• Using
• Textboxes• Textareas• Checkboxes• Radio buttons• Select options
• Formatting Forms Cleanly
Hands-on Lab
• Create an HTML form that looks like the following: • Use the mailto form attribute to mail the results to an
email address.
One possible solution
<html><head><title> form check </title></head><body><form action=mailto:[email protected] method=post> Pick you favorite sports Team: <input type=“radio” name=“sport”> Bears<input type=“radio” name=“sport”> Cubs<input type=“radio” name=“sport”> Sox<input type=“radio” name=“sport”> Bulls<br><input type=“text” name=“name”> Your Name<br> <INPUT TYPE="submit"> </form></body></html>
Hands On Lab 2
• Create an HTML form that looks like the following: