Web topic 20 1 html forms

Uploaded on


More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. Web Authoring Topic 20 Part 1- HTML Forms
  • 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. 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. FORM tagThe opening tag <FORM> and theclosing tag </FORM> define the enclosedsection of the document as an HTMLform.Common attributes: - ACTION - METHOD - NAME
  • 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. <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. <input> tagInput tag creates the control in a HTMLform.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 bedisplayed”>
  • 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. 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. 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. 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. Text area<TEXTAREA> creates multi-line text inputfields.< TEXTAREA name = “name” Rows = “number of rows” Cols = “number of columns”> Default text</ TEXTAREA >
  • 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. Sample for <select><select name = “name” size = “size number” multiple> <option [selected]>option 1 <option [selected]>option 2</select>
  • 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.