HTML Forms

Methods HTML Forms POST GET Javascript

Destinations Server CGI (server program) Server Page (PHP, JSP) XML over http (”AJAX”) (javascript) Client Side User input to javascript Send messages to javascript on other page

HTML <form> Tag Designates a form within an HTML and XHTML documents and contains all text and tags that make up the form Multiple forms can be included in a document Forms cannot be nested (put inside each other)

<form> attributes Value action URL to where the form data will be submitted. if blank, it sends to the current page method How data is sent: GET or POST enctype Encoding Type; the format of the data. Default= application/x-www-form-urlencoded target Anchor target (windows / frames) same as <a>’s target name Name of form (can be used to refer to form in javascript.) id Optional: for CSS or javascript URL/URI could be javascript:your_function(…) 1 other enctype which is multipart which you can look up if you need it-- it allows FILE uploads.

Form Elements <input> Used to create input fields: text, password, simple button, checkbox, radio button, file upload <select> Displays choices in a drop-down menu or scrolling list known as a selection list <textarea> Used to create a text box in which users can enter multiple lines of text <button> Creates a button with content (e.g., an image)

<input>

<Input> Fields <input> tag is used to create input fields that use different types of interface elements to gather information Attributes characterize the input field Old tried and true method Breaks normal convention of HTML tags doing a single thing

<input> attributes Value align discouraged - alignment like <img>: absbottom, absmiddle, baseline, bottom, left, middle, right, texttop, top checked Check box or radio button defaults to selected maxlength Maximum letters that can be entered name This name is set with the value when you submit size # of characters can be visibly seen on the screen src URL for an image (in special cases) type TYPE of input: text, password, radio, checkbox, reset, submit, button, image, hidden value default value

Accessibility accesskey=”key” form elements(tags) all support it tabindex=”###” tab moves thru fields and this determines the order starts at 1 All form tags support these

Input Fields Example

<form action=”mailto:jbussjae@wind. winona. msus. edu <form action=”mailto:jbussjae@wind.winona.msus.edu?subject=RAHSFORM" enctype="text/plain" name=“exampleForm”> Name<br /> <input type=“text” name=“name” value=“The White House” size=50><br /> Address<br /> <input type=“text” name=“address” value=“1600 Pennsylvania Ave.” size=50><br /> City, State, Zip<br /> <input type=“text” name=“city” value=“Washington” size=38> <input type=“text” name=“state” value=“DC” size=2 maxlength=2> <input type=“text” name=“zip” value=“20500” size=5 maxlength=5> </form>

Password Boxes An <input> tag with type = password Each character the user types in the text field shows up as an asterisk (*) to hide it from onlookers Can include other attributes NAME, VALUE, MAXLENGTH and SIZE

Check Boxes An <input> tag with type = checkbox Used to create a box that can be set to yes (checked) or no (unchecked) Can specify default state using CHECKED attribute; unchecked box information not sent Only name=value pair from checked boxes is submitted with form data Can be grouped (although not mutually exclusively)

example <p> <input type="checkbox" name="checkboxOne" value="1"> one</p><p> <input type="checkbox" name="checkboxTwo" value="2"> two</p><p> <input type="checkbox" name="checkboxThree" value="3" checked="checked"> three</p>

Radio Buttons An <input> tag with type = radio Used to create a group of buttons from which only one button can be selected Mutually exclusive Can specify a default value using the CHECKED attribute Only one name=value pair is submitted with form data All buttons in group have same name attribute

example <p> <input type="radio" name="radiogroup" value="1"> one</p><p> <input type="radio" name="radiogroup" value="2"> two</p><p> <input type="radio" name="radiogroup" value="3" checked> three</p>

Reset Buttons An <input> tag with type = reset Clears all form entries and resets each form element to its initial value specified by the VALUE attribute Default label (Reset) appears if the VALUE attribute is not included

Submit Buttons An <input> tag with type = submit Submits the form to a CGI script on a server OR it can have the browser send the form data to an email address Default label (Submit Query) appears if the VALUE attribute is not included

Image Submit Buttons An <input> tag with type = image Displays a graphical image and submits the form to a CGI script on a server Use SRC attribute to specify image to be displayed on the button <input type="image" name="test" alt="Submit" src="test.gif">

Command Buttons An <input> tag with type = button Use an onclick event handler to execute JavaScript code that performs some type of function (e.g., a calculation) Default value set with the VALUE attribute is transmitted along with the form data when submitted The old way to do a button; works everywhere. Buttons are text and drawn by the browser Note- older validators complain if you do not have a form tag around these- but newer HTML often ignores this and it is ok to do so (since there is no form to send because each item is handled by javascript)

File Upload There is only 1 way to submit binary data & files type=”file” accept=”text/html, text/plain” MIME types (standard for file types) browsers largely ignore this completely requires form enctype be changed to multipart LOOK IT up if you need this; you will have to do somethings different on the server. Note: online progress bars are faked with server and javascript/AJAX. fancy sites use Flash instead.

<textarea>

Multiline Text Fields <textarea> tag is used to create a field in which users can enter multiple lines of information specify the size: cols=”80” characters rows=”3” lines of text AKA: Multiline text fields or Text Areas

<select>

Selection List Creates a selection list that presents users with fixed lists of values from which to choose Can appear as: List of choices Drop-down menu Can also have a scroll bar

<select> Attributes Value multiple Allows multiple items to be selected if used: multiple=”multiple” name Name for the data when submitted size # of lines to display 1 is a menu >=2 is a drop down list

Example <select name="selectName" size="1"><option value="one">first</option><option value="two">second</option><option value="three">third</option></select> <p></p> <select name="selectName" size="4" multiple=”multiple”> <option value="one">first</option> <option value="two">second</option> <option value="three">third</option></select>

<option> Attributes Value label Alternate text to display (as opposed to what is in-between its tags) selected Default option selected value The value that gets submitted (yes, what you choose in the menu and the value that is sent are totally different!)

<optiongroup> Allows you to group <options> label = “name of group” no name just ends up blank, like a menu divider

<button>

<button> tag <button type=“submit”> Identical in function to <input type = “submit” Allows greater flexibility with button text: html (text + images) is allowed in the button label the “NEW” way to do a button really old browsers will not recognize it

Example <button name="buttonName" type="button" value=”whocares”> Button <img src="something.png" alt="image"> Text </button> <!-- button type can also be “reset” or “submit” -->

Label

<label> for= attribute ID of the form tag the label is for <label for=“someID”> text other html tags …</label> <input id=”someID” … /> ALTERNATE (popular method) <label>text <input ... /></label> 2 ways- the easy popular way only works if you can place the input inside the label tag. often this can not be done-- for example, you have a nicely formatted form with aligned fields and labels in a table-- to jump between columns in the table you use FOR and ID because it is impossible in that situation to have a <label> reach between columns in the table.

Fieldset

<fieldset> Places a box around the group form elements No attributes! just place form elements inside it CSS attributes still can be used

<legend> Label the fieldset using <legend> no attributes needed must be contained INSIDE the <fieldset> your labeling Recommend it that its the 1st element inside the <fieldset>

HTML 5 - future input supports more types date-time, date, month, week, time number email url regular expression tag attribute!!!

XFORM - past? XML format that does forms - not used on the web Complex and split into two parts Data Model Form Model Form fields are abstracted away from literal GUI widgets of today, given the attributes the browser decides what widget fits best This is one of the main reasons XHTML 2 died before getting off the ground-- it made you use this to do any forms on a webpage! the format is more complex than HTML itself!