Hyper Text Markup
Language
Forms
Forms
• How to collect information from
visitors
– HTML forms give you a set of elements
to collect data from your users
Form Controls
Form Controls
Form Controls
How Forms Work
Form Structure
<form action=“[Link]“ method =“get”>
Username:
<input type="text" name="username" size="15“ maxlength="30" />
</form>
INPUT TEXT
<input type="text" name="username" maxlength="30" />
• <input>
• type
• name
Password Input
<form action="[Link]">
<p>Username:
<input type="text“
name="username" size="15"
maxlength="30" />
</p>
<p>Password:
<input type="password"
name="password" size="15"
maxlength="30" />
</p>
</form>
TEXT AREA
<form action="[Link]">
<p>What did you think of this gig?
</p>
<textarea name="comments"
cols="20" rows="4">
Enter your comments...
</textarea>
</form>
RADIO BUTTON
<form action="[Link]">
<input type="radio" name="gender" value="rock“
checked="checked" /> Rock
<input type="radio" name="gender" value="pop" /> Pop
<input type="radio" name="gender" value="jazz" /> Jazz
</form>
CHECK BOX
<form action="[Link]">
<p>Please select your favorite music service(s): <br />
<input type="checkbox" name="service“ value="itunes"
checked="checked" /> iTunes
<input type="checkbox" name="service"value="lastfm" /> [Link]
<input type="checkbox" name="service" value="spotify" /> Spotify
</p>
</form>
DROP DOWN LIST BOX
<form action="[Link]">
<p>What device do you listen to music on?</p>
<select name="devices">
<option value="ipod">iPod</option>
<option value="radio">Radio</option>
<option value="computer">Computer</option>
</select>
</form>
FILE INPUT BOX
<form action="[Link]" method="post">
<p>Upload your song in MP3 format:</p>
<input type="file" name="user-song" /><br />
<input type="submit" value="Upload" />
</form>
SUBMIT AND IMAGE BUTTON
<input type="submit" name="subscribe"
value="Subscribe" />
<input type="image" src="images/[Link]"
width="100" height="20" />
LABEL CONTROLS
<input id="female" type="radio" name="gender“ value="f">
<label for="female">Female</label>
<input id="male" type="radio" name="gender"value="m">
<label for="male">Male</label>
Grouping form elements
<fieldset>
<legend>Contact details</legend>
<label>Email:<br />
<input type="text" name="email"
/></label><br />
<label>Mobile:<br />
<input type="text"
name="mobile" /></label><br />
<label>Telephone:<br />
<input type="text"
name="telephone" /></label>
</fieldset>
Frames
• Divide browser window into multiple sections where each section can load
a separate web document.
• A collection of frames in the browser window is known as a frameset
<frameset rows = "10%,80%,10%">
<frame name = "top" src = "/html/top_frame.htm" />
<frame name = "main" src = "/html/main_frame.htm" />
<frame name = "bottom" src = "/html/bottom_frame.htm" />
<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>
Thank you
