Embed Size (px)
Citation preview
LAB 6: FormsTheoretical background
HTML Forms are required, when you want to collect some data from the site visitor. For example, during user registration you would like to collect information such as name, email address, credit card, etc.A form will take input from the site visitor and then will post it to a back-end application such as CGI, ASP Script or PHP script etc. The back-end application will perform required processing on the passed data based on defined business logic inside the application.There are various form elements available like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.The HTML <form> tag is used to create an HTML form and it has following syntax −<form action = "Script URL" method = "GET|POST"> form elements like input, textarea etc.</form>Practical Part Input tag
The most used form tag is the <input> tag. The type of input is specified with the type attribute. The most commonly used input types are explained below.
Text Fields
Text fields are used when you want the user to type letters, numbers, etc. in a form.
Create HTML file to display data form contains two text fields first name and last name
HTML file
<html><body><form><font size = "5" color = "red"> Please insert the following information</font><br><br>First name: <input type="text" name="first name"><br>Last name:
<input type="text" name="last name"></form></body></html>
How it looks in a browser:
Note that the form itself is not visible. Also note that in most browsers, the width of the text field is 20 characters by default, you can use size attribute of <input> tag to change the default size:
<input type="text" name="first name" size = "25">
Radio Buttons
Radio Buttons are used when you want the user to select one of a limited number of choices.
Add two radio buttons to the form
HTML file
<html><body><form><font size = "5" color = "red"> Please insert the following information</font><br><br>First name: <input type="text" name="first name"><br>Last name: <input type="text" name="last name"><br><br><input type="radio" name=" gender" value="male"> Male<br><input type="radio" name=" gender" value="female"> Female</form></body></html>How it looks in a browser:
Checkboxes
Checkboxes are used when you want the user to select one or more options of a limited number of choices.
Add three check boxes to the form:
HTML file
<html><body><form><font size = "5" color = "red"> Please insert the following information</font><br><br>First name: <input type="text" name="first name"><br>Last name: <input type="text" name="last name"><br><br><input type="radio" name="gender" value="male"> Male<br><input type="radio" name="gender" value="female"> Female<br><br>I have a bike:<input type="checkbox" name="vehicle" value="Bike"><br>I have a car: <input type="checkbox" name="vehicle" value="Car"><br>I have an airplane: <input type="checkbox" name="vehicle" value="Airplane">
</form></body></html>
How it look in a browser:
The Form's Action Attribute and the Submit Button
When the user clicks on the "Submit" button, the content of the form is sent to another file. The form's action attribute defines the name of the file to send the content to. The file defined in the action attribute usually does something with the received input.
Method attribute specifies the method used to submit the form data, the default value is "get", and this attribute takes two values:
Value descriptionget The form data is appended to the URL specified in the action
attributepost The form data is sent to the server as separate message
Add submit button to the form, when you click on this button the information well send to web page "html_form_action. asp"
HTML file
<html><body><form name="input" action="html_form_action. asp"><font size = "5" color = "red"> Please insert the following information</font><br><br>First name: <input type="text" name="first name"><br>Last name: <input type="text" name="last name"><br><br><input type="radio" name="gender" value="male"> Male<br><input type="radio" name="gender" value="female"> Female<br><br>I have a bike:<input type="checkbox" name="vehicle" value="Bike"><br>I have a car: <input type="checkbox" name="vehicle" value="Car"><br>I have an airplane: <input type="checkbox" name="vehicle" value="Airplane"><br><br><input type="submit" value="Submit"></form></body></html>
How it looks in a browser:
If you click the "Submit" button, you will send your input to a page called "html_form_action. asp".
That page will show you the received input, but now you well show error message because you don't
have this page in your web site.
LAB 7: FramesTheoretical background
HTML frames are used to divide your browser window into multiple sections where each section can load a separate HTML document. A collection of frames in the browser window is known as a frameset. The window is divided into frames in a similar way the tables are organized: into rows and columns.
The disadvantages of using frames are:
The web developer must keep track of more HTML documents
It is difficult to print the entire page
Practical Part
Use Frames in you web pageWith frames, you can display more than one HTML document in the same browser window. Each HTML document is called a frame, and each frame is independent of the others.The Frameset Tag
The <frameset> tag defines how to divide the window into frames
Each frameset defines a set of rows or columns
The values of the rows/columns indicate the amount of screen area each row/column will occupy
The Frame TagThe <frame> tag defines what HTML document to put into each frame In the example below we have a frameset with two columns. The first column is set to 25% of the width of the browser window. The second column is set to 75% of the width of the browser window. The HTML document "frame_a.html" is put into the first column, and the HTML document "frame_b.html" is put into the second column:
<frameset cols="25%,75%"> <frame src="frame_a.html"> <frame src="frame_b.html"></frameset>
Note: The frameset column size value can also be set in pixels (cols="200,500"), and one of the columns can be set to use the remaining space (cols="25%,*").
Basic Notes - Useful TipsIf a frame has visible borders, the user can resize it by dragging the border. To prevent a user from doing this, you can add noresize="noresize" to the <frame>tag.Note: for more examples please visit this link: https://www.tutorialspoint.com/html/html_frames.htm
You need to create three html files for the following activity
First file: Index.html
HTML file
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"><html><head><title> Frames Example I </title></head><frameset rows="20%,80%"> <frame src="bannerBasic.html" name="bannerBasic"> <frame src="contentBasic.html" name="contentBasic" > <noframes> This is an example file for demonstrating frames. Why are you looking at it in a frame disabled browser? </noframes></frameset>
</html>Second file: bannerBasic.html
HTML file
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>Basic banner.</title></head><body bgcolor="#ffff00"> <h1> <font color="#000033"> Basic banner </font>
</h1></body></html>Third file: contentBasic.html
HTML file
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title> Basic content </title></head> <body bgcolor="#00ffff"> <h1><font color="#ff0000"> Basic content </font></h1><p> A huge number of paragraphs here to illustrate scrolling. </p><p> A huge number of paragraphs here to illustrate scrolling. </p><p> A huge number of paragraphs here to illustrate scrolling. </p><p> A huge number of paragraphs here to illustrate scrolling. </p><p> A huge number of paragraphs here to illustrate scrolling. </p><p> A huge number of paragraphs here to illustrate scrolling. </p><p> A huge number of paragraphs here to illustrate scrolling. </p><p> A huge number of paragraphs here to illustrate scrolling. </p><p> A huge number of paragraphs here to illustrate scrolling. </p><p> A huge number of paragraphs here to illustrate scrolling. </p><p> A huge number of paragraphs here to illustrate scrolling. </p><p> A huge number of paragraphs here to illustrate scrolling. </p><p> A huge number of paragraphs here to illustrate scrolling. </p><p> A huge number of paragraphs here to illustrate scrolling. </p></body></html>
The result is
contentBasic.html
Index.html
