CREATING WEB PAGE FORM

CREATING WEB PAGE FORMFaculty of Computer Science & Engineering

INTRODUCTIONForm is used:

Email subscriptions Contest registrations Databases Autoresponders User identifications and passwords Feedback

Faculty Computer Science Engineering

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

</Form>

INTRODUCTIONMethod - 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.


FORM ELEMENTSButton Text boxes HiddePasswordCheckboxRadio buttonSubmitImage submitReset


WORKING WITH INPUT BOXES


Textbox

Checkbox

Textarea

Reset

Radio

Submit

WORKING WITH INPUT BOXESThe <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.


WORKING WITH INPUT BOXESControlling 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>


WORKING WITH INPUT BOXESSetting 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.


WORKING WITH INPUT BOXESText 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>


WORKING WITH INPUT BOXESPassword 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>


WORKING WITH INPUT BOXESCheckbox:<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

</form>Faculty Computer Science Engineering

WORKING WITH INPUT BOXESRadio 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><input type='radio' name=use

value=other>Other<br></form>


WORKING WITH INPUT BOXES


WORKING WITH INPUT BOXESSubmit 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.


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 BOXESReset 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.


WORKING WITH INPUT BOXESImage 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”>


SRC - Image URL.


WORKING WITH INPUT BOXESButton: 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 BOXESHidden: 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.


SELECTION LISTThe <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>

SELECTION LISTSelect Attributes


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 LISTExample:<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>


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 LISTOPTGROUP: 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>


SELECTION LIST


optgroup

TEXTAREATextArea: is the Text box that user can input

multi line. <TextArea Name=”name” Rows=n Cols=m

Wrap>Default text </textarea>Textarea Attributes


COLS - The number of columns within the text area.

ROWS - The number of rows within the text area. Wrap: virtual,physical


TEXTAREAExample:<form>Comments ?

<textarea rows=4 cols=50 name=comments></textarea>

</form>


FIELDSETThe <fieldset> Group related elements in a

form.The <fieldset> tag draws a box around the

related form elements.<Fieldset>

<Legend Align=”left, right”>Chú thích</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



KEYBOARD ATTRIBUTESAccesskey: Specifies a keyboard shortcut to

access an element. Create: Accesskey= character. Used: Alt+ character

Tabindex: Specifies the tab order of an element.

Tabindex= number

Documents

CREATING WEB PAGE FORM