sa st Forms

1
??sa???? st?? Forms
2
??sa???? st?? ???t?ta

• T? e??a? ?? Forms
• ??? ???s?µ?p?????ta? st? web
• Mark-up e?t???? ??a e?sa???? forms
• ?e? ?a µ???s??µe ??a µe??d??? s????af?? CGI
  scripts p?? ???s?µ?p?????ta? µe forms

3
?e?? forms

• ?? Forms ? ?p?ß??? p????f????? st?? web
  administrator µe
• ??a?s?a ?e?µ????, p???t?a, checkboxes, menu ?a?
  ?????µe?e? ??ste?
• ??. eta???e? t?? ???s?µ?p????? ??a pa?a??e??e?,
  d?µ?s??p?se??, ta?t?p???s? ???st??, ?a? ??a
  pa???? s?????? ap? t??? ???ste?
• ? form s?????e? st???e?a ap? t? ???st?
• G?a t?? epe?e??as?a ??e???eta? t? Common Gateway
  Interface (CGI)
• ?e? ??e???este CGI ??a t?? ap??? forms p?? ?a
  d??µe st? µ???µa

4
Form st?? browser
5
?a??de??µa, form µe p?a?s?a ?e?µ????

• M?a ap?? form µe ??a p?a?s?a ?e?µ???? (text
  boxes) µp??e? ?a ???e? ?? e???
• ltform method"post" action"mailtouser_at_domain.com
  " enctype"text/plain"gt
• Enter first name
• ltinput type"text" name"first" size"15" /gt
• ltbr /gt
• Enter last name
• ltinput type"text" name"last" size"20" /gt
• ltbr /gtltbr /gt
• ltinput type"submit" value"Send" /gt
• ltinput type"reset" value"clear" /gt
• lt/formgt

6
?pe?????ta? ta tags form, post, action

• ltformgtlt/formgt
• ?? ßas??? form tags ??e? st?? browser ?a
  ep?de??e? µ?a form.
• ? t?p?? t?? ped??? µ?sa st?? form e?a?t?ta? ap?
  ta st???e?a p?? pe????e???ta? µeta?? t?? d??
  pa?ap??? tags
• method"post"
• ??e? st?? browser p?? ?a ste??e? t?? p????f???a
  st?? web server? Post epe?e??as?a ??aµµ? p???
  ??aµµ?.
• action"url ? mailto"
• ?da???? t? URL p?? ß??s?eta? t? CGI script (p.?.
  www.domain.com/cgi-bin/orderform.pl
• ??a??a?t??? ? d?e????s? email st?? ?p??a ?a p?e?
  ? p????f???a
• ?a ded?µ??a ?a p??e st? ?e?µe?? t?? µ???µat??

7
?pe?????ta? ta tags enctype

• enctype"text/plain"
• ??? ?a ?p?ß?????? ta ded?µ??a
• ?p?ß??? se email ? text/plain
• ? form p?? ft???aµe ??t?e? ap? ??a ???st? ?a
  ß??e? ???µa ?a? ep???µ? ?a? µet? ?a pat?se? t?
  submit
• St? email ?a ??f?e?
• firstRodia
• lastRascolnikov
• ??? t? enctype pa?a??f?e?, ta ded?µ??a ?a sta????
  se µ?a ??aµµ? ??
• firstRalphlastPhillips.

8
?e??ss?te?a Text boxes

• ltinput type"text" name"fieldname" size"15" /gt
• size"number"
• ???e??? ped??? textbox15 ?a?a?t??e??15
  ?a?a?t??e? eµfa?????ta??de? pe??????e? a?t??? p??
  µp????? ?a e?sa?????
• value"text"
• eµfa???eta? ?e?µe?? st? text box.
• maxlength"number"
• ????st?? a???µ?? ?a?a?t???? p?? µp??e? ?a
  e?sa??e? st? text box

9
??a?s?a ?e?µ???? ??a ??d????? (passwords)

• ltinput type"password" name"password" size"10"
  /gt
• ?a p?a?s?a ??d???? (password boxes) ep?t??p???
  t?? e?sa???? ??d????
• ??t?? ?a epe?e??aste? ap? CGI script ??a ?a
  ep?t???e? ? ??? p??sßas? ???st?
• St? password box eµfa?????ta? aste??s??? () ??a
  asf??e?a
• ?????st? asf??e?a ??at? t? password ?p?ß???eta?
  st?? sever ?? ap?? ?e?µe??
• ?p???? ??e? p??sßas? st? d??t?? µp??e? ?a de? ta
  passwords

10
Checkbox

• Checkboxes, radio buttons, ?a? µe??? ep?t??p???
  st? ???st? ?a ep????e? ap? ??a ?at?????
• ?? ?at????d?a ??eteltbr /gt
• ltinput type"checkbox" name"bird" /gtp????? ltbr
  /gt
• ltinput type"checkbox" name"cat" /gt??te? ltbr /gt
• ltinput type"checkbox" name"dog" /gts????? ltbr /gt
• ltinput type"checkbox" name"rept" /gte?pet? ltbr
  /gt
• ltinput type"checkbox" name"fish" /gt????a ltbr /gt
• checked"checked
• ? ?d??t?ta checked se ??a st???e?a e?s?d??
  (input element) s?µa??e? ?t? ????µe e????sµ??
  ep?????
• ?p??e? ?a ???s?µ?p????e? se p???? text boxes a???
  µ??? se ??a radio button

11
Checkbox
12
Radio Buttons

• ?a Radios buttons e??a? s?ed?? ?p?? ta check
  boxes
• ?µ?? sta radio buttons ? ???st?? d?a???e? µ???
  ??a ap? t?? ep?????? p?? ??e?
• sta Checkboxes ? ???st?? µp??e? ?a ep????e?
  pe??ss?te?a st???e?a
• ?a radio buttons ??a t? ?d?? ??µa p??pe? ?a ?????
  t? ?d?? ???µa a??? d?af??et???? ?d??t?te?
• The different radio buttons for the same topic
  must all have the same name, but the value
  attributes are all different

13
Radio buttons
14
Radio buttons, ??d??a?

• Se p??? pa???t?µa t?? ?a?.??p??? ??ete ta
  pe??ss?te?a µa??µata
• ltbr /gt
• ltinput type"radio" name"campus" value"central"
  /gt
• ?e?t???? ltbr /gt
• ltinput type"radio" name"campus" value"latsia"
  /gt
• ?ats?? ltbr /gt
• ltinput type"radio" name"campus" value"panep"/gt
• ?a?ep?st?µ???p????ltbr /gt

15
S???µµ??a a??e?a

• H form ??a attachments ?a ep?t???e? st?? ???st?
  ?a ste??e? a??e??
• ??t? ??e???eta? ?a? CGI script
• ?p?ß??? ß????af????
• ltinput type"file" name"resume" /gt

16
?p?ß??? ?a? ?a?a??sµ?? (submit and reset)

• ???e form p??pe? ?a pa???e? st? ???st? t?
  d??at?t?ta ?a ?p?ß???e? p????f???a?
• ?p?s?? ???s?µ? e??a? ?a? ? ?a?a??sµ??
• ltinput type"submit" value"Send Info" /gt
• ltinput type"reset" value"Clear Form" /gt

17
?p?ß??? µe e????a

• ???s? e????a? ??a t? p???t?? ?p?ß????ta?????e? µe
  t? site
• To e????sµ?? p???t?? e??a? ????
• G?a pa??de??µa µp??e?te ?a ??ete t?
• ltinput type"image" name"feedback"
  src"image.gif" width119 height22 border"0"
  alt"send info" /gt

18
????t?a

• ?p??e?te ?a ??ete p???t?a
• S?????? ?p???e? ap? ??t? ??a CGI script p??
  epe?e????eta? t?? p????f???a
• ??a??a?t??? ???s?µ?p?????ta? ??a p?????s? ?ta?
  s??d?????ta? µe µe t? onClick t?? JavaScript
• ltinput type"button" name"home" value"Go Home"
  onClick"parent.location'http//www.cs.ucy.ac.cy'
  " /gt
• ?p??e?te ?a ft???ete µ?a ???????? toolbar ap?
  buttons, ?p?? t? ???e button ?a ??e? ?a? d??? t??
  e????a
• ltbutton nameucyink" value"usyhome"
  type"button"
• onClick"parent.location'http//www.ucy.ac.cy'"gt
• ltimg srcucy.gif" /gtlt/buttongt
• ?a p???t?a de? e??a? apa?a?t?t? ?a ß??s???ta?
  µ?sa se form

19
?e??? (s????e?a)

• ?a drop-down menu ep?t??p??? ep????? ap? ??a menu
• Ta drop down ?ata?aµß????? ????te?? ???? ap? ta
  checkboxes ? ta radio buttons
• Ta Drop-down de? ???s?µ?p????? t? input element
• ??t??eta ???s?µ?p????? t? select ?a? t? option
  element
• ltselect name"schools" size"1"gt
• ltoption value"usf" label?µ?µa ?????f??????"gt
• ?µ?µa ?????f?????? lt/optiongt
• ltoption value"ucf" label" ?µ?µa ?a??µat???? "gt
• ?µ?µa ?a??µat????lt/optiongt
• ltoption value"uf" label?µ?µa ???????a?"gt
• ?µ?µa ???????a?lt/optiongt
• lt/selectgt

20
?a??de??µa ?e??? (s????e?a)
21
?e??? (s????e?a)

• name"text"
• ???µa µe??? ep??????
• size"number"
• ????µ?? ep?????? p?? ?a eµfa?????ta? p?? t??
  e?e???p???s?? t?? µe???
• multiple"multiple
• St? element select ?etat??pe? t? µe??? ap? drop
  down se scrolling
• selected"selected"
• ??sa st? option element.
• ? e????sµ?? ep?????
• ??? t? multiple attribute de? ???s?µ?p????e? t?te
  µ??? ??a element µp??e? ?a ??e? t?? selected
• ?? de? ???s?µ?p????e? ? selected t?te ? p??t?
  ep????? e??a? ? e????sµ??.
• Ea? t? multiple attribute e??a? µ?sa se ??a
  select element, ? selected attribute µp??e? ?a
  ?p???e? se p????? ep??????
• value"text"
• St? option element. ???sd?????e? t? option p??
  epe???? ?ta? ?p?ß???e? ? form.
• ???e option d?af??et??? t?µ?
• label"text"
• St? option element. ???a??et???. ?? Browsers will
  ?a t? de????? ?? option label.

22
?e????? ?e?µ????

• ?? ???ste? µp????? ?a ?p?ß?????? ?e?µe?? µe t?
  text type input
• G?a pe??ss?te?? ???? ?p???e? t? text area
• lttextarea name"comment" rows"5" cols"50"gt
• Type your comment then click the submit button.
• lt/textareagt

23
Tabs

• St?? web form ????s? ap? ped?? se ped?? µe t? Tab
• ?a ped?a t?? form ?a e?e???p??????? µe t? se???
  p?? ta ??ete ?ata????e? st? xhtml ?e?µe??
• ????, µp??e?te ?a a????ete t? se??? µe t?
  tabindex attribute
• ??t? µp??e? ?a efa?µ?ste? se p??a?e? a? ? ???st??
  p??pe? ?a ß??e? p????f???e? a?? st???
• ltinput tabindex"1" type"text" name"last"
  size"20" /gt
• ltinput tabindex"2" type"text" name"first"
  size"15" /gt
• ltinput tabindex"3" type"submit" /gt
• ?a ped?a ?a e?e???p??????? a?????a µe t? se???
  t?? t?µ?? tabindex
• ?p? t? 1?3

24
(No Transcript)
25
??d??a?, p??????µe??? form

• ltform method"post" action"mailtouserid_at_youremai
  l.com" enctype"text/plain"gt
• Last name, First name, Middle Initialltbr /gt
• ltinput type"text" name"last" size"20" /gt
• ltinput type"text" name"first" size"15" /gt
• ltinput type"text" name"mi" size"1"
  maxlength"1" /gt
• ltbr /gtltbr /gt
• Web Addressltbr /gt
• ltinput type"text" name"web" size"40"value"http
  //" /gt
• ltbr /gtltbr /gt
• What are your hobbies?ltbr /gt
• ltinput type"checkbox" name"dancing" /gtDancing
• ltinput type"checkbox" name"swimming" /gtSwimming
• ltinput type"checkbox" name"inline" /gtInline
  Skating
• ltinput type"checkbox" name"reading" /gtReading
• ltbr /gtltbr /gt

• What is your marital status?ltbr /gt
• ltinput type"radio" name"status"
• value"decline" checked"checked" /gtDecline to
  answer
• ltinput type"radio" name"status"
• value"single" /gtSingle
• ltinput type"radio" name"status"
• value"married" /gtMarried
• ltinput type"radio" name"status"
• value"partner" /gtLiving with Partner
• ltbr /gtltbr /gt
• Gender
• ltselect name"gender" size"1"gt
• ltoption value"decline"gtDeclinelt/optiongt
• ltoption value"female"gtFemalelt/optiongt
• ltoption value"male"gtMalelt/optiongt
• lt/selectgt
• ltbr /gtltbr /gt
• Please leave a commentltbr /gt
• lttextarea name"comment" rows"5" cols"35"gt
  lt/textareagt

26

• ltinput tabindex"1" type"text" name"last"
• size"20" /gt
• ltinput tabindex"2" type"text" name"first"
• size"15" /gt
• ltinput tabindex"3" type"submit" /gt