Html form

Internet & Web Designing
BCA -302

2
HTML Form
Forms add the ability to web pages to not only provide the person
viewing the document with dynamic information but also to obtain
information from the person viewing it, and process the information.
Objectives:
Upon completing this section, you should be able to
1. Create a FORM.
2. Add elements to a FORM.
3. Define CGI (Common Gateway Interface).
4. Describe the purpose of a CGI Application.
5. Specify an action for the FORM.
 Forms work in all browsers.
 Forms are Platform Independent

3
HTML Form
 A form in HTML is contained within a form element. i.e. <form>…<</form>.
 A form is made up of fields as well as the markup necessary to structure the form
and potentially control its presentation.
 Form fields include text fields, password fields, multiple-line text fields, pop-up
menus, scrolled lists, radio buttons, check boxes, and buttons.
 The form itself contains regular text, other HTML elements such as tables, and form
elements such as check boxes, drop-down menus, and text fields.
 In order to make the form work, you must specify two things in the <form> tag: the
address of the program that will handle the form contents using action and the
method by which the form data will be passed using the method attribute.

4
HTML Form
To insert a form we use the <FORM></FORM> tags. The rest of the form elements
must be inserted in between the form tags.
<HTML> <HEAD>
<TITLE> Sample Form</TITLE>
</HEAD>
<BODY BGCOLOR=“FFFFFF”>
<FORM ACTION = http://www.xnu.com/formtest.asp>
<P> First Name: <INPUT TYPE=“TEXT” NAME=“fname” MAXLENGTH=“50”> </P>
<P> <INPUT TYPE=“SUBMIT” NAME=“fsubmit1” VALUE=“Send Info”> </P>
</FORM>
</BODY> </HTML>

5
HTML Form Attributes
ACTION: is the URL of the CGI (Common Gateway Interface) program that is going to
accept the data from the form, process it, and send a response back to the browser.
METHOD: GET (default) or POST specifies which HTTP method will be used to send
the form’s contents to the web server. The CGI application should be written to accept
the data from either method.
NAME: is a form name used by VBScript or JavaScripts.
TARGET: is the target frame where the response page will show up.

6
HTML Form ElementsText Fields
Single-line text entry fields are specified using the input element and are useful for collecting small
bits of data such as a user's name, address, e-mail address, and so on. It is possible to specify a
multiple-line text field using the textarea element. To set a text entry control, <input> tag is used.
<input type="text" name="UserName" id="UserName" size="30" maxlength="60“ value="Enter your
name here”>
Attributes
Name /Id: All form elements should be named by setting the name attribute to some unique value.
Size: By default, unless specified this field generally will be a width of 20 characters. The value of
the size field for an <input> tag is the number of characters to be displayed. It is possible for the user
to type more characters than this value. The text will just scroll by.
Maxlength: If you want to limit the size of the field, you need to set the value of the maxlength
attribute to the maximum number of characters allowed in the field.
Value: The final attribute that is useful to set with a text entry field is the value attribute. With this
attribute, you can specify the default text you want to appear in the field when the form is first loaded.

7
HTML Form Elements
Password Fields
 The password form field is the same as the simple text entry field, except that the input to the field
is not echoed when typed. To set a password form control, use the <input> tag again but this
time set the type attribute equal to password.
 As with the text field, it is possible to specify the size of the field in characters with size and the
maximum entry in characters with maxlength.
 Setting a default value for the password field with the value attribute doesn't make much sense
because the user can see it by viewing the HTML source of the document.
 Of course, the name and id attributes should also be used on this form field.
 <input type="password" name="Pass" id="Pass" size="10" maxlength="10“ >

8
Example of Password Field
<HTML><HEAD>
<TITLE>Form_Password_Type</TITLE></HEAD>
<BODY>
<h1> <font color=red>To Access, Please
enter:</font></h1>
<FORM name="fome2" Action="url" method="get">
User Name: <INPUT TYPE="TEXT" Name="FName“ SIZE="15“
MAXLENGTH="25"> <BR>
Password: <INPUT TYPE="PASSWORD" NAME="PWord" value="“ SIZE="15”
MAXLENGTH="25"><BR>
</FORM></BODY> </HTML>

9
HTML Form Elements
Multiple-Line Text Input
When it is necessary to enter more than one line of text in a form field, the input element must be
abandoned in favor of the textarea element. Like the text input field, there are similar attributes to
control the display size of the data entry area as well as the default value and the name of the control.
Attributes
Rows: To set the number of rows in the text entry area, set the rows attribute equal to the
number of rows desired.
Cols: To set the number of characters per line, set the cols attribute.
<textarea rows="5" cols="80" name="CommentBox" id="CommentBox"> </textarea>
Because there can be many lines of text within a <textarea> tag, it is not possible to set the default
text for the area using the value attribute. Instead, place the default text between the <textarea> and
</textarea> tags:
<textarea rows="5" cols="80" name="CommentBox" id="CommentBox">
Please fill in your comments here.
</textarea>
The information enclosed within a <textarea> tag must be plain text and should not include any
HTML markup. In fact, the default text in a <textarea> tag preserves all the spaces, returns, and
other special characters. Markup included within the form control will not be interpreted.

