FORMS

Forms – allows you to gather feedback from your

readers or visitors and work on the data to provide a
better service.
- the areas on the form are called fields, text fields or
text boxes.
- It contains a command button such as send or reset
button
- standard button such as check buttons or radio
buttons and list boxes.
Forms Present a variety of means
for users to key information
• Textboxes
• Password buttons
• Radio buttons
• Check boxes
• Dropdown menus
• Text Areas
• Submit button
• Reset or Clear buttons
2 attributes of Form <form></form>
Attribute Definition Values
name
Action it is responsible for indicating filename (path could
where the information will be be included) URL
passed whether it is to
another page or to the script.
<form action =
“process.html”> </form>
2 attributes of Form <form></form>

Attribute Definition Values

name
method this is responsible for post- appends the
indicating the way for sending data into the url
the information get – retrieving data
<form action = “process.html” whereas the post
method = “post”></form> method may update
or store data
Input Element

The input element of form defined by the empty tag <input>

is used for making textboxes, passwords boxes, check
boxes, radio buttons, submit buttons and reset buttons
depending on the value of the type attribute which can be
text, password, checkbox, radio, submit and reset
respectively
Input Attribute
Attribut Definition Values
e name
name assigns a name to the input any text ( without
field. The name can be used spaces)
for various purposes and is
required in most
circumstances
Tags example:
<input name = “textArea1”>
Input Attribute
Attribut Definition Values
e name
type Indicates the type of input Text, password,
field checkbox, radio,
Tag example: submit, reset
<input name = “textArea1”
type = “text”>
Input Attribute
Attribut Definition Values
e name
Size Indicates the size of the Any number
input field.
Tag example:
<input name = “textArea1”
type = “text” size= “30”>
Input Attribute

Attribute Definition Values

name
value Indicates the initial value of the any text
input field and label for the
submit and reset buttons.
Tag example:
<input name = “textArea1”
type = “text” value= “input
text here”>
Input Attribute
Attribut Definition Values
e name
checked Indicates if by default, the none
input field (radio or check
box) is selected.
Tag example:
<input name = “Checkbox1”
type = “checkbox” value=
“Dog”> checked>
ACTIVITY
New Input in
HTML 5
New Input Types
Attribute Definition Tag Example
name
Color Select color from a <input type = “Color”
color picker name = “favcolor”/>

Date Defines a date <input type = “date” name

control = “bday”/>
New Input Types
Attribute Definition Tag Example
name
Datetime Allows you to <input type = “datetime”
select a date and name = “bdaytime”/>
time
Email Defines a field for <input type = “email”
an e-mail address name = “usermail”/>
New Input Types
Attribute Definition Tag Example
name
Month Defines a month <input type = “month”
and year control name = “bdaymonth”/>

Number Defines a numeric <input type = “number”

field name = “qty” min=“1”
max=“10”/>
New Input Types
Attribute Definition Tag Example
name
Range Defines a control <input type = “range”
for entering a name = “points” min=“1”
number whose max=“10”/>
exact value is not
important
Search Defines a search <input type = “search”
field name = “google”/>
New Input Types
Attribute Definition Tag Example
name
Tel Defines a field for <input type = “tel” name =
entering a “usertel”/>
telephone number
Time Allows user to <input type = “time” name
select a time = “usertime”/>
New Input Types
Attribute Definition Tag Example
name
URL Used for input <input type = “url” name =
fields that should “homepage”/>
contain a URL
address
Other Example of input Tags

<input type = “password” size=“15” maxlength

=“20” name = “password” value =“1234”/>
Attribute for <textarea></teaxtarea>
Attribute Definition Tag Example Values
name
name Assign a name to <input name = Any text
the text area. The “textarea1”>this is (without
name can be used a text area. spaces)
for various </textarea>
purposes and is
required in most
circumstances
Attribute for <textarea></teaxtarea>
Attribute Definition Tag Example Values
name
rows Indicates the <input name = Any
number of rows “textarea1” number
or the height of rows=“10” >this is a
the text area text area.
</textarea>
Attribute for <textarea></teaxtarea>
Attribute Definition Tag Example Values
name
cols Indicates the <input name = Any
number of “textarea1” number
columns or width cols=“10” >this is a
of the text area text area.
</textarea>
Attribute for <textarea></teaxtarea>
Attribute Definition Tag Example Values
name
wrap Indicates the type <input name = Soft,
of word wrapping “textarea1” hard, off
in the text area wrap=“hard”>this
is a text area.
</textarea>
Drop down menus
<select></select>
Attribute of select
1. Name
2. Size
Moreover, individual items in dropdown menus are defined
by the container tag <option></option>
Attribute of option
3. Value
4. Selected (is used in dropdown menus to indicate a default
selected option)
Activity: Code Me..

Do this Activity by
creating a code of
this Survey Form