1 / 17

Introduction to Creating Web Page Forms: A Practical Workshop

Join us for a workshop on creating effective web page forms! This session will cover essential concepts such as form definitions, tags, and practical examples. You will learn how to gather feedback, collect visitor information, and even sell products using forms. Key components like input controls and submission mechanisms will be explained in detail. Don't forget our test next week on tables and forms! Please register at www.bliinkcontest.com with referral code "greenillinois". Looking forward to seeing you there!

tamara-rodriquez
Download Presentation

Introduction to Creating Web Page Forms: A Practical Workshop

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. Creating Forms 101! December 2, 2009

  2. For Today: • Look at Forms! • Definition • Tags • Example Program • Lunch Room Project • Test next week on Tables and Forms!Maybe Wednesday???? • Don’t forget to register at www.bliinkcontest.com. Referral code is greenillinois • Tomorrow – Speaker for 6th – Ms. Shavetta Johnson regarding Security Issues on the Internet! Please be on time!!!!

  3. Creating Web Page Forms • When forms are included on a Web page, the page can be used for more than information sending; it can be used for information gathering! • Use a form to interact with your web page visitor including: • Get feedback about the Web page or other areas of interest • Find out who is visiting the Web page • Sell products or services • Act as a guestbook

  4. Three main componets • Input controls • A <FORM> tag (which contains the information necessary to process the form) • A submit button (which sends the data to be processed)

  5. Input Controls • Are any type of input mechanism on a form! • There are two types – data input control and text input control. • Data examples: • Radio button • Check box • Submit button • Reset button • Selection menu (drop-down) • Text examples: • Text field • Textarea field • Password text field

  6. Form Tags

  7. More tags

  8. Example Web Page! • We will be using the following options: • Text Field • Select Menu • Radio buttons • Checkboxes • Submit and reset buttons

  9. Let’s get started. • Open Notepad. • Enter your initial tags. Do you remember them? If not, here they are: <HTML> <TITLE> Example of a simple form</TITLE> <BODY> </BODY> </HTML>

  10. Let’s enter form tags: • Insert the following between your body tags! Example of using Radio buttons, text fields, pull down menu or selection menu, and checkboxes on a form! <br> Don't forget your submit buttons and reset buttons! <br>

  11. Enter your form tags: <FORM> Enter your first name <INPUT TYPE = “TEXT” SIZE=”25”> <BR> Enter your last name: <INPUT TYPE = “TEXT” SIZE =”25”> <P>

  12. <SELECT> <OPTION SELECTED> Pick your favorite team from the list: <OPTION>Chicago Bulls <OPTION>Utah Jazz <OPTION>Los Angeles Lakers <OPTION>Indiana Pacers <OPTION>Phoenix Suns <OPTION>New Jersey Nets </SELECT>

  13. <P> The best place to eat is: <BR> <INPUT TYPE="RADIO" NAME="BEST"> Wendy’s<BR> <INPUT TYPE="RADIO" NAME="BEST"> McDonald’s<BR> <INPUT TYPE="RADIO" NAME="BEST"> Taco Bell<BR> <INPUT TYPE="RADIO" NAME="BEST"> Burger King<BR> <INPUT TYPE="RADIO" NAME="BEST"> Kentucky Fried Chicken<BR> <P>

  14. I like to eat: <BR> <INPUT TYPE="CHECKBOX">Hamburgers<BR> <INPUT TYPE="CHECKBOX">Tacos<BR> <INPUT TYPE="CHECKBOX">Chicken Strips<BR> <INPUT TYPE="CHECKBOX">Fries<BR> <INPUT TYPE="CHECKBOX">Hot Dogs<BR> <P>

  15. <P><INPUT TYPE="submit" VALUE="Submit the Form"> <INPUT TYPE="reset" VALUE="Reset the Form"> <P>Thank you for your input. </P> </FORM> <HR> </body> </html>

  16. Save as Simpleform.html • Open in Internet Explorer for credit! _________________________________________________ Today’s Assignment: • Finish your worksheet #1. You have a project to work on. • Worksheet #2. Test Next week-Wednesday? • Tomorrow we have a speaker – don’t be late! • Monday we will have a visitor! Be on your best behavior! No games, etc. Please.... • I need help with Prosser’s Website...Who is ready to help? Come and see me. First assignment is taking pictures and setting up clubs.

More Related