10
HTML Form Elements
Drop-Down Menus
A drop-down menu enables the user to select one choice out of many possible choices. One nice aspect of drop-
down menus is that all choices do not have to be seen on the screen and are generally are hidden. To create a
drop-down menu <select> tag is used.
The tag should contain one or more occurrences of the option element. Each <option> tag specifies a menu
choice.
Like all form fields the select element has name and id attributes used to set a unique name for the field. It is also
possible to set the size attribute on a <select> tag, but generally this is not set unless the menu is a scrolled list.
The option element has a few attributes as well. An occurrence of the attribute selected in an <option> tag sets the
form control to select this item by default. Otherwise, a browser will choose the first <option> within the select
element as the default. If multiple selected attributes are specified, the result is generally to select the final
<option> tag with a selected attribute. Generally, the value submitted when the form is sent is the value enclosed
by the option element. However, it is possible to set the value attribute for the element that will be returned instead.
<form >
<select name="GadgetType" id="GadgetType">
<option>Super Gadget</option>
<option value="MEG-G5">Mega Gadget</option>
<option value="MO-45" selected="selected">Mongo Gadget</option>
<option>Plain Gadget</option>
</select>
</form>

11
HTML Form Elements
Check Box
With the scrolled list, it is possible to select many items out of a large group of items. Unfortunately, not all the items
are presented at once for the user to choose. If there are a few options to select from that are not mutually
exclusive, it probably is better to use a group of check boxes that the user can check off.
Check boxes are best used to toggle choices on and off. Although it is possible to have multiple numbers of check
boxes and let the user select as many as he or she wants.
To create a check box, use an <input> tag and set the type attribute equal to checkbox.
The check box also should be named by setting the name and id attributes.
If the check box is selected, a value of Cheese=on will be transmitted to the server. Setting a value for the check
box might make more sense. Values to be transmitted instead of the default value can be set with the value
attribute. The code
Cheese: <input type="checkbox" name="Extras“ value="Cheese“ >
would send a response such as Extras=Cheese to the server.
It is possible to set a check box to be selected by default by using the checked attribute within an <input> tag.
<form>
Super-magneto: <input type="checkbox" name="mag" value="Magnetize" >
<br>
Kryptonite Coating: <input type="checkbox" name="krypto" value="Anti-Superman"
checked="checked" >
<br />
Anti-gravity: <input type="checkbox" name="antigrav" value="Anti-gravity" >
<br>
</form>

12
HTML Form Elements
Radio Button :
 Radio buttons use a similar notation to check boxes, but only one option may be chosen among many.
 This is an especially good option for choices that don't make sense when selected together.
 In this sense, radio buttons are like pull-down menus that allow only one choice.
 The main difference is that all options are shown at once with radio buttons.
 Like check boxes, this form field uses the standard <input type=""> format. In this case, set type equal to radio.
 Setting the name attribute is very important in the case of radio buttons because it groups together controls that
share the radio functionality.
 The radio functionality says that when an item is selected, it deselects the previously pressed item. If the names
are not the same, the radio group will not work.
 Be careful when naming radio fields.
 When working with radio buttons, the value attribute must also be carefully considered. It is important to set each
individual radio button to a different value entry. Otherwise, it will be impossible to decipher which button was
selected.
 Like check boxes, the occurrence of the selected attribute in an <input> tag will preselect the item. Only one item
may be selected as a default out of a radio group.
 If the selected attribute does not occur, the browser typically will not display any items as selected.
<form>
Groovy Green: <input type="radio" name="Color" value="Green">
Rocket Red: <input type="radio" name="Color" value="Red" checked="checked">
Yipee! Yellow: <input type="radio" name="Color" value="Yellow">
</form>

13
HTML Form Elements
Reset and Submit Button
Once a form has been filled in, there must be a way to send it on its way, whether it is submitted to a program for
processing or simply mailed to an e-mail address.
 The input element has two values, reset and submit, for the type attribute for accomplishing this.
 Setting the type attribute for an <input> tag to reset creates a button that allows the user to clear or set to default all
the form fields at once.
 Setting the type attribute for <input> to submit creates a button that triggers the browser to send the contents of the
form to the address specified in the action attribute of the enclosing form element.
 The buttons have two important attributes: value and name. The value attribute sets both the value of the button
transmitted to the server and the text wording on the button.
 The name value associates an identifier with the form field for submission. Ofcourse, id can be used as well for
setting a name, but it is typically more related to style sheets.
Because the Submit and Reset buttons cause an action, either form submission or field reset, it may not be obvious
why the name field can be useful.
 Although having multiple Reset buttons might not be so useful, multiple Submit buttons are useful because the
value of the button is sent to the address specified in the form element's action attribute.
<input type="submit" value="Place Order" name="Add“ >
<input type="submit" value="Delete Order" name="Delete”>
<input type="submit" value="Update Order" name="Update”>
<input type="reset" value="Reset Form" name="ResetButton”>

