Learn Advanced and Basic HTML - Lesson 4 (i)

1
Learn HTML BasicsLesson No 04 (First Part)

• Publisher Attitude Academy

2
HTML Forms
The ltformgt Element HTML forms are used to collect
user input.The ltformgt element defines an HTML
form
ltformgtform elementslt/formgt HTML forms
contain form elements. Form elements are
different types of input elements, checkboxes,
radio buttons, submit buttons, and more.
The ltformgt Element Action and method is Form
Attribute
Type Description
Action This Attribute defines the action to be performed when the form is submitted
Method This attribute specifies the HTTP method (GET or POST) to be used when submitting the forms
3
The Action Attribute
The action attribute defines the action to be
performed when the form is submitted. The common
way to submit a form to a server, is by using a
submit button. Normally, the form is submitted to
a web page on a web server. In the example above,
a server-side script is specified to handle the
submitted form ltform action"action_page.php"gt
The Method Attribute
The method attribute specifies the HTTP method
(GET or POST) to be used when submitting the
forms ltform  method"getgt Or
ltform  method"post"gt
4
HTML Form Elements
Tag Description
ltformgt Defines an HTML form for user input
ltinputgt Defines an input control (Noteabout this tag we define in lession 5(2nd part)
lttextareagt Defines a multiline input control (text area)
ltlabelgt Defines a label for an ltinputgt element
ltfieldsetgt Groups related elements in a form
ltlegendgt Defines a caption for a ltfieldsetgt element
ltselectgt Defines a drop-down list
ltoptgroupgt Defines a group of related options in a drop-down list
ltoptiongt Defines an option in a drop-down list
ltbuttongt Defines a clickable button
5
The lttextareagt Element
The lttextareagt element defines a multi-line input
field (a text area)
ltbodygt ltform action"action_page.php"gt
lttextarea name"message" rows"10" cols"30"gtThe
cat was playing in the garden.lt/textareagt ltinput
type"submit"gt lt/formgt lt/bodygt
6
Grouping Form Data with ltfieldsetgt
The ltfieldsetgt element groups related data in a
form. The ltlegendgt element defines a caption for
the ltfieldsetgt element. Example
ltformgt ltfieldsetgt ltlegendgtPersonal
informationlt/legendgt First name ltinput
type"text" name"firstname" value"Mickeygt
Last name ltinput type"text" name"lastname"
value"Mousegt ltinput type"submit"
value"Submit"gt lt/fieldsetgt lt/formgt
7
The ltlagendgt
The ltselectgt element defines a drop-down list Exa
mple
ltbodygt ltform action"demo_form.asp"gt  ltlabel for
"male"gtMalelt/labelgt  ltinput type"radio" name"ge
nder" id"male" value"male"gtltbrgt  ltlabel for"fe
male"gtFemalelt/labelgt  ltinput type"radio" name"g
ender" id"female" value"female"gtltbrgt  ltlabel fo
r"other"gtOtherlt/labelgt  ltinput type"radio" name
"gender" id"other" value"other"gtltbrgtltbrgt  ltinp
ut type"submit" value"Submit"gtlt/formgt lt/bodygt
8
The ltlabelgt
The ltselectgt element defines a drop-down list Exa
mple
ltbodygt ltform action"demo_form.asp"gt  ltlabel for
"male"gtMalelt/labelgt  ltinput type"radio" name"ge
nder" id"male" value"male"gtltbrgt  ltlabel for"fe
male"gtFemalelt/labelgt  ltinput type"radio" name"g
ender" id"female" value"female"gtltbrgt  ltlabel fo
r"other"gtOtherlt/labelgt  ltinput type"radio" name
"gender" id"other" value"other"gtltbrgtltbrgt  ltinp
ut type"submit" value"Submit"gtlt/formgt lt/bodygt
9
The ltselectgt Element (Drop-Down List)
The ltselectgt element defines a drop-down list Exa
mple
ltbodygt ltform action"action_page.php"gt ltselect
name"cars"gt ltoption value"volvo"gtVolvolt/opti
ongt ltoption value"saab"gtSaablt/optiongt
ltoption value"fiat"gtFiatlt/optiongt ltoption
value"audi"gtAudilt/optiongt lt/selectgt
ltbrgtltbrgt ltinput type"submit"gt lt/formgt lt/bodygt
10
The ltoptiongroupgt Element (Drop-Down List)
The ltoptgroupgt is used to group related options
in a drop-down list. If you have a long list of
options, groups of related options are easier to
handle for a user. Example
ltbodygt ltformgt ltselectgt ltoptgroup
label"Swedish Cars"gt ltoption
value"volvo"gtVolvolt/optiongt ltoption
value"saab"gtSaablt/optiongt lt/optgroupgt
ltoptgroup label"German Cars"gt ltoption
value"mercedes"gtMercedeslt/optiongt ltoption
value"audi"gtAudilt/optiongt lt/optgroupgt lt/selectgt
lt/formgt lt/bodygt
11
The ltbuttongt Element
The ltbuttongt element defines a clickable button
ltbodygt ltbutton type"button" onclick"alert('Hello
World!')"gtClick Me!lt/buttongt lt/bodygt
12
PRACTICAL IMPLEMENTATION
13

• Visit Us Attitude Academy