![Page 1: Web Page Design Forms! Website Design. Objectives What forms can do The Attributes of the form tag Using Textboxes Textareas Checkboxes Radio buttons](https://reader036.vdocuments.mx/reader036/viewer/2022062322/5697bfe81a28abf838cb6704/html5/thumbnails/1.jpg)
Web Page Design
Forms!
Website Design
![Page 2: Web Page Design Forms! Website Design. Objectives What forms can do The Attributes of the form tag Using Textboxes Textareas Checkboxes Radio buttons](https://reader036.vdocuments.mx/reader036/viewer/2022062322/5697bfe81a28abf838cb6704/html5/thumbnails/2.jpg)
Objectives
• What forms can do• The Attributes of the form tag• Using
• Textboxes• Textareas• Checkboxes• Radio buttons• Select options
• Formatting Forms Cleanly
![Page 3: Web Page Design Forms! Website Design. Objectives What forms can do The Attributes of the form tag Using Textboxes Textareas Checkboxes Radio buttons](https://reader036.vdocuments.mx/reader036/viewer/2022062322/5697bfe81a28abf838cb6704/html5/thumbnails/3.jpg)
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
![Page 4: Web Page Design Forms! Website Design. Objectives What forms can do The Attributes of the form tag Using Textboxes Textareas Checkboxes Radio buttons](https://reader036.vdocuments.mx/reader036/viewer/2022062322/5697bfe81a28abf838cb6704/html5/thumbnails/4.jpg)
HTML Forms
• HTML Forms are used to:• Gather survey information on web• Submit passwords • Structure queries on a database• Submit orders
![Page 5: Web Page Design Forms! Website Design. Objectives What forms can do The Attributes of the form tag Using Textboxes Textareas Checkboxes Radio buttons](https://reader036.vdocuments.mx/reader036/viewer/2022062322/5697bfe81a28abf838cb6704/html5/thumbnails/5.jpg)
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
![Page 6: Web Page Design Forms! Website Design. Objectives What forms can do The Attributes of the form tag Using Textboxes Textareas Checkboxes Radio buttons](https://reader036.vdocuments.mx/reader036/viewer/2022062322/5697bfe81a28abf838cb6704/html5/thumbnails/6.jpg)
HTML Form Elements
Text Box
Radio Buttons
Check Box
Select Box
Text Area
Submit/Reset button
![Page 7: Web Page Design Forms! Website Design. Objectives What forms can do The Attributes of the form tag Using Textboxes Textareas Checkboxes Radio buttons](https://reader036.vdocuments.mx/reader036/viewer/2022062322/5697bfe81a28abf838cb6704/html5/thumbnails/7.jpg)
Objectives
• What forms can do• The Attributes of the form tag• Using
• Textboxes• Textareas• Checkboxes• Radio buttons• Select options
• Formatting Forms Cleanly
![Page 8: Web Page Design Forms! Website Design. Objectives What forms can do The Attributes of the form tag Using Textboxes Textareas Checkboxes Radio buttons](https://reader036.vdocuments.mx/reader036/viewer/2022062322/5697bfe81a28abf838cb6704/html5/thumbnails/8.jpg)
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!
![Page 9: Web Page Design Forms! Website Design. Objectives What forms can do The Attributes of the form tag Using Textboxes Textareas Checkboxes Radio buttons](https://reader036.vdocuments.mx/reader036/viewer/2022062322/5697bfe81a28abf838cb6704/html5/thumbnails/9.jpg)
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.
![Page 10: Web Page Design Forms! Website Design. Objectives What forms can do The Attributes of the form tag Using Textboxes Textareas Checkboxes Radio buttons](https://reader036.vdocuments.mx/reader036/viewer/2022062322/5697bfe81a28abf838cb6704/html5/thumbnails/10.jpg)
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.
![Page 11: Web Page Design Forms! Website Design. Objectives What forms can do The Attributes of the form tag Using Textboxes Textareas Checkboxes Radio buttons](https://reader036.vdocuments.mx/reader036/viewer/2022062322/5697bfe81a28abf838cb6704/html5/thumbnails/11.jpg)
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.)
![Page 12: Web Page Design Forms! Website Design. Objectives What forms can do The Attributes of the form tag Using Textboxes Textareas Checkboxes Radio buttons](https://reader036.vdocuments.mx/reader036/viewer/2022062322/5697bfe81a28abf838cb6704/html5/thumbnails/12.jpg)
Tag elements within <FORM>… </FORM>
<FORM METHOD=“POST” ACTION="save_it.php”>
Your Form Here
(Checklists, Text Boxes, Drop-down lists,
buttons, etc)
</FORM>
![Page 13: Web Page Design Forms! Website Design. Objectives What forms can do The Attributes of the form tag Using Textboxes Textareas Checkboxes Radio buttons](https://reader036.vdocuments.mx/reader036/viewer/2022062322/5697bfe81a28abf838cb6704/html5/thumbnails/13.jpg)
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!
![Page 14: Web Page Design Forms! Website Design. Objectives What forms can do The Attributes of the form tag Using Textboxes Textareas Checkboxes Radio buttons](https://reader036.vdocuments.mx/reader036/viewer/2022062322/5697bfe81a28abf838cb6704/html5/thumbnails/14.jpg)
Creating Text Boxes
• Text boxes are those input areas on a form where the customer can input free-format typing.
Text Box
![Page 15: Web Page Design Forms! Website Design. Objectives What forms can do The Attributes of the form tag Using Textboxes Textareas Checkboxes Radio buttons](https://reader036.vdocuments.mx/reader036/viewer/2022062322/5697bfe81a28abf838cb6704/html5/thumbnails/15.jpg)
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" )
![Page 16: Web Page Design Forms! Website Design. Objectives What forms can do The Attributes of the form tag Using Textboxes Textareas Checkboxes Radio buttons](https://reader036.vdocuments.mx/reader036/viewer/2022062322/5697bfe81a28abf838cb6704/html5/thumbnails/16.jpg)
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
![Page 17: Web Page Design Forms! Website Design. Objectives What forms can do The Attributes of the form tag Using Textboxes Textareas Checkboxes Radio buttons](https://reader036.vdocuments.mx/reader036/viewer/2022062322/5697bfe81a28abf838cb6704/html5/thumbnails/17.jpg)
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">
![Page 18: Web Page Design Forms! Website Design. Objectives What forms can do The Attributes of the form tag Using Textboxes Textareas Checkboxes Radio buttons](https://reader036.vdocuments.mx/reader036/viewer/2022062322/5697bfe81a28abf838cb6704/html5/thumbnails/18.jpg)
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
![Page 19: Web Page Design Forms! Website Design. Objectives What forms can do The Attributes of the form tag Using Textboxes Textareas Checkboxes Radio buttons](https://reader036.vdocuments.mx/reader036/viewer/2022062322/5697bfe81a28abf838cb6704/html5/thumbnails/19.jpg)
Check Boxes
Check boxes are pre-defined optional input that you check.
Checkbox
![Page 20: Web Page Design Forms! Website Design. Objectives What forms can do The Attributes of the form tag Using Textboxes Textareas Checkboxes Radio buttons](https://reader036.vdocuments.mx/reader036/viewer/2022062322/5697bfe81a28abf838cb6704/html5/thumbnails/20.jpg)
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.
![Page 21: Web Page Design Forms! Website Design. Objectives What forms can do The Attributes of the form tag Using Textboxes Textareas Checkboxes Radio buttons](https://reader036.vdocuments.mx/reader036/viewer/2022062322/5697bfe81a28abf838cb6704/html5/thumbnails/21.jpg)
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.
![Page 22: Web Page Design Forms! Website Design. Objectives What forms can do The Attributes of the form tag Using Textboxes Textareas Checkboxes Radio buttons](https://reader036.vdocuments.mx/reader036/viewer/2022062322/5697bfe81a28abf838cb6704/html5/thumbnails/22.jpg)
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.
![Page 23: Web Page Design Forms! Website Design. Objectives What forms can do The Attributes of the form tag Using Textboxes Textareas Checkboxes Radio buttons](https://reader036.vdocuments.mx/reader036/viewer/2022062322/5697bfe81a28abf838cb6704/html5/thumbnails/23.jpg)
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.
![Page 24: Web Page Design Forms! Website Design. Objectives What forms can do The Attributes of the form tag Using Textboxes Textareas Checkboxes Radio buttons](https://reader036.vdocuments.mx/reader036/viewer/2022062322/5697bfe81a28abf838cb6704/html5/thumbnails/24.jpg)
Objectives
• What forms can do• The Attributes of the form tag• Using
• Textboxes• Textareas• Checkboxes• Radio buttons• Select options
• Formatting Forms Cleanly
![Page 25: Web Page Design Forms! Website Design. Objectives What forms can do The Attributes of the form tag Using Textboxes Textareas Checkboxes Radio buttons](https://reader036.vdocuments.mx/reader036/viewer/2022062322/5697bfe81a28abf838cb6704/html5/thumbnails/25.jpg)
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
![Page 26: Web Page Design Forms! Website Design. Objectives What forms can do The Attributes of the form tag Using Textboxes Textareas Checkboxes Radio buttons](https://reader036.vdocuments.mx/reader036/viewer/2022062322/5697bfe81a28abf838cb6704/html5/thumbnails/26.jpg)
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!
![Page 27: Web Page Design Forms! Website Design. Objectives What forms can do The Attributes of the form tag Using Textboxes Textareas Checkboxes Radio buttons](https://reader036.vdocuments.mx/reader036/viewer/2022062322/5697bfe81a28abf838cb6704/html5/thumbnails/27.jpg)
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
![Page 28: Web Page Design Forms! Website Design. Objectives What forms can do The Attributes of the form tag Using Textboxes Textareas Checkboxes Radio buttons](https://reader036.vdocuments.mx/reader036/viewer/2022062322/5697bfe81a28abf838cb6704/html5/thumbnails/28.jpg)
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.
![Page 29: Web Page Design Forms! Website Design. Objectives What forms can do The Attributes of the form tag Using Textboxes Textareas Checkboxes Radio buttons](https://reader036.vdocuments.mx/reader036/viewer/2022062322/5697bfe81a28abf838cb6704/html5/thumbnails/29.jpg)
Summary
• What forms can do• The Attributes of the form tag• Using
• Textboxes• Textareas• Checkboxes• Radio buttons• Select options
• Formatting Forms Cleanly
![Page 30: Web Page Design Forms! Website Design. Objectives What forms can do The Attributes of the form tag Using Textboxes Textareas Checkboxes Radio buttons](https://reader036.vdocuments.mx/reader036/viewer/2022062322/5697bfe81a28abf838cb6704/html5/thumbnails/30.jpg)
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.
![Page 31: Web Page Design Forms! Website Design. Objectives What forms can do The Attributes of the form tag Using Textboxes Textareas Checkboxes Radio buttons](https://reader036.vdocuments.mx/reader036/viewer/2022062322/5697bfe81a28abf838cb6704/html5/thumbnails/31.jpg)
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>
![Page 32: Web Page Design Forms! Website Design. Objectives What forms can do The Attributes of the form tag Using Textboxes Textareas Checkboxes Radio buttons](https://reader036.vdocuments.mx/reader036/viewer/2022062322/5697bfe81a28abf838cb6704/html5/thumbnails/32.jpg)
Hands On Lab 2
• Create an HTML form that looks like the following: