Scribd
Upload
44 views

HTML Forms

Forms allow users to enter data into a web page. The <FORM> tag defines a form region, and form elements like text fields, checkboxes, radio buttons, menus and textareas define the inputs. Form data is submitted to a server using either the GET or POST method, with GET appending the data to the URL and POST sending it in the HTTP request body. Server-side form processing programs receive the submitted data and can store it or use it to generate a new page.

Uploaded by

Ahmed Abed
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
44 views

HTML Forms

Forms allow users to enter data into a web page. The <FORM> tag defines a form region, and form elements like text fields, checkboxes, radio buttons, menus and textareas define the inputs. Form data is submitted to a server using either the GET or POST method, with GET appending the data to the URL and POST sending it in the HTTP request body. Server-side form processing programs receive the submitted data and can store it or use it to generate a new page.

Uploaded by

Ahmed Abed
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 21

USER

INTERACTIONS:
FORMS
Form Processing

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

Flow of Information for Forms


Forms
• The FORM element is used to create a data
input form.
• A region using forms is enclosed within the
<FORM> </FORM> tags.
• A document can have several forms, but the
forms should not be embedded.
• The FORM element has three attributes:
– ACTION, METHOD, and ENCTYPE.
Forms
• METHOD:
– Specifies the way in which the data from the user
are encoded.
– The default METHOD is GET, although the
POST method is preferred.
– GET: The CGI program receives the encoded
form input in the QUERY_STRING variable,
which follows the “?” in the URL that calls the
script.
– POST: The CGI script or program receives the
encoded form input in its standard input stream.
The CONTENT_LENGTH must be used.
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. Use the
POST method.
Forms
• ENCTYPE:
– Tell the browser how the data from a form
should be encoded when it is returned to the
server.
– The default is “application/x-www-form-
urlencoded” that converts spaces to “+” and uses
“&” to delineated different data fields.
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:
• 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.
• VALUE: Contain the initial value displayed to users.
• TYPE: Defines the type of data used in the field.
• 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
• 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
• Radio Boxes:
– An object that defines an item where only one
value can be selected from a set of possibilities.
– A set is defined as the group of radio boxes with
the same NAME attribute.
– Never set more than one radio box at a time with
the CHECKED attribute.

<P><B>Charge Card:</B>
<INPUT NAME = “cc” VALUE=“visa” TYPE = “radio”>VISA
<INPUT NAME = “cc” VALUE=“mc” TYPE = “radio”>Master Card
<INPUT NAME = “cc” VALUE=“amex” TYPE = “radio”>American
Express
TYPE Attribute
• HIDDEN Type:
– When this type is chosen, no field is presented to
the user.
– Primary use is record keeping for programs that
may parse user input from forms.
– May be used for shopping carts.
TYPE Attribute
• TEXT type:
– Specifies a single line text entry field.
– Can be used with the MAXLENGTH and SIZE
attributes (MAXLENGTH >= SIZE)

<P><B> First Name:</B> <INPUT


NAME=“fname” TYPE = text MAXLENGTH=30
SIZE =30></P>
<P><B> Last Name:</B> <INPUT
NAME=“lname” TYPE = text MAXLENGTH=30
SIZE =30></P>
TYPE Attribute
• PASSWORD Type:
– Same as text except the text entered by the user is
obscured.
– Use the MAXLENGTH and SIZE attributes.

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


<INPUT NAME=“password” TYPE = password
MAXLENGTH=30 SIZE =30></P>
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
• 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>
TEXTAREA
• Let users enter more than one line of text.
• Uses attributes ROWS and COLS to size.
• WRAP Attribute:
– OFF: No wrapping
– VIRTUAL: Display wraps but long lines are sent
as one line.
– PHYSICAL: Word wraps and text is sent with
wrap points.
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
PullDown Menu
• Example:

<P><B>Pick your favorite baseball team:</B>


<BR><SELECT NAME=“team”>
<OPTION>Dodgers
<OPTION>Braves
<OPTION>Cardinals
<OPTION>Yankees
</SELECT>
Form Programming
• Handling GET Forms:
– A typical invocation of a GET-style applicatoin
might use a URL like this:
http://www.kumquat.com/cgi-
bin/dump_get?name=bob&phone=555-1212
– When the server processes this URL, it invokes
the application named dump_get stored in the
directory named cgi-bin. Everything after the
question mark is passed to the application as
parameters.
– The parameters are placed in a variable named
QUERY_STRING.
Form Programming
• Handling POST Method:
– Data is sent in the format:

name=bob&phone=555-1212

– No URL is sent.

You might also like