Web Page Design Forms! Website Design

Objectives What forms can do The Attributes of the form tag Using Textboxes Textareas Checkboxes Radio buttons Select options Formatting Forms Cleanly

Competency Objectives Can use forms to 1.Send data via 2.Create basic form elements 3.Format forms properly 4.Send forms to server side program Competency Alert: You need to know this ! Common Problem Area! People seem to forget this

HTML Forms HTML Forms are used to: Gather survey information on web Submit passwords Structure queries on a database Submit orders

HTML Forms When submit a form it can be sent: to a script (program) on a web server for processing via to a valid address HTML Form Submit Program or database on Webserver (e.g., ecnu) Your machine Web Server

HTML Form Elements Text Box Radio Buttons Check Box Select Box Text Area Submit/Reset button

Objectives What forms can do The Attributes of the form tag Using Textboxes Textareas Checkboxes Radio buttons Select options Formatting Forms Cleanly

Starting and Ending Forms HTML forms are created by using the HTML and tags. Within these tags, you place various HTML form elements, such as text areas, check boxes, and radio buttons. For example,..  ---(Your FORM elements here). Competency Alert: You need to know this !

Two primary arguments <FORM ACTION=” METHOD=”POST”> get appends the form arguments to the end of the Web address. post sends the data as part of the body of the HTML document. Will use post since get method may limit the amount of data you can send. ACTION= - Specifies the URL of the receiving file/program to start when the form is submitted METHOD= - Defines the argument format that will be used to send data to the receiving program/file.

Some Form Tag Examples Send the results to a program: Send the results via Most sites don’t use address submission: The you get is a messy . Requires client (end-user) to have correct default defined Usually want more control, (e.g., send to multiple addresses or log to a file, or hide precise location of where goes) Look over internet for this program Sends results via to this address. Look in my current directory.

Form tag with mailto: attribute This form has the following form tag: Pre-addressed mail is created. Here with Mozilla (even though it is not set up properly on this computer.)

Tag elements within … Your Form Here (Checklists, Text Boxes, Drop-down lists, buttons, etc)

Objectives What forms can do The Attributes of the form tag Using Textboxes Textareas Checkboxes Radio buttons Select options Formatting Forms Cleanly Competency Alert: You need to know this !

Creating Text Boxes Text boxes are those input areas on a form where the customer can input free-format typing. Text Box

Text Box: Format Please Enter Your Full Name <Input Type="Text" SIZE=20 MAXLENGTH=30 Name="fullname"> Where Please Enter Your Full Name - is text to display immediately before the text box. Input Type - A keyword that says how input will come in. You can say "Text" - for text boxes with characters displayed in box as typed. "Passwd" - For text boxes with asterisks "*" displayed in box as typed. SIZE= Width of (in chars) the input box. MAXLENGTH= - The max number of characters the user can type into box. Name= The name identifier passed to the program. (E.g., name=“Zhou Hong" )

Text Box: Format Please Enter Your Full Name Where Name= The name identifier passed to the program. Note: If the above was sent via the mailto: attribute, the resulting would look like: fullname=Zhou+Hong

Text Box: Password Can also create a password text box that: Works like a text box except input is shown as asterisks, For example: ******* Note: Most sites do NOT use this mechanism to transmit password because: It transmits passwords in clear text over internet (anyone who can tap physical network can view it. Please Enter you password

Text Area: Format Just like text box but bigger. <textarea NAME="UNIT_COMMENTS" ROWS=4 COLS=70 >Your comments here Name= The name identifier passed to the action. (E.g., name=”UNIT_COMMENTS”) ROWS, COLS = Number of cols and rows of text box

Check Boxes Check boxes are pre-defined optional input that you check. Checkbox

Check Boxes: General Format Pick your favorite: Baseball Hockey Soccer Pick your favorite: - This is a string of characters the shows up before check box. input TYPE="checkbox" - Says create a checkbox within the form. NAME=“soccer" - a name (e.g., soccer) to the checkbox that will be passed to the software. VALUE=“Like soccer" - Specifies the initial value of the control (all set to “like soccer”) Note: you can include a checked attribute that checks the box initially.

Radio Buttons: General Format Radio Boxes – How is Web Site Design Going : I get my extra sleep in class. I get so confused I get lost trying to find my car after class. I gave up and copy my answers from my neighbor. Great class can't wait for the movie. Specifies to create a radio button Logical name is “variable1” Variable1 is “set” to “great” if this item is picked For radio buttons to cooperate together, must use same name.

Selection Lists Use tag to create scrolling and pull-down pick lists. Electric windows AM/FM Radio Turbo Charger name = the label shown from the mail. size =number of selections shown multiple = allow multiple options to pick option = the option to pick options selected = pre-selected option.

Submit Buttons Submit - (send the form) Can also reset Create a submit button Put this text on the button.

Objectives What forms can do The Attributes of the form tag Using Textboxes Textareas Checkboxes Radio buttons Select options Formatting Forms Cleanly

Putting it all together Survey Form Class Survey Name: Class: Class Evaluation: Great Average Fair Poor Comments: Common Problem Area! People seem to forget this

Cleaning it up with Tables Class Survey Name: Class Class Evaluation: Great Average Fair Poor Comments Competency Alert: You need to know this !

Sending Data to Scripts As previously mentioned can set up forms to send data to scripts: Need to know URL of script on webserver Need to coordinate webserver script with your form E.g.,if use then the receiving script must be looking for input variable in_name

Example form sending to script Forms Example Please pick a color... Red Blue Green Please provide your name Password Example <?php $color = $_POST['color']; $name = $_POST['yourname']; print " "; print "Hello, your name is $name "; print " "; ?> receiving.php set_color.html Name must match Note: for this example to work correctly both set_color.html and receiving.php must be in the same folder on the webserver.

Summary What forms can do The Attributes of the form tag Using Textboxes Textareas Checkboxes Radio buttons Select options Formatting Forms Cleanly

Hands-on Lab Create an HTML form that looks like the following: Use the mailto form attribute to mail the results to an address.

One possible solution form check Pick you favorite sports Team: Bears Cubs Sox Bulls Your Name

Hands On Lab 2 Create an HTML form that looks like the following: