IDK0040 V

1
IDK0040 Võrgurakendused Iharjutus 05Forms

• Deniss Kumlander

2
HTML Forms and Input

• A form is an area that can contain form elements.
• Form elements are elements that allow the user to
  enter information (like text fields, textarea
  fields, drop-down menus, radio buttons,
  checkboxes, etc.) in a form.
• A form is defined with the ltformgt tag.
• ltformgt
• ltinputgt
• ltinputgt
• lt/formgt

3
Text Fields

• ltformgt
• First name ltinput type"text" name"firstname"gt
  
• ltbrgt
• Last name ltinput type"text" name"lastname"gt
• lt/formgt
• type"password"

4
Radio Buttons

• ltformgt
• ltinput type"radio" name"sex" value"m"gt Male
  ltbrgt ltinput type"radio" name"sex" value"f"gt
  Female
• lt/formgt

5
Checkboxes

• ltinput type"checkbox" name"bike"gt I have a bike
  
• ltbrgt
• ltinput type"checkbox" name"car"gt I have a car

6
Drop-Down Box
ltformgt ltselect name"cars"gt ltoption
value"volvo"gtVolvo ltoption value"saab"gtSaab
ltoption value"fiat"gtFiat ltoption
value"audi"gtAudi lt/selectgt lt/formgt
7
Drop-Down Box
ltformgt ltselect name"cars"gt ltoption
value"volvo"gtVolvo ltoption value"saab"gtSaab
ltoption value"fiat" selected"selected"gtFiat lto
ption value"audi"gtAudi lt/selectgt lt/formgt
8
Drop-down box with subelements

• ltselectgt
• ltoptgroup label"Europe"gt
• ltoption value"ee"gtEstonialt/optiongt
• ltoption value"sw"gtSwedenlt/optiongt
• lt/optgroupgt
• ltoptgroup label"Asia"gt
• ltoption value"jp"gtJapanlt/optiongt
• ltoption value"ch"gtChinalt/optiongt
• lt/optgroupgt
• lt/selectgt

9
Textarea

• lttextarea rows"10" cols"30"gt
• The cat was playing in the garden.
• lt/textareagt

10
File upload

• lthtmlgt
• ltbodygt
• ltformgt
• File to upload ltinput type"file"/gt
• lt/formgt
• lt/bodygt
• lt/htmlgt

11
Buttons

• lthtmlgt
• ltbodygt
• ltformgt
• A ltinput type"text" value"1" name"a"/gt,
• B ltinput type"text" value"2" name"b"/gt
• ltinput type"button" value"Sum up"/gt
• ltinput type"reset" value"Reset form"/gt
• lt/formgt
• lt/bodygt
• lt/htmlgt

12
Hidden control

• ltinput typehiddengt - used to transfer some
  hidden information to/from server as controls
  could be referenced by javascript etc.

13
Fieldset

• ltfieldsetgt
• ltlegendgtHealth informationlt/legendgt
• Height ltinput type"text" size"3"gt
• Weight ltinput type"text" size"3"gt
• lt/fieldsetgt

14
Identifying controls

• Controls can be identified/referred
• Name
• ID
• ltinput typetext nameagt
• ltinput typetext idagt

15
The Form's Action Attribute and the Submit Button

• When the user clicks on the "Submit" button,
  the content of the form is sent to another file.
  The form's action attribute defines the name of
  the file to send the content to. The file defined
  in the action attribute usually does something
  with the received input.

16
The Form's Action Attribute and the Submit Button

• ltform name"input" action"act.php" method"get"gt
  
• Username ltinput type"text" name"user"gt
• ltinput type"submit" value"Submit"gt
• lt/formgt
• If you type some characters in the text field
  above, and click the "Submit" button, you will
  send your input to a page called "act.php".

17
Example
lthtmlgt ltheadgtlt/headgt ltbodygt ltform
action"MAILTOkalkin_at_solo.ee" method"post"
enctype"text/plain"gt lth3gtThis form sends an
e-mail.lt/h3gt Nameltinput type"text" name"name"
value"your name" size"20"gt ltbrgt Mailltinput
type"text" nameemail" valueyour email"
size"20"gt ltbrgt Commentltinput type"text"
name"comment" valueyour comment" size"40"gtltbr
/gt ltinput type"submit" value"Send"gt lt/formgt lt/bo
dygt lt/htmlgt