14
HTML Form Elements
<form action="http://www.htmlref.com/scripts/formecho.php" method="post" name="form1“ >
<strong>Customer Name:</strong>
<input type="text" name="UserName“ size="25" maxlength="35“ >
<br>
<strong>Password:</strong>
<input type="password" name="Pass" id="Pass" size="10" maxlength="10" >
<br>
<strong>Gadget Type:</strong>
<select name="GadgetType" id="GadgetType">
<option value="SG-01">Super Gadget</option>
<option value="MEG-G5">Mega Gadget</option>
<option value="MO-45">Mongo Gadget</option>
<option selected="selected">Gadget</option>
</select>
<br ><br >
<input type="submit" value="Order Gadget" >
<input type="reset" value="Reset Form" >
</form>

15
HTML Form Elements
File Upload: You can use a file upload to allow surfers to upload files to your web server.
<INPUT TYPE=“FILE”>
Browser will display
File Upload has the following attributes:
TYPE: file.
SIZE: is the size of the text box in characters.
NAME: is the name of the variable to be sent to the CGI application.
MAXLENGHT: is the maximum size of the input in the textbox in characters.
<BODY bgcolor=lightblue>
<form>
<H3><font color=forestgreen>
Please attach your file here to for uploading to
My <font color =red>SERVER...<BR>
<INPUT TYPE="File" name="myFile" size="30">
<INPUT TYPE="Submit" value="SubmitFile">
</form>
</BODY>

16
Summary of HTML Form Elements

17
HTML Form Action Attribute
The action Attribute
How a form is to be handled is set using the action attribute for the form element.
The action attribute usually is set to a URL of the program on the web server that will
process the form data captured and being sent back.
The server side program that processes this data can be written in any scripting
language that the web server understands.
For example, the code
<form action="http://www.democompany.com/cgi-bin/post-query.pl"
method="post">
would be for a script called post-query.pl in the cgi-bin directory on the server
www.democompany.com.
It is also possible to use a relative URL for the action attribute if the form is delivered by
the same server that houses the form-handling program:
<form action="../cgi-bin/post-query.pl" method="post">

18
HTML Form Method Attribute
 It is also necessary to specify how the form will be submitted to the
address specified by the action attribute.
 How data will be submitted is handled by the method attribute.
 There are two acceptable values for the method attribute:
1) get
2) post
 These are the HTTP methods that a browser uses to "talk" to a
server.
 If the method attribute remains unspecified, it defaults to the get
method.

19
HTML Form get() Method
• The HTTP get method generally is the default method for browsers to submit
information.
• In fact, HTML documents generally are retrieved by requesting a single URL from a
Web server using the get method, which is part of the HTTP protocol. When you type
a URL such as http://www.democompany.com/staff/thomas.html into your Web
browser, it is translated into a valid HTTP get request like this: GET
/staff/thomas.html HTTP/1.1
• This request is then sent to the server www.democompany.com. What this request
says, essentially, is "Get me the file thomas.html in the staff directory. I am speaking
the 1.1 dialect of HTTP."
• We need to pass the form data along with the name of the program to run. To do
this, all the information from the form is appended onto the end of the URL being
requested. This produces a very long URL with the actual data in it, as shown here:
http://www.democompany.com/cgi-
bin/comments.exe?Name=Matthew+Foley&Age=32&Sex=male

20
HTML Form get() Method
Disadvantages:
The get method isn't very secure because the data input appears in the URL.
Furthermore, there is a limitation to just how much data can be passed with the get
method (1024 bytes).
Advantage:
• First, get is easy to deal with. An example URL like the previous one should make it
obvious that the Name field is set to Matthew Foley, the Age is 32, and the Sex is
male. The individual form field values are separated by ampersands. Other reason
to use get is that it comes in the form of a URL, so it can be bookmarked or set as a
link.
• The get method is used properly in search engines. When a user submits a query to
a search engine, the engine runs the query and then returns page upon page of
results. It is possible to bookmark the query results and rerun the query later.

21
HTML Form post() Method
 In situations where a large amount of information must be passed back, the post method is more
appropriate than get.
 The post method transmits all form input information as a data stream immediately after the
requested URL.
 In other words, once the server has received a request from a form using post, it knows to
continue "listening" for the rest of the information.
 The get method comes with the data to use right in the URL request. The encoding of the form
data is handled in the same general way as the get method by default; spaces become plus signs
and other characters are encoded in the URL fashion. A sample form might send data that would
look like the following:
Name=Jane+Smith&Age=30&Sex=female
 The benefit of using the post method is that a large amount of data can be submitted this way
because the form contents are not in the URL.
 In the post example, the encoding of the form data is the same as get, although it is possible to
change the encoding method using the enctype attribute.
 One potential downside of the post method is that pages generated by data submitted via post
cannot be bookmarked.

Html form

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Html form

Similar to Html form (20)

More from Jaya Kumari

More from Jaya Kumari (20)

Recently uploaded

Recently uploaded (20)

Html form