Introduction to HTML Part 3 Chapter 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 and tags are used to set the frame type and space (in pixels or percentage) set which HTML file to display and assign name for targeting purposes. display information for browsers that do not support frame function. If you do include this the browser won’t display anything.

Creating Horizontal Frame

Creating Vertical Frame

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

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 and 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 address by inserting 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

Textbox size attribute determine the length of the textbox. maxlength attribute the maximum number of character can be typed in a textbox.

Password box Similar to textbox except that the characters is not revealed and replaced with asterisks.

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.

Creating a Login Form Username : Password :

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 <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 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? Pentium <input type ="radio" name ="Computer-Type" value ="486DX">486 DX <input type ="radio" name ="Computer-Type“ value ="486SX">486 SX

Text Area Fields Allows multiple lines of entry to be typed Can be used to capture comments

Text Area Fields Comments: This is text that can be defaulted into the text area field

Combo Boxes Provides efficient way to choose a value from a list of valid values Similar to Radio Buttons