+ FORMS

HTML forms are used to pass data to a server.

<form></form> begins and ends a form

Forms are made up of input elements <input type="text" name="firstname" />

Every input element has a name and value

name = reflects the information you are collecting from the visitorname=“email”

value = what the visitor types insarah@gmail.com

+ FORMS

when a visitor fills out a form field and hits the submit button, the browser transmits each form element as a name/value pair:

email=sarah@gmail.com

this info is passed to the server to be processed by a server side script (usually by PHP, Java or Perl)

don’t need to know (much) PHP/Java/Perl to create a form

+ FORMS | INPUT TYPES

text field:

password:

text area:

radio-buttons:

checkbox:

select menu:

submit button:

+ FORMS | OPENING TAG

Action: determines which page on the server holds the code that will process the form

Method: determines how the data is passed to the server

post: causes it to be passed invisibly in the http header

get: causes it to be passed in the URL string

+ FORMS | INPUT TAG MAKE-UP

• Label tag <label></label> : pairs a label with an input ID using for=“...”

• type=“text”: the input element for single line of text

• id=“user_name” : associates the input with appropriate label

• name=“user_name” : used as the name part of the name/value pair

• size=“18” : determines how much text is visible, and therefore the width of the box

• maxlength=“36” : determines the maximum number of characters can be entered

• tabindex=“1” : determines the tabbing order when navigated by user keyboard

+ FORMS | PASSWORD & DESCRIPTION

• type=“password”: the input element for a password

Single line field

User-typed text appears on-screen as row of dots

+ FORMS | PASSWORD & DESCRIPTION

• textarea: multi-line text field

• <textarea></textarea> (rather than input type)

• Rows and cols define height and width by characters (overflow scrolls automatically)

+ FORMS | RADIO BUTTONS

• type=“radio”: the input element for a radio button

• User can only pick one

• Group of radio buttons has same name (radioset), different values (Choice_1, Choice_2)

• Checked attribute allows you to make a button pre-selected

+ FORMS | CHECKBOX

• type=“checkbox”: the input element for a check box

• User can pick multiple options• Group of checkboxes has same name (checkset), different values (1,2,3)

+ FORMS | SELECT

• select tag: the input element for a drop down menu (rather than input)

• option tags specify the drop down options

+ FORMS | SUBMIT

• type=“submit”: the input element for a submit button

• value attribute determines text that appears inside button

• can also use your own image instead of default button <input type=“image” name=“submit” value=“images/submit.gif” />

• Closing form tag to end the form

+ FORMS | PROCESSING PHP

Sending a form’s results to email:• create a .php file in Dreamweaver• save it as the name used in action=“” at start of form

direct page to … once form is submitted

email results to …

+ FORMS | PROCESSING PHP

Wufoo.com

• Pre-built forms with data storing systems

• Excellent for use with storing and organizing form data

• Free for use with 3 forms, 100 entries/month

• Customizable CSS