3. What are HTML Forms?
• The primary method for gathering data from site
visitors
• HTML Forms can contain
• Text fields for the user to type
• Buttons for interactions like
"Register", "Login", "Search"
• Menus, Sliders, etc…
• For example: If a user want to purchase some items on internet,
he/she must fill the form such as shipping address and credit/debit
card details so that item can be sent to the given address.
3
4. How to Create a HTML Form?
• Create a form block with
• Example:
4
<form></form>
<form name="myForm" method="post"
action="path/to/some-script.php">
...
</form> The "action" attribute tells where
the form data should be sent
The "method" attribute tells how
the form data should be sent – via
GET or POST request
It is a container element started by <form> tag and ended
by </form>tag
The “name" attribute specifies the name of the form.
The NAME attribute is optional if there is only one FORM on the web page.
5. How to Create a HTML Form?
• Create a form block with
• Example:
5
<form></form>
<form name="myForm" method="post"
action="path/to/some-script.php">
...
</form>
The "action" attribute tells where
the form data should be sent
The "method" attribute tells how
the form data should be sent – via
GET or POST request
It is a container element started by <form> tag and ended
by </form>tag
6. INPUT ELEMENT
• INPUT FIELDS
• Fieldsets
• Text Boxes,password
• Buttons,Submit,Reset
• Checkboxes and Radio Buttons
• Select Fields
• Image ,Hidden ,File
Syntax:
<INPUT TYPE = “FIELD TYPE” NAME = “FIELD NAME”
VALUE = “FIELD TEXT”> 6
- It is an empty element specified by tag.
- It is used to provide an input field in a form
where the user can enter the data.
7. Attributes of INPUT element-Text Fields
• Single-line text input fields:
• Multi-line text input fields (textarea):
• Password input – a text field which masks the
entered text with * signs
7
<input type="text" name="FirstName" value="This
is a text field" />
<textarea name="Comments">This is a multi-line
text field</textarea>
<input type="password" name="pass" />
8. Attributes of TEXT FIELDS,PASSWORD
8
NAME
Specifies the name of the field. This name does not appear on the
FORM. It is required for the identification/ differentiation as there
can be more than one fields in a single FORM.
Syntax: NAME = "FieldName"
VALUE
Specifies the text to be displayed on the field.
Syntax:VALUE = "FieldText“
SIZE
Sets the visible size of the text field to n characters.
Syntax: SIZE = “n“
MAXLENGTH
- Set the maximum number of characters that can be input in the
text field to n.
Syntax: maxlength=“n“
9. Buttons
• Reset button – brings the form to its initial state
• Submit button: Submitted to the destination file.
• Image button – acts like submit but image is
displayed and click coordinates are sent
• Ordinary button – no default action, used with JS
9
<input type="reset" name="resetBtn"
value="Reset the form" />
<input type="image" src="submit.gif"
name="submitBtn" alt="Submit" />
<input type="button" value="click me" />
<input type="submit" value="Apply Now" />
10. Checkboxes and Radio Buttons
• Checkboxes used to choose more than one option.
• Radio buttons :
• Radio buttons can be grouped, allowing only one to
be selected from a group:
10
<input type="checkbox" name="fruit"
value="apple" />
<input type="radio" name="title" value="Mr." />
<input type="radio" name="city" value="Lom" />
<input type="radio" name="city" value="Ruse" />
11. Attributes -Checkboxes and Radio
Buttons
11
<input type="radio" name="city" value="Lom“ checked/>
<input type="radio" name="city" value="Ruse" />
CHECKED - Indicates that the radio button is selected, which
can be deselected when another choice is made. At one time,
only one radio button in a radio group can be specified as
CHECKED.
CHECKED - Indicates that the checkbox is to be displayed with a tick
mark to show selection.This attribute is optional
<input type="checkbox" name="vehicle" value="Bike"> I have a
bike<br>
<input type="checkbox" name="vehicle" value="Car" checked>
I have a car<br>
13. Hidden Fields
• Hidden fields contain invisible data
• Not shown to the user
• Used by JavaScript and server-side code
13
<input type="hidden" name="Account"
value="This is a hidden text field" />
14. Fieldsets
• Fieldsets are used to enclose a group of related form
fields:
• The <legend> is the fieldset's title
14
<form method="post" action="form.aspx">
<fieldset>
<legend>Client Details</legend>
<input type="text" id="Name" />
<input type="text" id="Phone" />
</fieldset>
<fieldset>
<legend>Order Details</legend>
<input type="text" id="Quantity" />
<textarea cols="40" rows="10"
id="Remarks"></textarea>
</fieldset>
</form>
20. HTML Frames
• Frames provide a way to show multiple HTML documents
in a single Web page
• The page can be split into separate views (frames)
horizontally and vertically
• Frames were popular in the early ages of HTML
development, but now their usage is rejected
• Frames are not supported by all user agents (browsers,
search engines, etc.)
20
26. Inline Frames: <iframe>
• Inline frames provide a way to show one website
inside another website:
26
<iframe name="iframeGoogle" width="600" height="400"
src="http://www.google.com" frameborder="yes"
scrolling="yes"></iframe>
