Scribd
Upload
99 views

Form Allows You To Gather Feedback From Your Readers or Visitors and Work On The Data To Provide Better Service

Form allows users to submit feedback through input fields like text boxes, checkboxes, radio buttons, and drop-down menus. Attributes like name, action, and method determine how the form functions. Common form controls include text fields for names and comments, select lists for multiple choice questions, and radio buttons or checkboxes when only one or multiple options can be selected. Larger text areas allow for lengthier responses.

Uploaded by

kim taehyung
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
99 views

Form Allows You To Gather Feedback From Your Readers or Visitors and Work On The Data To Provide Better Service

Form allows users to submit feedback through input fields like text boxes, checkboxes, radio buttons, and drop-down menus. Attributes like name, action, and method determine how the form functions. Common form controls include text fields for names and comments, select lists for multiple choice questions, and radio buttons or checkboxes when only one or multiple options can be selected. Larger text areas allow for lengthier responses.

Uploaded by

kim taehyung
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 25

Form

Form allows you to gather feedback from your readers or visitors and
work on the data to provide better service.
Fields, text fields or text boxes – are the areas on the form.

Command buttons (send or reset buttons)

Standard controls such as ( check buttons, radio buttons and list boxes.
Two attributes of form
• Action attribute is responsible for indicating where the information will be passed whether it is to
another web page or to a script.

• Method attribute –is responsible for indicating the way for sending the information.

get method is for retrieving data .


post method may update or store data
A form contains input elements like text fields, check boxes, radio buttons, submit
buttons and other. A form also contains select list text area and others.

Attributes for <form></form>


Attribute Name Definition Values
action Indicates where the information Filename(path could be included),
will be submitted. URL
Ex. <form action=“process.html”>
</form>
method Indicates the method of submitting post, get
the information.
Ex:<form
action=“process.html”method=
“post”></form>
The checked attribute needs no value. It just needs to be present
in the tag in order for it to provide its effect.
size Indicates the size of the input field. Any number
Ex. <input name=“textArea1”
Type=“text” size=“30”>
value Indicates the size of the input field. Any text
Indicates the label for the submit and
reset buttons.
Ex. <input name=”textArea1
Type=“text” value=“Input text here”>
checked Indicates, if by default, the input none
field(radio button or check box) is selected
ex.: <input name=“checkBox1”
Type=”checkbox” value=“Dog” checked>
Creating a Textbox

Textboxes are single line text input boxes. Usually, textboxes are used
for username input and other single line texts such as names, email
addresses, etc. and can be made by keying in text as the value of the
type attribute of <input>.

Example: <input type=”text”>

* Additionally, you can use the value attribute to set an initial text
input. The size attribute then indicates the length of the textbox.
Sample of text box
<html>
<head><title>Computer Books, Software, Hardware</title></head>
<body>
<form
action=http:www.myserver.com/myscript.cgi method=“post”.
<h3>Customer Survey Form</h3>
<hr align=“left”/>
<h5>Name<input type=“text”/></font></p></h5>
</form>
</html>
Creating a Large Text Area

• You can create an input field that can span several rows, and columns
to allow the readers to enter their feedback request, instructions,
opinions or any communication.
• Text areas are made via the container tag ,<textarea></textarea>.
The content of this tag will be displayed in the text area by default.
Ex: <textarea name=“textarea1”>This is a text area.</textarea>
Sample Text area code
<html>
<head><title>Computer Books, Software, Hardware</title></head>
<body>
<form
action=http:www.myserver.com/myscript.cgi method=“post”.
<h3>Customer Survey Form</h3>
<hr align=“left”/>
<h5>Name<input type=“text”/></font></p></h5>
<p>To help us better serve you, please write your comments<br>
<textarea name=“feedback” rows=“15” cols=40”>
</textarea>
</form>
</body>
</html>
Soft word wrapping wraps the text only in the text area and not when it is
submitted. Can be made by keying in soft as the value for the wrap attribute and
hard if it is hard word attribute. Word wrapping can be removed by keying in off as
the values for the wrapping attribute.

Attributes for
<textarea></textarea>
Attribute Name Definition Values
name Assigns a name to the text area. Any text (without spaces)
The name can be used for various
purposes and is required in most
circumstances.
Ex: <textarea
name=“textarea1”>This is a text
area.</textarea>
rows Indicates the number of rows or Any number
the height of the text area.
Ex: <textarea name=“textarea1”
rows=“10”>This is a text
area.</textarea>
cols Indicates the number of columns Any number
or width of the text area.
Ex: <textarea name=“textarea1”
cols=“10”>This is a text
area.</textarea>
wrap Indicates the type of word Soft, hard, off
wrapping in the text area.
Ex: <textarea name=“textarea1”
wrap=“off”>This is a text
area.</textarea>
Creating Radio Buttons
Radio buttons provide the users a variety of choices where only one
can be selected. Radio buttons can be made by keying in radio as the
value of the type attribute of <input>.

Example<input type=“radio” name=“gender”>

* Bear in mind that in a set radio buttons, only one can be chosen; the
name attribute is also used to indicate which set that radio button
belongs. Radio buttons of the same group have similar values for their
name attribute.
The checked attribute is applicable for radio buttons to indicate a
default selected option. Radio buttons are usually used when the
choices are only few.
<html>
<head><title>Computer Books, Software, Hardware</title></head>
<body>
<form
action=”http:www.myserver.com/myscript.cgi” method=”post”
<h3>Customer Information Form</h3>
<hr align=”left”/>
<p>Please check the products you have used in the past 2 years<br><br>
<input name=”pictype” type=”radio” value=”cross”>
Adobe Photoshop</font></p>
<input name=”pictype” type=”radio” value=”cross”>
Microsoft Excel</font></p>
<input name=”pictype” type=”radio” value=”cross”>
Norton AntiVirus</font></p>
</form>
</body>
</html>
Creating Check Boxes
Check boxes offer users a variety of choices where none, only one or
many may be selected. Check boxes can be made by keying checkbox
as the value of the type attribute of <input>.
Example: <input type=“checkbox” name=“checkboxCS”>

The checked attribute is applicable for check boxes to indicate default


selected options.
<html>
<head><title>Computer Books, Software, Hardware</title></head>
<body>
<form
action=”http:www.myserver.com/myscript.cgi” method=”post”
<h3>Customer Information Form</h3>
<hr align=”left”/>
<p>Please check the products you have used in the past 2 years<br><br>
<input name=”pictype” type=”checkbox” value=”cross”>
Adobe Photoshop</font></p>
<input name=”pictype” type=”checkbox” value=”cross”>
Microsoft Excel</font></p>
<input name=”pictype” type=”checkbox” value=”cross”>
Norton AntiVirus</font></p>
</form>
</body>
</html>
Creating Drop-down Menus
Like radio buttons, drop-down lists or drop-down menus offer users a
variety of choices where only one can be selected

Drop-down menus are made via the container tag <select></select>


Attributes for <select></select>

Attribute Definition Values

name Assigns a name to the dropdown Any text without spaces


menu. The name can be used for
various purposes and is required in
most circumstances.
Ex: <select
name=“dropdown1”></select>

size Indicates the number of visible


items (lines).
Ex. <select name=“dropdown1”
size=“4”></select>
Individual items in dropdown menus are defined by the container
tag<option></option>. The content of the tag will be the item in the
menu.
The selected attribute is used in dropdown menus to indicate the default
selected option.

Attributes for <option></option>


Attribute Definition Values
value Assigns a name to the dropdown Any text (without spaces).
menu item. The name can be used
for various purposes and is
required in most circumstances.
Ex. <option value=“qc”>Quezon
City</select>

selected Indicates, if by default, the item is none


selected .
Ex. <option value=“qc”
selected>Quezon City</select>
<html>
<head><title>Computer Books, Software, Hardware</title></head>
<body>
<caption>IT LEARNING</caption>
<hr width=”25%” align=”left”/>
<form
action=”http:www.myserver.com/myscript.cgi” method=”post”
<h3>Customer Information Form</h3>
<p>Please choose the month when you are available for IT classes
<select name=”contractchoice” size=”2”>
<option>January</option>
<option>February</option>
<option>March</option>
</select></font></p>

</form>
</body>
</html>
Creating an Email Feedback Form
Feedback Form allows communication with your web sites visitors.
Visitors can submit questions and comments which will then be
forwarded to your email address.

Ex. <form action=“mailto:jemmainc” method=“get”


encytpe=“text/plain”>
Elements of a Feedback Form
action=“mailto:emailaddress” Sends the form results to your email address
method=“get” Sends them as one request to the mail program
enctype=“text/plain” Makes the results readable in your email box
Adding a Submit Button
A submit button is usually placed at the end of forms and when clicked,
submits the information input. It can be made by keying in submit as
the value of the type attribute of <input>.

Example: <input type=“submit”>

The value of the value attribute indicates the label on the button
<html>
<head><title>Computer Books, Software, Hardware</title></head>
<body>
<caption>IT LEARNING</caption>
<hr width=”25%” align=”left”/>
<form
action=”http:www.myserver.com/myscript.cgi” method=”post”
<h3>Customer Information Form</h3>
<p>Please choose the month when you are available for IT classes
<select name=”contractchoice” size=”2”>
<option>January</option>
<option>February</option>
<option>March</option>
</select></font></p>
Click the Submit button to send us your completed form.
<p><input type=”submit” value=”Submit”>
<input type=”reset” value=”Reset”>
</form>
</body>
</html>
Adding a Reset Button
Rese or Clear Button is usually placed at the end of a form. When it is
clicked it clears all the input information. This can be done by keying in
reset as the value of the type attribute of <input>.

Example:<input type=“reset”>
Likewise, the value of the value attribute indicates the label on the
button.

You might also like