Date post: | 21-Jan-2016 |
Category: |
Documents |
Upload: | aubrey-golden |
View: | 217 times |
Download: | 0 times |
+ 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 [email protected]
+ 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:
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