CREATING WEB PAGE FORM
description
Transcript of 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.
Faculty Computer Science Engineering
FORM ELEMENTSButton Text boxes HiddePasswordCheckboxRadio buttonSubmitImage submitReset
Faculty Computer Science Engineering
WORKING WITH INPUT BOXES
Faculty Computer Science Engineering
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.
Faculty Computer Science Engineering
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>
Faculty Computer Science Engineering
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.
Faculty Computer Science Engineering
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>
Faculty Computer Science Engineering
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>
Faculty Computer Science Engineering
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>
Faculty Computer Science Engineering
WORKING WITH INPUT BOXES
Faculty Computer Science Engineering
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.
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 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.
Faculty Computer Science Engineering
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”>
NAME - Name of the variable to be processed by the form processing script.
SRC - Image URL.
Faculty Computer Science Engineering
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.
Faculty Computer Science Engineering
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.
Faculty Computer Science Engineering
<Select Name=”Name” Size=n Multiple><Option Value=”Value” selected>Option 1<Option Value=”Value” > Option 2…
</Select>
SELECTION LISTSelect 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 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>
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 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>
Faculty Computer Science Engineering
SELECTION LIST
Faculty Computer Science Engineering
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
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
TEXTAREAExample:<form>Comments ?
<textarea rows=4 cols=50 name=comments></textarea>
</form>
Faculty Computer Science Engineering
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
Faculty Computer Science Engineering
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