• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Web topic 20 1  html forms
 

Web topic 20 1 html forms

on

  • 1,001 views

 

Statistics

Views

Total Views
1,001
Views on SlideShare
1,001
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Web topic 20 1  html forms Web topic 20 1 html forms Presentation Transcript

    • Web Authoring Topic 20 Part 1- HTML Forms
    • ObjectivesStudents should able to:1. Identify and use the various form features: • Text boxes • Password boxes • Radio buttons • Check boxes • Text area • Menus
    • 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
    • FORM tagThe opening tag <FORM> and theclosing tag </FORM> define the enclosedsection of the document as an HTMLform.Common attributes: - ACTION - METHOD - NAME
    • 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>
    • <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>
    • <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| button value = “initial value to bedisplayed”>
    • 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.
    • 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.
    • 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.
    • 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.
    • Text area<TEXTAREA> creates multi-line text inputfields.< TEXTAREA name = “name” Rows = “number of rows” Cols = “number of columns”> Default text</ TEXTAREA >
    • <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
    • Sample for <select><select name = “name” size = “size number” multiple> <option [selected]>option 1 <option [selected]>option 2</select>
    • 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.