Lesson 7 1 Try coding Try to code

  • Slides: 11
Download presentation
Lesson 7 1

Lesson 7 1

Try coding… Try to code the following table design: Cell 2 Cell 1 Cell

Try coding… Try to code the following table design: Cell 2 Cell 1 Cell 3 2

<HTML> <BODY> <Table Border=1 Align=center> <TR> <TD rowspan=2>Cell 1</TD> <TD>Cell 2</TD> </TR> <TD>Cell 3</TD>

<HTML> <BODY> <Table Border=1 Align=center> <TR> <TD rowspan=2>Cell 1</TD> <TD>Cell 2</TD> </TR> <TD>Cell 3</TD> </TR> </Table> </Body> </HTML> 3

4

4

Text boxes - Attributes • <input type=text Name=“URL” Value=http: //> • <Input type=text Name=“address”

Text boxes - Attributes • <input type=text Name=“URL” Value=http: //> • <Input type=text Name=“address” size=“ 40”> • <input type=text Name=“age” maxlength=“ 3”> 5

6

6

Example – Checkbox <HTML> <HEAD> <TITLE>Check. Box Example</TITLE> </HEAD> <BODY> <H 3>Describe Your Phobia!</H

Example – Checkbox <HTML> <HEAD> <TITLE>Check. Box Example</TITLE> </HEAD> <BODY> <H 3>Describe Your Phobia!</H 3> <FORM ACTION=http: //www. sad. com/scripts/formtest. asp METHOD="POST"> What is <I>your</I> phobia? (Please check all that apply): <P> <INPUT TYPE="CHECKBOX" NAME=“Water">Fear of water<BR> <INPUT TYPE="CHECKBOX" NAME="Bald">Fear of becoming bald<BR> <INPUT TYPE="CHECKBOX" NAME=“Lock”>Fear of being locked inside<BR> <INPUT TYPE="CHECKBOX" NAME="Flying" Checked >Fear of flying<BR> <P> <INPUT TYPE="SUBMIT" VALUE="Submit"> <INPUT TYPE="RESET"> </FORM> </BODY> </HTML> 7

8

8

Example – Radio button <HTML> <HEAD> <TITLE>Radio Button Example</TITLE> </HEAD> <BODY> <H 3>Survey</H 3>

Example – Radio button <HTML> <HEAD> <TITLE>Radio Button Example</TITLE> </HEAD> <BODY> <H 3>Survey</H 3> <FORM ACTION="http: //www. sad. com/scripts/formtest. asp" METHOD="POST"> Which of the following best describes your current income level: <BR> <INPUT TYPE="RADIO" NAME=“Income" VALUE="Poverty">living below the poverty line<BR> <INPUT TYPE="RADIO" NAME=“Income" VALUE=“Middle” Checked>living at the level of middle class<BR> <INPUT TYPE="RADIO" NAME=“Income" VALUE=“Upper">living at the level of upper class<BR> Which of the following best describes your political inclination: <BR> <INPUT TYPE="RADIO" NAME="Politics" VALUE=“Nationalist" CHECKED>Worker of Nationalist Party<BR> <INPUT TYPE="RADIO" NAME="Politics" VALUE=“Socialist">Member of Socialist Party<BR> <INPUT TYPE="RADIO" NAME="Politics" VALUE=“Republican">Supporter of Republican Party<BR> <INPUT TYPE="RADIO" NAME="Politics" VALUE=“None">None of the above<BR> <P> <INPUT TYPE="SUBMIT" VALUE="Submit"> <INPUT TYPE="RESET"> </FORM> </BODY> </HTML> 9

10

10

Example - lists <HTML><BODY> <FORM ACTION="http: //www. sad. com/scripts/formtest. asp" METHOD="POST"> Select your nationality:

Example - lists <HTML><BODY> <FORM ACTION="http: //www. sad. com/scripts/formtest. asp" METHOD="POST"> Select your nationality: <P> <SELECT NAME=“Nationality" SIZE="4"> <OPTION>American</OPTION> <OPTION>Australian</OPTION> <OPTION>Hungarian</OPTION> <OPTION>Indian</OPTION> <OPTION>Iranian</OPTION> <OPTION SELECTED>Pakistani</OPTION> <OPTION>French</OPTION> </SELECT><P> Select your favorite city: <P> <SELECT NAME="City"> <OPTION>Sydney</OPTION> <OPTION>London</OPTION> <OPTION SELECTED>Lahore</OPTION> </SELECT><P> Countries visited last year: <P> <SELECT NAME=“Countries" SIZE="5" MULTIPLE> <OPTION>Canada</OPTION> <OPTION>Russia</OPTION> <OPTION>England</OPTION> <OPTION>Egypt</OPTION> <OPTION>Saudi Arabia</OPTION> </SELECT> </BODY></HTML> 11