Advanced HTML

1
Advanced HTML
2
(No Transcript)
3

• Forms
• A form is an area that can contain form elements.
• Form elements are elements that allow the user to
  enter information
• text fields,
• textarea fields,
• drop-down boxes,
• radio buttons,
• checkboxes, etc.
• A form is defined with the ltformgt tag.

4
Text Fields Text fields are used when you want
the user to type letters, numbers, etc. in a
form. ltformgt First name ltinput type"text"
name"firstname"gt ltbrgt Last name ltinput
type"text" name"lastname"gt lt/formgt
5
Text Fields

• Password
• ltformgt
• Username
• ltinput type"text" name"user"gt
• ltbrgt
• Password
• ltinput type"password" name"password"gt
• lt/formgt

6
Radio Buttons

• Radio Buttons are used when you want the user to
  select one of a limited number of choices.
• ltformgt
• ltinput type"radio" name"sex" value"male"gt
• Male ltbrgt
• ltinput type"radio" name"sex"
  value"female"gt
• Female
• lt/formgt

7
Checkboxes

• Checkboxes are used when you want the user to
  select one or more options of a limited number of
  choices.
• ltformgt
• ltinput type"checkbox" name"bike"gt I have a bike
  
• ltbrgt
• ltinput type"checkbox" name"car"gt I have a car
• lt/formgt

8
Drop Down Box

• ltformgt
• ltselect name"cars"gt
• ltoption value"volvo"gtVolvolt/optiongt
• ltoption value"saab"gtSaablt/optiongt
• ltoption value"fiat" selected"selected"gtFiatlt/
  optiongt
• ltoption value"audi"gtAudilt/optiongt
• lt/selectgt
• lt/formgt

9
Button

• ltformgt
• ltinput type"button" value"Hello world!"gt
• lt/formgt

10
Textarea

• lttextarea rows"2" cols"20"gtThe cat was playing
  in the garden. Suddenly a dog showed up.....
• lt/textareagt

11
Label

• ltform name"input" action""gtltinput
  type"radio" name"sex" id"male" /gtltlabel
  for"male"gtMalelt/labelgtltbr /gtltinput
  type"radio" name"sex" id"female" /gtltlabel
  for"female"gtFemalelt/labelgtlt/formgt

You can also click on labels.
12
Fieldset Around Data

• ltfieldsetgt
• ltlegendgt
• Health information
• lt/legendgt
• ltformgt
• Height ltinput type"text" size"3"gt
• Weight ltinput type"text" size"3"gt
• lt/formgt
• lt/fieldsetgt

13
Action Attribute and Submit Button

• The Form's 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.
• ltform name"input" action"html_form_action.asp"
  method"get"gt
• Username ltinput type"text" name"user"gt
• ltinput type"submit" value"Submit"gt
• lt/formgt

14

• ltform action"MAILTOmkoyuncu_at_atilim.edu.tr"
  method"post" enctype"text/plain"gt
• lth3gtThis form sends an e-mail.lt/h3gt
• Nameltbrgt
• ltinput type"text" name"name"
  value"yourname" size"20"gt
• ltbrgt
• Mailltbrgt
• ltinput type"text" name"mail"
  value"yourmail" size"20"gt
• ltbrgt
• Commentltbrgt
• ltinput type"text" name"comment"
  value"yourcomment" size"40"gt
• ltbrgtltbrgt
• ltinput type"submit" value"Send"gt
• ltinput type"reset" value"Reset"gt
• lt/formgt

15
Required Attributes (Form)
16
Optional Attributes (Forms)
17
Optional Attributes (Input)
18
Optional Attributes (Input)
19
(No Transcript)