1 web page design forms! website design. 2 objectives l what forms can do l the attributes of the...
Post on 19-Dec-2015
225 views
TRANSCRIPT
![Page 1: 1 Web Page Design Forms! Website Design. 2 Objectives l What forms can do l The Attributes of the form tag l Using »Textboxes »Textareas »Checkboxes »Radio](https://reader035.vdocument.in/reader035/viewer/2022062313/56649d3e5503460f94a175e7/html5/thumbnails/1.jpg)
1
Web Page Design
Forms!
Website Design
![Page 2: 1 Web Page Design Forms! Website Design. 2 Objectives l What forms can do l The Attributes of the form tag l Using »Textboxes »Textareas »Checkboxes »Radio](https://reader035.vdocument.in/reader035/viewer/2022062313/56649d3e5503460f94a175e7/html5/thumbnails/2.jpg)
2
Objectives
What forms can do The Attributes of the form tag Using
» Textboxes» Textareas» Checkboxes» Radio buttons» Select options
Formatting Forms Cleanly
![Page 3: 1 Web Page Design Forms! Website Design. 2 Objectives l What forms can do l The Attributes of the form tag l Using »Textboxes »Textareas »Checkboxes »Radio](https://reader035.vdocument.in/reader035/viewer/2022062313/56649d3e5503460f94a175e7/html5/thumbnails/3.jpg)
3
Competency Objectives
Can use forms to 1. Send data via email
2. Create basic form elements
3. Format forms properly
4. Send forms to server side program
Competency Alert:You need to
know this!
Common Problem Area!
People seem to forget this
![Page 4: 1 Web Page Design Forms! Website Design. 2 Objectives l What forms can do l The Attributes of the form tag l Using »Textboxes »Textareas »Checkboxes »Radio](https://reader035.vdocument.in/reader035/viewer/2022062313/56649d3e5503460f94a175e7/html5/thumbnails/4.jpg)
4
HTML Forms HTML Forms are used to:
»Gather survey information on web»Submit passwords »Structure queries on a database»Submit orders
![Page 5: 1 Web Page Design Forms! Website Design. 2 Objectives l What forms can do l The Attributes of the form tag l Using »Textboxes »Textareas »Checkboxes »Radio](https://reader035.vdocument.in/reader035/viewer/2022062313/56649d3e5503460f94a175e7/html5/thumbnails/5.jpg)
5
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., condor)
Your machine
Web Server
![Page 6: 1 Web Page Design Forms! Website Design. 2 Objectives l What forms can do l The Attributes of the form tag l Using »Textboxes »Textareas »Checkboxes »Radio](https://reader035.vdocument.in/reader035/viewer/2022062313/56649d3e5503460f94a175e7/html5/thumbnails/6.jpg)
6
HTML Form Elements
Text Box
Radio Buttons
Check Box
Select Box
Text Area
Submit/Reset button
![Page 7: 1 Web Page Design Forms! Website Design. 2 Objectives l What forms can do l The Attributes of the form tag l Using »Textboxes »Textareas »Checkboxes »Radio](https://reader035.vdocument.in/reader035/viewer/2022062313/56649d3e5503460f94a175e7/html5/thumbnails/7.jpg)
7
Objectives
What forms can do The Attributes of the form tag Using
» Textboxes» Textareas» Checkboxes» Radio buttons» Select options
Formatting Forms Cleanly
![Page 8: 1 Web Page Design Forms! Website Design. 2 Objectives l What forms can do l The Attributes of the form tag l Using »Textboxes »Textareas »Checkboxes »Radio](https://reader035.vdocument.in/reader035/viewer/2022062313/56649d3e5503460f94a175e7/html5/thumbnails/8.jpg)
8
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: 1 Web Page Design Forms! Website Design. 2 Objectives l What forms can do l The Attributes of the form tag l Using »Textboxes »Textareas »Checkboxes »Radio](https://reader035.vdocument.in/reader035/viewer/2022062313/56649d3e5503460f94a175e7/html5/thumbnails/9.jpg)
9
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.
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: 1 Web Page Design Forms! Website Design. 2 Objectives l What forms can do l The Attributes of the form tag l Using »Textboxes »Textareas »Checkboxes »Radio](https://reader035.vdocument.in/reader035/viewer/2022062313/56649d3e5503460f94a175e7/html5/thumbnails/10.jpg)
10
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: 1 Web Page Design Forms! Website Design. 2 Objectives l What forms can do l The Attributes of the form tag l Using »Textboxes »Textareas »Checkboxes »Radio](https://reader035.vdocument.in/reader035/viewer/2022062313/56649d3e5503460f94a175e7/html5/thumbnails/11.jpg)
11
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: 1 Web Page Design Forms! Website Design. 2 Objectives l What forms can do l The Attributes of the form tag l Using »Textboxes »Textareas »Checkboxes »Radio](https://reader035.vdocument.in/reader035/viewer/2022062313/56649d3e5503460f94a175e7/html5/thumbnails/12.jpg)
12
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: 1 Web Page Design Forms! Website Design. 2 Objectives l What forms can do l The Attributes of the form tag l Using »Textboxes »Textareas »Checkboxes »Radio](https://reader035.vdocument.in/reader035/viewer/2022062313/56649d3e5503460f94a175e7/html5/thumbnails/13.jpg)
13
Objectives
What forms can do The Attributes of the form tag Using
» Textboxes» Textareas» Checkboxes» Radio buttons» Select options
Formatting Forms Cleanly Competency Alert:You need to
know this!
![Page 14: 1 Web Page Design Forms! Website Design. 2 Objectives l What forms can do l The Attributes of the form tag l Using »Textboxes »Textareas »Checkboxes »Radio](https://reader035.vdocument.in/reader035/viewer/2022062313/56649d3e5503460f94a175e7/html5/thumbnails/14.jpg)
14
Creating Text Boxes
Text boxes are those input areas on a form where the customer can input free-format typing.
Text Box
![Page 15: 1 Web Page Design Forms! Website Design. 2 Objectives l What forms can do l The Attributes of the form tag l Using »Textboxes »Textareas »Checkboxes »Radio](https://reader035.vdocument.in/reader035/viewer/2022062313/56649d3e5503460f94a175e7/html5/thumbnails/15.jpg)
15
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="David Lash" )
![Page 16: 1 Web Page Design Forms! Website Design. 2 Objectives l What forms can do l The Attributes of the form tag l Using »Textboxes »Textareas »Checkboxes »Radio](https://reader035.vdocument.in/reader035/viewer/2022062313/56649d3e5503460f94a175e7/html5/thumbnails/16.jpg)
16
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=Dave+Lash
![Page 17: 1 Web Page Design Forms! Website Design. 2 Objectives l What forms can do l The Attributes of the form tag l Using »Textboxes »Textareas »Checkboxes »Radio](https://reader035.vdocument.in/reader035/viewer/2022062313/56649d3e5503460f94a175e7/html5/thumbnails/17.jpg)
17
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: 1 Web Page Design Forms! Website Design. 2 Objectives l What forms can do l The Attributes of the form tag l Using »Textboxes »Textareas »Checkboxes »Radio](https://reader035.vdocument.in/reader035/viewer/2022062313/56649d3e5503460f94a175e7/html5/thumbnails/18.jpg)
18
Text Area: FormatJust like text box but bigger.
http://www.depaul.edu/~dlash/website/TextInput.html
<textarea NAME="UNIT_COMMENTS" ROWS=4 COLS=70 >Your comments here</textarea>
Name= The name identifier passed to the email program. (E.g., name=”UNIT_COMMENTS”)
ROWS, COLS = Number of cols and rows of text box
![Page 19: 1 Web Page Design Forms! Website Design. 2 Objectives l What forms can do l The Attributes of the form tag l Using »Textboxes »Textareas »Checkboxes »Radio](https://reader035.vdocument.in/reader035/viewer/2022062313/56649d3e5503460f94a175e7/html5/thumbnails/19.jpg)
19
Check Boxes
Check boxes are pre-defined optional
input that you check.
Checkbox
![Page 20: 1 Web Page Design Forms! Website Design. 2 Objectives l What forms can do l The Attributes of the form tag l Using »Textboxes »Textareas »Checkboxes »Radio](https://reader035.vdocument.in/reader035/viewer/2022062313/56649d3e5503460f94a175e7/html5/thumbnails/20.jpg)
20
Check Boxes: General FormatPick your favorite:
<BR><INPUT TYPE=checkbox NAME="baseball” VALUE=“Like bball">Baseball
<BR><INPUT TYPE=checkbox NAME="hockey" VALUE=“Like hockey">Hockey
<BR><INPUT TYPE=checkbox NAME="soccer" VALUE=“Like soccer">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: 1 Web Page Design Forms! Website Design. 2 Objectives l What forms can do l The Attributes of the form tag l Using »Textboxes »Textareas »Checkboxes »Radio](https://reader035.vdocument.in/reader035/viewer/2022062313/56649d3e5503460f94a175e7/html5/thumbnails/21.jpg)
21
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: 1 Web Page Design Forms! Website Design. 2 Objectives l What forms can do l The Attributes of the form tag l Using »Textboxes »Textareas »Checkboxes »Radio](https://reader035.vdocument.in/reader035/viewer/2022062313/56649d3e5503460f94a175e7/html5/thumbnails/22.jpg)
22
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: 1 Web Page Design Forms! Website Design. 2 Objectives l What forms can do l The Attributes of the form tag l Using »Textboxes »Textareas »Checkboxes »Radio](https://reader035.vdocument.in/reader035/viewer/2022062313/56649d3e5503460f94a175e7/html5/thumbnails/23.jpg)
23
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: 1 Web Page Design Forms! Website Design. 2 Objectives l What forms can do l The Attributes of the form tag l Using »Textboxes »Textareas »Checkboxes »Radio](https://reader035.vdocument.in/reader035/viewer/2022062313/56649d3e5503460f94a175e7/html5/thumbnails/24.jpg)
24
Objectives
What forms can do The Attributes of the form tag Using
» Textboxes» Textareas» Checkboxes» Radio buttons» Select options
Formatting Forms Cleanly
![Page 25: 1 Web Page Design Forms! Website Design. 2 Objectives l What forms can do l The Attributes of the form tag l Using »Textboxes »Textareas »Checkboxes »Radio](https://reader035.vdocument.in/reader035/viewer/2022062313/56649d3e5503460f94a175e7/html5/thumbnails/25.jpg)
25
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: 1 Web Page Design Forms! Website Design. 2 Objectives l What forms can do l The Attributes of the form tag l Using »Textboxes »Textareas »Checkboxes »Radio](https://reader035.vdocument.in/reader035/viewer/2022062313/56649d3e5503460f94a175e7/html5/thumbnails/26.jpg)
26
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: 1 Web Page Design Forms! Website Design. 2 Objectives l What forms can do l The Attributes of the form tag l Using »Textboxes »Textareas »Checkboxes »Radio](https://reader035.vdocument.in/reader035/viewer/2022062313/56649d3e5503460f94a175e7/html5/thumbnails/27.jpg)
27
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: 1 Web Page Design Forms! Website Design. 2 Objectives l What forms can do l The Attributes of the form tag l Using »Textboxes »Textareas »Checkboxes »Radio](https://reader035.vdocument.in/reader035/viewer/2022062313/56649d3e5503460f94a175e7/html5/thumbnails/28.jpg)
28
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 $yourname <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: 1 Web Page Design Forms! Website Design. 2 Objectives l What forms can do l The Attributes of the form tag l Using »Textboxes »Textareas »Checkboxes »Radio](https://reader035.vdocument.in/reader035/viewer/2022062313/56649d3e5503460f94a175e7/html5/thumbnails/29.jpg)
29
Summary
What forms can do The Attributes of the form tag Using
» Textboxes» Textareas» Checkboxes» Radio buttons» Select options
Formatting Forms Cleanly
![Page 30: 1 Web Page Design Forms! Website Design. 2 Objectives l What forms can do l The Attributes of the form tag l Using »Textboxes »Textareas »Checkboxes »Radio](https://reader035.vdocument.in/reader035/viewer/2022062313/56649d3e5503460f94a175e7/html5/thumbnails/30.jpg)
30
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: 1 Web Page Design Forms! Website Design. 2 Objectives l What forms can do l The Attributes of the form tag l Using »Textboxes »Textareas »Checkboxes »Radio](https://reader035.vdocument.in/reader035/viewer/2022062313/56649d3e5503460f94a175e7/html5/thumbnails/31.jpg)
31
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: 1 Web Page Design Forms! Website Design. 2 Objectives l What forms can do l The Attributes of the form tag l Using »Textboxes »Textareas »Checkboxes »Radio](https://reader035.vdocument.in/reader035/viewer/2022062313/56649d3e5503460f94a175e7/html5/thumbnails/32.jpg)
32
Hands On Lab 2
Create an HTML form that looks like the following: