WEB ENGINEERING AND APPLICATIONS ITC 311 REEM ALMOTIRI
advertisement
WEB ENGINEERING AND APPLICATIONS ITC 311 REEM ALMOTIRI Information Technology Department Majmaah University Lecture 6 Contents HTML Forms HTML Frames HTML Forms HTML forms are used to pass data to a server. A form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists, textarea, fieldset, legend, and label elements. <form> . input elements . </form> HTML <form> method Attribute -The method attribute specifies how to send form-data (the form-data is sent to the page specified in the action attribute). - The form-data can be sent as URL variables (with method="get") or as HTTP post transaction (with method="post"). HTML <form> method Attribute Notes on GET: • Appends form-data into the URL in name/value pairs • The length of a URL is limited (about 3000 characters) • Never use GET to send sensitive data! (will be visible in the URL) • GET is better for non-secure data, like query strings in Google Notes on POST: • Appends form-data inside the body of the HTTP request (data is not shown is in URL) • Has no size limitations HTML <form> Syntax: <form method="get|post"> Attribute Values: Value Description get Default. Appends the form-data to the URL in name/value pairs: URL?name=value&name=value post Sends the form-data as an HTTP post transaction <form> action Attributes action Attribute • Specifies the URL of a script on the Web server method Attribute • Specifies how the form’s data is sent to Web server - method = “post” - method = “get” enctype Attribute • The enctype attribute specifies how the form-data should be encoded when submitting it to the server. • Note: The enctype attribute can be used only if method="post". Value Description application/x-www-form-urlencoded fname=Ali&lname=Ahmed text/plain fname=Ali lname=Ahmed First name: Last name: Ali Ahmed HTML Forms – <Input> tag • <input> elements are used within a <form> element to declare input controls that allow users to input data. Example: <form action="html_form_action.asp" method="get"> Username: <input type="text" name="user" value =“Mohamed” /> <input type="submit" value="Submit" /> </form> Username: Submit Example: <form> First name: <input type="text" name="firstname" /><br /> Last name: <input type="text" name="lastname" /> </form> First name: Last name: Example: <form> Password: <input type="password" name="pwd" /> </form> Password: ****************** <form> <input type="radio" name="sex“ value=male /> <ذكرbr /> <input type="radio" name="sex" value= femal/> انثى </form> ذكر انثى <html > <head> <title>Internet and WWW How to Program - Forms</title> </head> <body> <h1>Feedback Form</h1> <p>Please fill out this form to help us improve our site.</p> <form method = "post" action = "/cgi-bin/formmail"> <!-- <input type = "text"> inserts a text box --> <p><label>Name: <input name = "name" type = "text" size = "25"maxlength = "30" /> </label></p> <p> <!-- input types "submit" and "reset" insert --> <!-- buttons for submitting and clearing the --> <!-- form's contents --> <input type = "submit" value = "Submit Your Entries" /> <input type = "reset" value = "Clear Your Entries" /> </p> </form> </body> </html> <input> name Attribute: • specifies the name of an <input> element. and is used to reference form data after a form is submitted. <input> maxlength Attribute: • The maxlength attribute specifies the maximum number of characters allowed in the <input> element. <input> size Attribute : • specifies the visible width, in characters, of an <input> element. It works with the text and password. •The <label> tag defines a label for an <input> element. it provides a usability improvement for mouse users, because if the user clicks on the text within the <label> element, it toggles the control. •The for attribute of the <label> tag should be equal to the id attribute of the related element to bind them together. <html> <body> <p>Click on one of the text labels to toggle the related control:</p> <form> <label for="male">Male</label> <input type="radio" name="sex" id="male" /> <br /> <label for="female">Female</label> <input type="radio" name="sex" id="female" /> </form> </body> Click on one of the text labels to toggle the related control: </html> Male Female <textarea> Tag The textarea element is used to create a multi-line text input form control. At W3Schools you will find all the Web-building tutorials you need, from basic HTML to advanced XML, SQL, ASP, and PHP. Example <textarea rows="2" cols="20"> At W3Schools you will find all the Web-building tutorials you need, from basic HTML to advanced XML, SQL, ASP, and PHP. </textarea> Attribute Description cols Specifies the visible width of a text area rows Specifies the visible number of lines in a text area <select> Tag The <select> tag is used to create a drop-down list. The <option> tags inside the <select> element define the available options in the list. Example <select> <option >Volvo</option> <option >Saab</option> <option >Mercedes</option> <option >Audi</option> </select> Volvo <fieldset> Tag The <fieldset> tag is used to group related elements in a form.. Tip: The <legend> tag defines a caption for the <fieldset> element. Example <form> <fieldset> <legend>Personalia:</legend> Name: <input type="text" /><br /> Email: <input type="text" /><br /> Date of birth: <input type="text" /> </fieldset> </form> HTML Frames With 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 HTML frameset Element The frameset element holds one or more frame elements. Each frame element can hold a separate document. The frameset element states HOW MANY columns or rows there will be in the frameset, and HOW MUCH percentage/pixels of space will take each of them. The HTML frame Element The <frame> tag defines one particular window (frame) within a frameset. Example <frameset cols="25%,75%"> <frame src="frame_a.htm" /> <frame src="frame_b.htm" /> </frameset> Example <frameset rows="25%,*,25%"> <frame src="frame_a.htm" /> <frame src="frame_b.htm" /> <frame src="frame_c.htm" /> </frameset> Note: The frameset column size can also be set in pixels (cols="200,500"), and one of the columns can be set to use the remaining space, with an asterisk (cols="25%,*"). Example (nested frames) <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> Attribute frameborder Value 0 1 marginheight pixels Description Specifies whether or not to display a border around a frame Specifies the top and bottom margins of a frame marginwidth pixels Specifies the left and right margins of a frame name name Specifies the name of a frame noresize noresize Specifies that a frame is not resizable scrolling yes Specifies whether or not to display no scrollbars in a frame auto src URL Specifies the URL of the document to show in a frame Navigation frame The navigation frame contains a list of links with the second frame as the target. The file called "tryhtml_contents.htm" contains three links. The source code of the links: <a href ="frame_a.htm" target ="showframe">Frame a</a><br> <a href ="frame_b.htm" target ="showframe">Frame b</a><br> <a href ="frame_c.htm" target ="showframe">Frame c</a> <html> <frameset cols="120,*"> <frame src="tryhtml_contents.htm" /> <frame src="frame_a.htm" name="showframe" /> </frameset> </html> <a> Target attribute Target Specifies where the linked document is to be loaded Value Description _blank Load in a new window _self Load in the same frame as it was clicked _top Load in the full body of the window framename Load in a named frame HTML <base> Tag Specify default target for all links on a page: <head> <base target=" showframe " /> </head> HTML Iframes An iframe is used to display a web page within a web page. Example <iframe src="demo_iframe.htm" width="200" height="200"></iframe> • An iframe can be used as the target frame for a link. • The target attribute of a link must refer to the name attribute of the iframe: Example <html> <body> <iframe src="demo_iframe.htm" name="iframe_a"></iframe> <p><a href="http://www.w3schools.com" target="iframe_a">W3Schools.com</a></p> <p><b>Note:</b> Because the target of the link matches the name of the iframe, the link will open in the iframe.</p> </body> </html> Attribute align Value left right top middle bottom Description Specifies the alignment of an <iframe> according to surrounding elements frameborder 1 0 Specifies whether or not to display a border around an <iframe> height pixels % Specifies the height of an <iframe> marginheight pixels Specifies the top and bottom margins of the content of an <iframe> marginwidth pixels Specifies the left and right margins of the content of an <iframe> name name Specifies the name of an <iframe> scrolling yes no auto Specifies whether or not to display scrollbars in an <iframe> src URL Specifies the address of the document to embed in the <iframe> width pixels % Specifies the width of an <iframe>
