Web topic 20 2 html forms


Published on

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Web topic 20 2 html forms

  1. 1. Web Authoring Topic 20 Part 2- HTML Forms
  2. 2. ObjectivesStudents should able to:1. Identify and use the various form features: • Text boxes • Password boxes • Radio buttons • Check boxes • Text area • Menus
  3. 3. What a HTML form?Interactive web pages that are able togather user input.It contains special elements calledcontrols (checkboxes, radio buttons,menus, etc.)Users generally "complete" a form bymodifying its controls, before submittingthe form to a server for processing
  4. 4. FORM tagThe opening tag <FORM> and theclosing tag </FORM> define the enclosedsection of the document as an HTMLform.Common attributes: - ACTION - METHOD - NAME
  5. 5. FORM Action<form action=address of the server program forhandling user input (CGI, JSP, ASP, JavaServlets) method=“post” | “get” name = “name of the form”>…</form>
  6. 6. <form> and <input> sample<form action=“mailto:webmaster@ite.edu.sg"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. 7. <input> tagInput tag creates the control in a HTMLform.Common attributes of INPUT tag TYPE NAME VALUE SIZE
  8. 8. <input> tag<input name = “name” type = text | password | checkbox |radio | submit | reset | file | hidden | image| button value = “initial value to bedisplayed”>
  9. 9. Control Types <input> tagType: This attribute determines the natureof 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. 10. Control Types <input> tagThe 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. 11. Control Types <input> tagThe 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. 12. Control Types <input> tagThe 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. 13. Text area<TEXTAREA> creates multi-line text inputfields.< TEXTAREA name = “name” Rows = “number of rows” Cols = “number of columns”> Default text</ TEXTAREA >
  14. 14. <select> and <option> tagIt’s a drop down menu.SELECT tag produces a pull-down orscrollable option menuOPTION tag creates the menu items forSELECT tag
  15. 15. Sample for <select><select name = “name” size = “size number” multiple> <option [selected]>option 1 <option [selected]>option 2</select>
  16. 16. SubmitThe submit input type defines a button forsubmitting the form.The presence of the NAME attribute willcause the browser to send a name/value pairfor the submit button if it is used to submitthe form.This allows authors to provide multiplesubmit buttons.