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:email@example.com"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.