Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Web Authoring    Topic 20     Part 1-  HTML Forms
ObjectivesStudents should able to:1.   Identify and use the various form     features:       •   Text boxes       •   Pass...
What a HTML form?Interactive web pages that are able togather user input.It contains special elements calledcontrols (chec...
FORM tagThe opening tag <FORM> and theclosing tag </FORM> define the enclosedsection of the document as an HTMLform.Common...
FORM Action<form action=address of the server program forhandling user input (CGI, JSP, ASP, JavaServlets)    method=“post...
<form> and <input> sample<form action=“mailto:webmaster@ite.edu.sg"method="post">      First name: <input type="text"id="f...
<input> tagInput tag creates the control in a HTMLform.Common attributes of INPUT tag  TYPE  NAME  VALUE  SIZE
<input> tag<input    name = “name”     type = text | password | checkbox |radio | submit | reset | file | hidden | image| ...
Control Types <input> tagType: This attribute determines the natureof the input control.The possible choices are:  - butto...
Control Types <input> tagThe possible choices are:  - hidden: Creates an invisible control.  A typical use for this would ...
Control Types <input> tagThe possible choices are:  - password: Displays an edit box in which the  characters typed in by ...
Control Types <input> tagThe possible choices are:  - submit: When this button input is clicked the  form data are shipped...
Text area<TEXTAREA> creates multi-line text inputfields.< TEXTAREA        name = “name”        Rows = “number of rows”    ...
<select> and <option> tagIt’s a drop down menu.SELECT tag produces a pull-down orscrollable option menuOPTION tag creates ...
Sample for <select><select    name = “name”    size = “size number”    multiple>    <option [selected]>option 1    <option...
SubmitThe submit input type defines a button forsubmitting the form.The presence of the NAME attribute willcause the brows...
Upcoming SlideShare
Loading in …5
×
Upcoming SlideShare
Web topic 22 validation on web forms
Next
Download to read offline and view in fullscreen.

0

Share

Download to read offline

Web topic 20 1 html forms

Download to read offline

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

Web topic 20 1 html forms

  1. 1. Web Authoring Topic 20 Part 1- 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.

Views

Total views

1,524

On Slideshare

0

From embeds

0

Number of embeds

1

Actions

Downloads

10

Shares

0

Comments

0

Likes

0

×