CREATING WEB PAGE FORM

Faculty of Computer Science & Engineering

INTRODUCTION
Form is used: Email subscriptions Contest registrations Databases Autoresponders User identifications and passwords Feedback

<Form Method=(Post, Get) Action=script.url> input elements </Form>

Faculty Computer Science Engineering

INTRODUCTION
Method - Determines which http method will be used to send the form's information to the web server. GET - This method will append all of the information from a form on to the end of the URL being requested. POST - This method will transmit all of the information from a form immediately after the requested URL. This is the preferred method. Action - The URL of the form processing script that resides on the server. This script will process the form's information.
Faculty Computer Science Engineering

FORM ELEMENTS
Button Text boxes Hidde Password Checkbox Radio button Submit Image submit Reset

Faculty Computer Science Engineering

WORKING WITH INPUT BOXES

Textbox

Checkbox
Radio Textarea

Submit

Reset
Faculty Computer Science Engineering

WORKING WITH INPUT BOXES

The <INPUT> tag be used for several other types of fields on form. The general syntax of the <INPUT> tag is: <INPUT TYPE= option NAME= text> Option: is the type of input field. Text: is the name assigned to the input field. To use the <INPUT>tag for the many different kinds of form elements, you change the value of the TYPE property. The NAME property is required with with the <INPUT> tag.
Faculty Computer Science Engineering

WORKING WITH INPUT BOXES

Controlling the size of an Input Box By default, the browser made all of the input box in the form the same size 20 character wide. The syntax for changing the size of an input box is: <INPUT SIZE=value> Example: <Input name= Username size =30>

Faculty Computer Science Engineering

WORKING WITH INPUT BOXES

Setting the maximun length for Text Input: <INPUT MAXLENGTH=value> Value: is the maximum character number Setting a default value for an input box: <INPUT VALUE=value> Value: is the default text or number appear in the field.

Faculty Computer Science Engineering

WORKING WITH INPUT BOXES

Text fields <Input Type=Text Name=name size=n maxlength=n> Example: <form action=""> First name: <input type="text" name="firstname><br> Last name: <input type="text" name="lastname"> </form>
Faculty Computer Science Engineering

WORKING WITH INPUT BOXES

Password Field: <Input Type=password Name=name size=n maxlength=n> Example: <form> Username: <input type="text" name="user><br> Password: <input type="password" name="password"> </form>
Faculty Computer Science Engineering

WORKING WITH INPUT BOXES

Checkbox: <Input Type=Checkbox Name=Name Value=Value Checked> Label Checked - Default button or box selection Example: <form> <Input Type='Checkbox' Name='st' Value='nhac' Checked>Music<br> <Input Type='Checkbox' Name='st' Value='film> Film<br> <Input Type='Checkbox' Name='st' Value='thethao'> Sport

Faculty Computer Science Engineering

WORKING WITH INPUT BOXES

Radio button: <input type="radio" name="name value="Value" checked> Label <form> <input type='radio' name=use value=home>Home<br> <input type='radio' name=use value=bus>Business<br> <input type='radio' name=use value=gov>Government<br> <input type='radio' name=use value=ed>Educational Institution<br>
Faculty Computer Science Engineering

WORKING WITH INPUT BOXES

Faculty Computer Science Engineering

WORKING WITH INPUT BOXES

Submit Button <Input Type=Submit Value=Submit Message Name=Name> NAME - Name of the variable to be processed by the form processing script. VALUE - Specifies the text to be displayed on the submit button.

Faculty Computer Science Engineering

WORKING WITH INPUT BOXES

<form name="input" action="html_form_action.asp" method="get"> Type your first name: <input type="text" name="FirstName" value="Mickey" size="20"> <br>Type your last name: <input type="text" name="LastName" value="Mouse" size="20"> <br> <input type="submit" value="Submit"> </form>
Faculty Computer Science Engineering

WORKING WITH INPUT BOXES

Reset Button: Enables users to clear a form if necessary <Input Type=reset Value=Reset Message Name=Name> TYPE Reset VALUE - Specifies the text to be displayed on the reset button.

Faculty Computer Science Engineering

WORKING WITH INPUT BOXES

Image Field: Inline images can act like Submit buttons so that when the user clicks the image, the form is Submited. <Input Type=Image Value=Text SRC= URL Name=Text> NAME - Name of the variable to be processed by the form processing script. SRC - Image URL.

Faculty Computer Science Engineering

WORKING WITH INPUT BOXES

Button: Defines a clickable button (mostly used with a JavaScript to activate a script). <input type="button" name="Button" value="Button"> Example: <body> <form action=""> <input type="button" value="Click me" onclick="msg()" /> </form> </body>
Faculty Computer Science Engineering

WORKING WITH INPUT BOXES

Hidden: Used to send information to the form processing script that you don't want your visitors to see. Nothing will show through the browser.

<Input Type=Hidden Value=Text Name= Text>

NAME - Name of the variable to be processed by the form processing script. VALUE: The value of the hidden name expected by the form processing script.

Faculty Computer Science Engineering

SELECTION LIST
The <select> tag is used to create a select list (drop-down list). The <option> tags inside the select element define the available options in the list. <Select Name=Name Size=n Multiple> <Option Value=Value selected>Option 1 <Option Value=Value > Option 2 </Select>

Faculty Computer Science Engineering

SELECTION LIST
Select Attributes NAME - Name of the variable to be processed by the form processing script. SIZE - Specifies the number of visible selections. MULTIPLE - Enables users to select multiple selections. Option Attributes SELECTED - Specifies a default selection. VALUE - Specifies the value of the variable in the select element.
Faculty Computer Science Engineering

SELECTION LIST
Example: <body><form> <select Name=Product> <option value=1>ScanMaster <option value=3>ScanMaster II <option value=4>LaserPrint 1000 <option value=5> LaserPrint 5000 <option value=6>Print/scan 150 <option value=7> Print/scan 250 </Select> </form></body>

Faculty Computer Science Engineering

SELECTION LIST
<form> <select Name=Product size=5 Multiple> <option value=1>ScanMaster <option value=3>ScanMaster II <option value=4>LaserPrint 1000 <option value=5> LaserPrint 5000 <option value=6>Print/scan 150 <option value=7> Print/scan 250 </Select> </form>
Faculty Computer Science Engineering

SELECTION LIST
OPTGROUP: is used to group the elements in selection list <SELECT name= Text> <OPTGROUP> <OPTION value= value1>option1 <OPTION value= value2> option2 . </OPTGROUP> </SELECT>
Faculty Computer Science Engineering

SELECTION LIST
<SELECT name= course> <OPTGROUP> <OPTION value= Internetintro>Introduction to the Internet <OPTION value= Introhtml>Introduction to HTML <OPTION value= Introweb>Introduction to the web page designing </OPTGROUP> <OPTGROUP> <OPTION value= vbintro>Visual Basic An Introduction <OPTION value= vbdev>Visual Basic Application Development </OPTGROUP> </SELECT>
Faculty Computer Science Engineering

SELECTION LIST

optgroup

Faculty Computer Science Engineering

TEXTAREA
TextArea: is the Text box that user can input multi line. <TextArea Name=name Rows=n Cols=m Wrap>Default text </textarea> Textarea Attributes
NAME - Name of the variable to be processed by the form processing script. COLS - The number of columns within the text area. ROWS - The number of rows within the text area.

Wrap: virtual,physical
Faculty Computer Science Engineering

TEXTAREA
Example: <form> Comments ? <textarea rows=4 cols=50 name=comments> </textarea> </form>

Faculty Computer Science Engineering

FIELDSET
The <fieldset> Group related elements in a form. The <fieldset> tag draws a box around the related form elements. <Fieldset> <Legend Align=left, right>Ch thch </Legend> The elements in group </Fieldset> The <legend> tag defines a caption for the fieldset element.
Faculty Computer Science Engineering

FIELDSET
<FORM > <FIELDSET> <LEGEND>Position</LEGEND> Application for the post of: <INPUT name= 'name' type= 'text' tabindex= '1'> </FIELDSET> <FIELDSET> <LEGEND>Educational Qualifications</LEGEND> <INPUT name= 'qualif' type='radio' value= 'grad' tabindex= '5'> Graduate <INPUT name= 'qualif' type='radio' value='postgrad' tabindex='5'> Postgraduate </FIELDSET></FORM>
Faculty Computer Science Engineering

Faculty Computer

KEYBOARD ATTRIBUTES
Accesskey: Specifies a keyboard shortcut to access an element. Create: Accesskey= character. Used: Alt+ character Tabindex: Specifies the tab order of an element. Tabindex= number

Faculty Computer