Scribd
Upload
0 views

Chapter03 HTML Forms

The document provides an overview of HTML forms, detailing the structure and key attributes such as ACTION and METHOD for form submission. It explains various input types, including text fields, passwords, radio buttons, checkboxes, and dropdown menus, along with their attributes and usage examples. Additionally, it covers form processing and the flow of information from user input to server handling.

Uploaded by

abadhan_sabyasachi
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
0 views

Chapter03 HTML Forms

The document provides an overview of HTML forms, detailing the structure and key attributes such as ACTION and METHOD for form submission. It explains various input types, including text fields, passwords, radio buttons, checkboxes, and dropdown menus, along with their attributes and usage examples. Additionally, it covers form processing and the flow of information from user input to server handling.

Uploaded by

abadhan_sabyasachi
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 18

HTML FORMS

Forms
• The FORM element is used to create a data input form.
• A Form is an area that can contain Form
Control/Elements.
• A region using forms is enclosed within the <FORM>
</FORM> tags.
• A form usually contains a Submit button to send the
information in the form elements to the server
• The FORM element has two important attributes:
– ACTION
– METHOD.
Form Processing

HTML
Form
B Data from
Input
r Form
Data from Form
o Web
User Form Processing
w Server Program
s HTML
(CGI)
Output e Document Data
Flow
r HTML
Document
Database
Management
System

Flow of Information for Forms


Forms
• ACTION:
– Specifies the destination URL to which the form
should be submitted, once it has been completed
by the user.
– If no URL is specified, the URL of the current
document containing the form is used.
– MAILTO Action: The data from the form is
mailed to the specified E-mail address.
Forms
• METHOD:
– Specifies the way in which the data from the user are
sent to the server.
– Forms should use METHOD=“GET” when the form
doesn’t modify anything on the server
• Example : A search engine Query
• Database search
– Forms should use METHOD=“POST” when the form
changes the state of the server or sends large amounts
of data
• Example : Entering a message on a forum
• Uploading a file
Form Tag

<Form Action=“getemp.asp” Method=“post”>

(all form elements inside)

</Form>
Forms
• Form Input: INPUT
– Only used within a FORM element and is denoted by
<INPUT>.
– Attributes:
• TYPE: Defines the type of data used in the field.
• VALUE: Contain the initial value displayed to users.
• NAME: The name of the particular element.
• MAXLENGTH: The maximum number of characters that can be
entered by users in a text field.
• SIZE: Specifies the size of the field and depends on its type.
• SRC: Denote URL for an image.
• CHECKED: Indicates that a checkbox or radio button is selected.
• DISABLED: Prevents the field from receiving focus.
• ALIGN: Alignment if image is used.
• READONLY: Prevents modification of the contents of the field.
TYPE Attribute
• TEXT type:
– Specifies a single line text entry field.
– The default width is 20 characters,
– MAXLENGTH and SIZE attributes is used to limit the number
of characters (MAXLENGTH <= SIZE)

<P><B> First Name:</B> <INPUT NAME=“textfield” TYPE =


text MAXLENGTH=30 SIZE =30></P>

<P><B> Last Name:</B> <INPUT NAME=“textfield” TYPE =


text MAXLENGTH=30 SIZE =30></P>
Text Input (type=“text”)
• Example : A text field named "text1" that is 30 characters wide.
• <input type="text" name="text1" size="30">

• Example : A text field named "text2" that is 30 characters wide but will
only accept 20 characters.
• <input type="text" name="text2" size="30" maxlength="20">

• Example : A text field named "text3" that is 40 characters wide with


default value.
• <input type="text" name="text3" size="40" value="We are not alone">
TYPE Attribute
• PASSWORD Type:
– Same as text except the text entered by the user is obscured(not visible).
– Use the MAXLENGTH and SIZE attributes.

<P><B> Enter Your Password:</B>


<INPUT NAME=“password” TYPE = password MAXLENGTH=30
SIZE =30></P>

• Example : A password field named "pass1" that is 30 characters wide


• <input type="password" name="pass1" size="30">

• Example : A password field named "pass2" that is 30 characters wide but will
only accept 20 characters
• <input type="password" name="pass2" size="30" maxlength="20">
Text Input (type=“textarea”)
• Text fields that have more than one line and can scroll as the viewer enters
more text.
• The tag options define the size of the field by the number of rows and character
columns.
• You can also include default text to appear in the field

• Example 6: A textarea field named "comments" that is 45 characters wide


and 6 lines high

• <textarea name="comments" rows="6" cols="45" >


The first time I ever saw a web page, I thought.... (continue)
</textarea>

11
TYPE Attribute
• SUBMIT and RESET Types:
– SUBMIT: Used to submit the form’s content, as
specified by the ACTION attribute.
– RESET: Set all fields in the form to their initial
values.
<P>INPUT TYPE=SUBMIT>
<INPUT TYPE=RESET>

<P><INPUT TYPE=SUBMIT VALUE = “Place Your


Order”>
<INPUT TYPE=RESET VALUE = “Start over”>
TYPE Attribute
• Radio Boxes:
• Set of controls that are linked so that only one radio button among each
set is selected at a time

• If you click one radio button, the others in the set are automatically de-
selected.
• A set of radio buttons is defined by providing them the same name

Male: <input type = "radio" name = "gender"


value="Male"/>
Female: <input type = "radio" name = "gender"
value="Female"/>
TYPE Attribute
• Checkbox:
– An object where several values can be selected at
the same time.
– The checkbox is submitted as separate
name/value pair for each selected value.
– Checkbox that are grouped together should have
• a different name.
• a unique value.
TYPE Attribute
• Checkbox:
<FORM>
What pets do you own?
<P><INPUT TYPE=CHECKBOX name = petdog
value=“dog”> DOG
<BR><INPUT TYPE=CHECKBOX name = petcat
value=“cat”> CAT
<BR><INPUT TYPE=CHECKBOX name = petbird
value=“bird”> BIRD
<BR><INPUT TYPE=CHECKBOX name = petfish
value=“fish”> FISH
</FORM>
TYPE Attribute
• BUTTON Input Type:
– Creates a button whose use can be defined
through scripting and onClick event.
– Use to create a back button.
– Only useful to browsers that support scripting.

<FORM><P><INPUT TYPE=“button”
VALUE=“Back to Last Document”
onClick=“history.back( )”></P></FORM>
PullDown Menu
• Use SELECT and OPTION to create pulldown menu.
• SELECT:
– Allows the user to choose one (or possibly more) items from a
list.
– Attributes: MULTIPLE, SIZE, and NAME.
• OPTION:
– Specifies the list items.
– Attributes: SELECTED, VALUE, and LABEL

• A menu or list:
<select name="select">
<option value="red">red</option>
<option value="green">green</option>
<option value=“blue">blue</option>
</select>
Practice Exercise

18

You might also like