Today - Forms! WD 2.7 - Students produce a basic HTML/XHTML document using forms. Find the group that best matches the part of the project you are going to work on for forms: You will need a piece of paper and a pencil/pen

Chapter 6 – Web Page Forms

Forms HTML controls how the form looks, it does not do the processing of the form…that is done by the server which is usually coded in: CGI Scripts (Common Gateway Interface) ASP C/C++ PHP Visual Basic We are just building the FORM, not coding the Server

Form Items Control Elements – different parts of form such as input boxes, buttons, text areas Field – where the user can enter information Field Value – the information that is entered Form Label – label around the field that is what the user sees… “First Name”…”Item Purchased”

Form Element Setting up the form <form name = “name” > <!—all of the code for your form goes here-> </form>

Input Boxes When data is sent to server it is sent as a name/value pair – name of field is paired with data the user entered <input type = “text” name=“name” /> size = “value” ----changes the width of the box on screen maxlength = “value” ----maximum length of characters user may enter in a text box value=“value” ----default value in text box

First Name <input type = “text” name=“fname” size=“30” />

Shows as * on screen, not secure Password Input Boxes Shows as * on screen, not secure <input type=“password”> ********

Selection Lists <select name=“name”> <option>first list item</option> <option>second list item</option> </select> If you want things to be in a group you… <optgroup label=“Name of Group”> <option>…</option> </optgroup>

<label for=“ordertype”>Order Type</label> <select name=“ordertype”> <option value=“carryout”>Carry Out</option> <option value=“delivery”>Delivery</option> <option value=“dinein”>Dine In</option> <option value=“take”>Take and Bake</option>

Items you can add to Selection Lists: optgroup --- allows you to group things in your Selection List size=“value” ---- changes # of items displayed in a box at a time multiple=“multiple” ---- user can select more than 1 value selected = “selected” ----default selection

Option Buttons / Radio Buttons Can only select 1 item from the list Same names, different ids and values! <fieldset> <legend>…..what goes around option buttons</legend> <input type=“radio” name=“name” value=“uniqueID”> Label <input type=“radio” name=“name” value=“uniqueID”> Label #2 </fieldset>

<label>Was your service friendly</label> <fieldset> <label for=“sYes”>Yes</label> <input type=“radio” name=“service” value=“yes”> <label for=“sNo”>No</label> <input type=“radio” name=“service” value=“no”> Value sent to server

Check Boxes Can select multiple values, not just 1 like in radio buttons <fieldset class="optionGroup"> <legend>How did you hear about us? (check all that apply)</legend> <input type="checkbox" name="radio" value="yes"/>Radio <input type="checkbox" name="tv" value="yes"/>TV <input type="checkbox" name="friend" value="yes"/>Friend </fieldset> Can add checked=“checked” to have a checked selection

Text Area Box <textarea name=“name” rows = “#” cols=“#”> text to show up as default </textarea>

Buttons Types of buttons Submit Button – submits a form to the server <input type = “submit” value=“Send Registration” /> Reset Button – resets the form to the default values <input type=“reset” value=“Cancel” /> Command Buttons – if you write script to do something when clicked, it doesn’t do anything on its own <input type=“button” value=“text to be displayed” />

Custom Buttons </button> Adding labels, pictures…. <button name=“name” value=“value” type=“type”> <img src=“….” /> Text </button> reset, submit, or button

File Buttons <input type=“file” name=“file_name” /> …the Browse button in a web page Browse

Form Attributes In Form Elements…. ….. methods: <form action =“url” method=“type” enctype=“type”> ….. </form> methods: get = default, appends the form data to the end of the URL specified in the action attribute post = sends form data in a separate data stream, most people use this method

Form Attributes <form action =“url” method=“type” enctype=“type”> …..</form> Enctype options: application/x-www-form-urlencoded the default format…data is transferred as a long text string and spaces and non-text characters are encoded multipart/form-data – used when sending files to a server, spaces and non-text characters are preserved text/plain – data is transferred as plain text with no encoding of spaces or non-text characters

Mailto Action If you want to send the information through an email and not to a server use: <form action=“mailto:email_address” method=“post” enctype=“text/plain”> </form>

Tab Order and Access Keys Tab Order – when you press tab, what order do you go in… <input name=“fname” tabindex=“2” /> if negative or 0 omitted from tab order Access Key – used with Alt to get to boxes quickly <inut name=“lname” accesskey=“l” />