14

Click here to load reader

Form

Embed Size (px)

DESCRIPTION

HTML-form Element

Citation preview

Page 1: Form

<FORM  ACTION="name&_address_of_CGI_script" METHOD="get">.. < /FORM><FORM ACTION="mailto:[email protected]" METHOD="post"> .. < /FORM> Common Gateway Interface

Elements inside a form are introduced by the <input> tag

type=“hidden” name=“variable name or field name ” value=“value  that  sends  to the server”

type =“text” name=“” value =“” size=“25”type =“submit” value =“”type =“reset” value =“”type =“checkbox” value =“” name=“”

1

Page 2: Form

<INPUT>   <input TYPE=“element name">

2

Page 3: Form

Form example I

3

<FORM ><input type="hidden" name=“title" value="Feedback" />

<p><label>Name: <input type= "text" name= "name" size="25" maxlength="30"/>

</label></p><input type= "submit" value="Submit your entries"/> <input type= "reset" value="Clear Your Entries"/></FORM >

send the input the textbox to server

clear the content of textbox

Data that would send to server but do not display on screen

Page 4: Form

Form example II

4

<p><label>Comments:<br /> <textarea name= "comments" rows="4" cols="36“WRAP=“off">Enter your comments here.</textarea> </label></p>

<p><label>Please input your password: <input name= "secret" type="password" size="25"/></label></p><input type= "submit" value="Submit Your Entries"/> <input type= "reset" value="Clear Your Entries"/>

Space is counted here

Masked by asterisk

WRAP=“off” "virtual" "physical"

Page 5: Form

5

<form><input name="color" type="radio" value="Green" CHECKED><input name="color" type="radio" value="black“><input name="color" type="radio" value="blue“><input name="color" type="radio" value="red“></form>If we choose 3rd choice then the form reached is:        Color=blue 

<form><input type="checkbox" name="ws" value="yes" CHECKED>Winamp<input type="checkbox" name="ps" value="yes">Photoshop<input type="checkbox" name="acd" value="yes" CHECKED>ACDSee<input type="checkbox" name="all" value="yes">All</form>

If checkboxes belong to the same group then name will be the same

Page 6: Form

6

Form example IV

<p><label>Rate our site:<select name= "rating“ SIZE="4" ><option value=“Amazing”selected="selected">Amazing</option><option value=“3”>3</option><option value=“2”>2</option><option value=“1”>1</option><option value=“0”>0</option></select></p> <input type= "submit" value="Submit Your Entries"/> <input type= "reset" value="Clear Your Entries"/>

The “selected” value here mean Amazing is selected default value

Change to default value when reset

<select name= "rating“ SIZE="4"  MULTIPLE>

Page 7: Form

<FORM ...> <TABLE BORDER="0"> <TR><TD>Please enter your name : < /TD><TD> <INPUT TYPE="text" NAME="the name" VALUE="" SIZE="40" MAXLENGTH="30"> < / TD>< /TR><TR><TD>Please enter your password :< /TD><TD> <INPUT TYPE="password" NAME="the password" VALUE="" SIZE="40" MAXLENGTH="30"> < /TD>< / TR>< /TABLE>< / FORM>

7

Page 8: Form

<meta name="keywords" http‐equiv="keywords“>content=“game,image,programs,courses”

<meta name="content‐type" http‐equiv="content‐type"∙content="text/html; cahrset=windows‐1256">

<html dir="rtl">

8

Page 9: Form

9

<INPUT TYPE="image" SRC="images/submit.gif" HEIGHT="20" WIDTH="60" BORDER="0” ALT=" Enter your data“>

Page 10: Form

BGCOLOR | HEIGHT | WIDTH | ALIGN | HSPACE | VSPACE | BEHAVIOR | DIRECTION |

LOOP | SCROLLAMOUNT | SCROLLDELAY<MARQUEE BGCOLOR="#99CCFF" HEIGHT="80" WIDTH="40%">My page</MARQUEE>

Welcome to<MARQUEE BGCOLOR="#99CCFF" HEIGHT="80" WIDTH=“200" ALIGN="middle“>  Computer Department< /MARQUEE>Have a good time.

ALIGN top, middle bottom

10

Page 11: Form

HSPACEWelcome to<MARQUEE BGCOLOR="#99CCFF" HEIGHT="80" WIDTH="40%" HSPACE="30">My site< /MARQUEE>Have a good time.

VSPACE

BEHAVIOR (scroll, slide, alternate)

<MARQUEE BGCOLOR="#99CCFF" WIDTH="80%" BEHAVIOR="alternate">Welcome < /MARQUEE>

11

Page 12: Form

DIRECTION

<MARQUEE BGCOLOR="#99CCFF" WIDTH="80%" DIRECTION="right">Welcome< /MARQUEE>

LOOP “2,3………          ‐1  ,Infinite

<MARQUEE BGCOLOR="#99CCFF" WIDTH="80%" DIRECTION="right" LOOP="3">Welcome < /MARQUEE>

12

Page 13: Form

SCROLLAMOUNT

<MARQUEE SCROLLAMOUNT="10"> HTML < /MARQUEE>

<MARQUEE SCROLLAMOUNT=“200"> HTML < /MARQUEE>

Value in pixel

SCROLLDELAY Value in msec

<MARQUEE SCROLLAMOUNT="1" SCROLLDELAY="500"> HTML < /MARQUEE>

<MARQUEE SCROLLAMOUNT="50" SCROLLDELAY="500"> HTML < /MARQUEE>

<MARQUEE SCROLLAMOUNT="100" SCROLLDELAY="500"> HTML < /MARQUEE>

<MARQUEE SCROLLAMOUNT="200" SCROLLDELAY="500"> HTML < /MARQUEE>

13

Page 14: Form

Multimedia<BGSOUND><BGSOUND SRC=“file_name.mid" LOOP="infinite"><BGSOUND SRC="file_name.mid" LOOP="3">

<A HREF=“f1.mid">  download  this file    </A>

<EMBED>

<EMBED SRC="Media\file_name.MID" AUTOSTART="false" LOOP="false" HEIGHT="45"WIDTH="170"><NOEMBED>You Must Have QuickTime Program you can download it fromhttp://www.quicktime.com</NOEMBED>

14