Embed Size (px)
Citation preview
Introduction to HTML
Part 3
Chapter 2Chapter 2
Learning Outcomes
Identify how to design frames. Explain frames’ attributes. Describe the method on designing forms on
web page: Textbox, Password box, Checkbox, Radio Button, Drop-down menu, Submit & Reset Button
2.3.1 Frames
Allow you to divide into sub-windows. Content of each frame can be independent. Enable you to display more than one web
page at a time. Two types :
Horizontal Vertical
At least three documents needed to create a frame
Defining Frames
<frameset> and </frameset> tags are used to set the frame type and space (in pixels or percentage)
<frame> set which HTML file to display and assign name for targeting purposes.
<noframe> display information for browsers that do not support frame function. If you do include this the browser won’t display anything.
Creating Horizontal Frame
<html>
<frameset rows="25%,50%,25%">
<frame src="frame_a.htm" />
<frame src="frame_b.htm" />
<frame src="frame_c.htm" />
</frameset>
</html>
Creating Vertical Frame
<html>
<frameset cols="25%,50%,25%">
<frame src="frame_a.htm" />
<frame src="frame_b.htm" />
<frame src="frame_c.htm" />
</frameset>
</html>
frameset attribute By default, user can manually resize the frame
size by dragging the border. You can add noresize attribute to disable resizing.
The frame border can also look ugly so to eliminate it you can add border=0 in the frameset tag.
By default, scrollbar will be automatically appear when you have more content than the frame area. You can either force the scrollbar to appear or disable it by applying scroll=“yes” or scroll=“no” attribute in the frameset tag.
Nested frame
Frames can be arranged in an interesting way by nesting them
Frame CFrame B
Frame A
<html><frameset rows="50%,50%">
<frame src="frame_a.htm" /> <frameset cols="25%,75%"> <frame src="frame_b.htm" /> <frame src="frame_c.htm" /> </frameset>
</frameset></html>
Nested frame
2.3.2 What is Forms …
Forms are a way to collect information from web users and transmit it back to web server.
The form is an HTML elements that display fields which user can enter information and then click a button to submit it.
…Continued
<form> and </form> tags are used to create a form.
action attribute provides URL or location of the server-side script that will process the data. You can also send the data to an e-mail address by inserting action=“mailto:[email protected]”
<input> tags are added to create the fields for the users to enter information.
Elements in Forms
Text-entry fields Password fields Radio buttons Check boxes Drop-down menus Submit and Reset buttons
Textbox
Allows user to enter non formatted and/or non validated text
Example of use: Full name Address Phone No Email
<input type=“text” name=“phone” >
Textbox
size attribute determine the length of the textbox.
maxlength attribute the maximum number of character can be typed in a textbox.
<input type=“text” name=“Username” size=“25” maxlength=“10” >
Password box
Similar to textbox except that the characters is not revealed and replaced with asterisks.
<input type=“password” name=“Username” size=“25” maxlength=“10” >
Submit/Reset Buttons
Submit button is required. Form data will be transmitted to the server when
submit button is clicked. The value attribute will determine the label on the
buttons. Reset button will clear all form.
<input type="submit" value="Submit This Form“ >
<input type="reset" value="Clear Form and Start Over“ >
Creating a Login Form
<form action=””>
Username :
<input type = "text" name = "Username" size=”15” maxlength=”10” ><br>
Password :
<input type = "password" name = "Password" size=”15” maxlength=”10” ><br>
<input type = "submit" value=”Login”>
<input type = "reset" value=”Reset”>
</form>
Example (Login form)
Checkboxes
Allows the user to click on a box to toggle a value to either yes or no.
<input type = "checkbox" name=”mailist”
value=”yes” checked>
I’m interested to join the mailing list
Checkboxes
Sometimes, there will a group of checkboxes. In this case, you will have all there checkboxes
using the same value in the name attribute.
Grocery Checklist<form action = ""> <input type = "checkbox" name ="groceries" value = "milk" checked> Milk <input type = "checkbox" name ="groceries" value = "bread" > Bread <input type = "checkbox" name = "groceries"
value= "eggs" > Eggs</form>
Checkboxes
Radio Buttons
Provide mutually exclusive selection value Only one button may be pressed Pressing an alternate button in a radio button
group will automatically remove the previous selection
Radio Buttons
What Type of Computer do you have?<form action = ""><input type="radio" name="Computer-Type" value="Pentium" checked>Pentium
<input type ="radio" name ="Computer-Type" value ="486DX">486 DX<input type ="radio" name ="Computer-Type“ value ="486SX">486 SX</form>
Text Area Fields Allows multiple lines of entry to be typed Can be used to capture comments
Text Area Fields
<p>Comments: <br><form action=“”><textarea name="comments" rows="10" cols="70">This is text that can be defaulted into the text area field</textarea></p>
</form>
Combo Boxes Provides efficient way to choose a value from a list
of valid values Similar to Radio Buttons
