Web topic 20 2 html forms

Web topic 20 2 html forms

• 1.
  Web Authoring Topic 20 Part 2- HTML Forms
• 2.
  Objectives Students should ableto: 1. Identify and use the various form features: • Text boxes • Password boxes • Radio buttons • Check boxes • Text area • Menus
• 3.
  What a HTMLform? Interactive web pages that are able to gather user input. It contains special elements called controls (checkboxes, radio buttons, menus, etc.) Users generally "complete" a form by modifying its controls, before submitting the form to a server for processing
• 4.
  FORM tag The openingtag <FORM> and the closing tag </FORM> define the enclosed section of the document as an HTML form. Common attributes: - ACTION - METHOD - NAME
• 5.
  FORM Action <form action=addressof the server program for handling user input (CGI, JSP, ASP, Java Servlets) method=“post” | “get” name = “name of the form”> … </form>
• 6.
  <form> and <input>sample <form action=“mailto:[email protected]" method="post"> First name: <input type="text" id="firstname"><BR> Last name: <input type="text" id="lastname"><BR> <INPUT type="submit" value="Send"> </form>
• 7.
  <input> tag Input tagcreates the control in a HTML form. Common attributes of INPUT tag TYPE NAME VALUE SIZE
• 8.
  <input> tag <input name = “name” type = text | password | checkbox | radio | submit | reset | file | hidden | image | button value = “initial value to be displayed”>
• 9.
  Control Types <input>tag Type: This attribute determines the nature of the input control. The possible choices are: - button: Displays a button. With this input type the value attribute must be specified. - checkbox: Displays a checkbox. - file:Displays an textbox with a button adjacent to it. The default button caption depends on the host browser. Clicking on the button causes a file selector dialog to be displayed.
• 10.
  Control Types <input>tag The possible choices are: - hidden: Creates an invisible control. A typical use for this would be to uniquely identify a user when cookies have been disabled on the web browser. - image: Displays a clickable image which acts like a submit button. The mouse coordinates where the click occurred are shipped back to the server along with other form data.
• 11.
  Control Types <input>tag The possible choices are: - password: Displays an edit box in which the characters typed in by the user are replaced by a placeholder - * in Firefox and Opera and • in IE. - radio: Displays a radio button. - reset: Clicking on this button input causes all the form controls to be reset to their initial state.
• 12.
  Control Types <input>tag The possible choices are: - submit: When this button input is clicked the form data are shipped back to the URL defined in the form action attribute. - text: Displays a textbox.
• 13.
  Text area <TEXTAREA> createsmulti-line text input fields. < TEXTAREA name = “name” Rows = “number of rows” Cols = “number of columns” > Default text </ TEXTAREA >
• 14.
  <select> and <option>tag It’s a drop down menu. SELECT tag produces a pull-down or scrollable option menu OPTION tag creates the menu items for SELECT tag
• 15.
  Sample for <select> <select name = “name” size = “size number” multiple> <option [selected]>option 1 <option [selected]>option 2 </select>
• 16.
  Submit The submit inputtype defines a button for submitting the form. The presence of the NAME attribute will cause the browser to send a name/value pair for the submit button if it is used to submit the form. This allows authors to provide multiple submit buttons.