1 / 32

Web Development Basics: Framesets and Form Elements

Learn about creating framesets with multiple columns, rows, and different web form elements like checkboxes, radio buttons, file uploads, hidden fields, images, and reset buttons. Understand how to use forms to submit data via CGI programs or email.

johnjbrown
Download Presentation

Web Development Basics: Framesets and Form Elements

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 2004-2005 Academic Year, Spring SemesterBilkent University - Faculty of Art, Design and ArchitectureDepartment of Communication and DesignCS 153 Introduction to Computing ILesson 8

  2. Review of Last Week • Open notepad or TryIt. • Create a frameset that has • First column 300 pixels wide. Address http://www.yahoo.com • Second column *. Address http://www.bilkent.edu.tr

  3. <frameset cols="300,*"> <frame src="http://www.yahoo.com"> <frame src="http://www.bilkent.edu.tr"> </frameset>

  4. Review of Last Week • Open notepad or TryIt. • Create a frameset that has • First row 250 pixels long. Address http://www.yahoo.com • Second row *. Address http://www.bilkent.edu.tr

  5. <frameset rows="250,*"> <frame src="http://www.yahoo.com"> <frame src="http://www.bilkent.edu.tr"> </frameset>

  6. Review of Last Week • Open notepad or TryIt. • Create a frameset that has • First Column 250 pixels wide. Address http://www.yahoo.com • Second Column 250 pixels wide. Address http://www.altavista.com • Third Column is * wide. This column has 2 rows: • First row is 250 pixels long. Address: http://www.webcrawler.com • Second row is * pixels long. Address: http://www.google.com

  7. <frameset cols="250,250,*"> <frame src="http://www.yahoo.com"> <frame src="http://www.altavista.com"> <frameset rows="250,*"> <frame src="http://www.webcrawler.com"> <frame src="http://www.google.com"> </frameset> </frameset>

  8. Forms • Forms allows you to submit data taken from user. • The destination that you submit your data would be CGI (Common Gateway Interface) programs that are at the Web, or e-mail. • In order to use e-mail option, client’s e-mail program should be setted-up correctly.

  9. Forms • A form should be inside <form> tag. <form action=action base method=method enctype=media type> ... </form> • Parameters: • ACTION, Specifies the URL of the application that will process the form.(required) • METHOD, Specifies the parameter-passing style, either get or post.(required) • ENCTYPE, Encoding Type Specifies how the form element values will be encoded either • “application/x-www-form-urlencoded” or • “multipart/form-data”. <FORM METHOD=POST ACTION="mailto:muhsin@hotmail.com" ENCTYPE="application/x-www-form-urlencoded"> ... </FORM>

  10. INPUT Tag • Input has several different form elements controlled by type attribute.

  11. Checkbox <input type=checkboxcheckedname=groupname value=mozerella> data to display • With Checkbox and RadioButton you can group them in order to have a logical selection. • Checkbox, Creates checkbox input element. • Checked, Marks the element as initially checked. • Name, Name of the parameter.(required) • Value, Value of the parameter.(required) <input type=checkbox name=items value=mozerella> Extra Mozerella Cheese

  12. Radio Button <input type=radiocheckedname=groupname value=bigcoke> • Radio, Creates a radio button input element.(Single selection in a group is possible) • Checked, Mark the element as initially selected. • Name, Name of the parameter.(required) • Value, Value of the parameter.(required) <input type=radio checked name=cokeselection value=bigcoke> Big Coke <input type=radio checked name=cokeselection value=mediumcoke>Medium Coke <input type=radio checked name=cokeselection value=smallcoke> Small Coke

  13. File <input type=filemaxlength=30 name=groupname size=10> • Allows you to pick a file from your disk • File, Creates a file selection element. • Maxlength, Specifies the maximum number of characters to accept. • Name, Name of the parameter.(required) • Size, Number of characters to display. <input type=file maxlength=30 name=filename size=10>

  14. Hidden Field • <input type=hiddenmaxlength=30 name=fieldname size=10 value=fromwebsite> • Hidden, Creates hidden element.(Names the form) • Maxlength, Specifies the maximum number of characters to accept. • Name, Name of the parameter.(required) • Size, Number of character to display. • Value, Specifies the value of this element. • <input type=hidden maxlength=30 name=fieldname size=10 value=fromwebsite>

  15. Image <input type=imagealign=top/middle/bottom name=groupname src=logo.gif> • Image, Create an image input element. (Works also as a submit button; Sends x,y coordinate of the clicked point.) • Align, Align the image to either the top, middle, or bootom of the form. • Name, Name of the parameter.(required) • Src, URL of the image.(required) <input type=image align=middle name=groupname src=logo.gif>

  16. Reset Button <input type=resetvalue=clickheretoerase> • Reset button clears the form • Reset, Creates reset button. • Value, Alternate label for reset button. <input type=reset value="Click Here to Erase">

  17. Submit button <input type=submitname=submit value=clickheretosendinfo> • Sends the entered information • Submit, Creates submit button. • Name, Nameof the parameter.(required) • Value, Alternate label for the submit button. <input type=submit name=groupname value="Click Here to Send Information">

  18. Text field <input type=textmaxlength=50 name=fieldname size=10 value=defaultvalue> • Text, Creates text input element. • Maxlength, Specifies maximum number of character to accept. • Name, Name of the parameter.(required) • Size, Number of characters to display. • Value, Initial value for the element. <input type=text maxlength=50 name=groupname size=30 value=defaultvalue>

  19. Textarea tag <textarea cols=40 rows=5 name=fieldname wrap=off>the information here will be displayed as initial/default information.</textarea> Used to define multiline text area. • Cols, Number of column to display • Rows, Number of row to display • Name, Defines the name for text area.(required) • Wrap, The values are OFF, VIRTUAL, PHYSICAL • OFF, No word wrapping • VIRTUAL, Just display wrapping but don't send it. • PHYSICAL, Display and send the word wrapping.

  20. Select Tag <select multiplename=selectname size=value>    <option>    <option></select> • Define a multiple-choice menu or scrolling list. • Multiple, If appears, then user can select more than 1 option. • Name, Defines name for the selected option.(required) • Size, number of items to display in pull-down menu. If value is 1 then it changes into pull-down menu, If the number is more than 1 then it changes into scrolling list.

  21. Option Tag <option selectedvalue=newvalue> ... </option> • Defines options in SELECT tag. • Selected, Makes the item initially selected. • Value, Send this value(instead of displayed value).

  22. Select Example • <select name=cars size=1>   <option selected> No Car </option>   <option> Mazda </option>   <option> Mercedes </option>   <option> Renault </option>   <option> Subaru </option>   <option> Opel </option>   <option> Honda </option>   <option> Suzuki </option>   <option value=tofas> Fiat </option>   <option> Ford </option></select>

  23. Project %25 • A simple shopping site. • You will need a image map program. (for example mapedit, or any other you may find at the internet.) install it and learn it. • 3 types of pages: • Frames page • Top page • Products page

  24. Homework • Frames page • 2 rows: 100, and rest of the space • With no spacing between frames • With no frame borders • Frame names • top: top.html • mainFrame: cd.html

  25. Homework • top.html: • Has only an image with image map. (title.gif) • 3 rectangles at CD, DVD and FLOPPY pointing to cd.html, dvd.html, floppy.html will open at bottom frame.

  26. Homework • Product pages • All has the same structure. • cd.html dvd.html floppy.html • It has a form • method=post ACTION="mailto:ussakli@bilkent.edu.tr" ENCTYPE="application/x-www-form-urlencoded" • A big table that has 2 columns, and same number of rows that products have • Left cell has the product image • Right cell has • a product name in bold followed by short description and • details (in a new line) and • another 2x2 table that shows • the price and total price including VAT • A text box that allows only 3 characters to be entered, with a name equals to the product name. • Submit button just after the big table.

  27. Homework Sample product page, the tables are dashed in order to allow you to see them. Normally there are no table borders.

  28. Homework

  29. Homework

  30. Homework When we click on “Satın Al” an e-mail will be sent to ussakli@bilkent.edu.tr with the correct data. Test it with your own e-mail.

  31. FAQ • The Turkish text on your web page is not looking correct? • Try adding • <META http-equiv=Content-Type content="text/html; charset=iso-8859-9"> • to <head>...</head> • All images are available at http://www.bilkent.edu.tr/~ussakli/web2.zip

  32. EOL

More Related