HTML Form Part 1

1,001 views

Published on

Published in: Education, Technology
  • Be the first to comment

  • Be the first to like this

HTML Form Part 1

  1. 1. FormsTutorial 6 – Part A 1
  2. 2. Forms• HTML language creates the form elements• Data entered in the form element can only be retrieved or processed through a program or script running on a Web Server 2
  3. 3. Server technologies that work with HTML forms - CGI / PERL - ASPX - PHP - JSP 3
  4. 4. 4
  5. 5. The form tag<form name=“my_form” id=“my_form”> form elements here – HTML allowed here also</form> 5
  6. 6. The form tag<form name=“xyz” id=“xyz” action=“script “ method= “post or get“ enctype=“ “ target=“ “></form> 6
  7. 7. input tag<input type=“type” identifies the element name=“name” to the server id=“id” used for CSS /JavaScript value=“user entry” /> 7
  8. 8. input tag<input type=“type” name=“name” id=“id” value=“some_value” >Every element has a “name” to identify itThe user enters a “value” 8
  9. 9. name / value pairs are sent to theserver when the form is submitted 9
  10. 10. Text box<input type=”text" name=“last_name" id=“last_name” > value – what the user enters 10
  11. 11. Text box Attributes<input type=”text" name=“last_name " id=“last_name " size="number of characters “ maxlength=" maximum_characters “ > 11
  12. 12. label tag • Associates a description with a form element • Used for accessibility and JavaScript <label for=“id”> some text </label> 12
  13. 13. label tag 13
  14. 14. radio buttons / option buttons<input type=”radio" name=“name" id=“id" value= “value“ > 14
  15. 15. radio buttons<input type=”radio" name=“name" id=“id" Must code in a value The value value= “value“ > identifies the choice 15
  16. 16. radio buttons Occur in groups Must have the same name Must have different values Mutually exclusive 16
  17. 17. Checked by Default<input type=”radio" checked = “checked” /><input type=”radio" checked > 17
  18. 18. check box<input type=”checkbox" name=“name" id=“id" Must code in a value The value value= „value“ > identifies the choice 18
  19. 19. check boxes Occur in groups Can have the same name Must have different values Can check all choices 19
  20. 20. check box group – same name<input type=”checkbox" name=“os” id=“os1” value= “WinXP“ ><input type=”checkbox" name=“os” id=“os2” value= “Windows2000“ > 20
  21. 21. check box group – different name<input type=”checkbox" name=“os1” id=“os1” value= “WinXP“ ><input type=”checkbox" name=“os2” id=“os2” value= “Windows2000“ > 21
  22. 22. Force a check<input type=”checkbox" checked = “checked” /><input type=”checkbox" checked > 22
  23. 23. missing value attribute<input type=”checkbox" name=“xyz” id=“xyz” />If checked – will return “on” as the “value” 23
  24. 24. select / drop down list Has one name attribute Must have different values “value” attribute is optional Can check multiple choices 24
  25. 25. A Selection List<select name=“job“ id=“job”> Text will be “value” <option>Please select one</option> <option>Programmer </option> <option>Database Manager </option></select> 25
  26. 26. A Selection List<select name=“job“ id=“job”><option value="none"> Please select one</option><option value ="pgmr">Programmer </option><option value =“dbm">Database Manager </option></select> 26
  27. 27. A Multiple Selection List<select name=“job“ id=“job” multiple=“multiple”> <option>CEO</option> All options <option>Director</option> are shown <option>Supervisor</option></select> 27
  28. 28. Multiple Selection List with set options visible<select name=“job“ id=“job” multiple size=“3”> <option>CEO</option> 3 options are shown <option>Director</option> <option>Supervisor</option></select> 28
  29. 29. selected by default Automatically<select name=“job“ id=“job”> selected<option value="none"> Please select one</option></select> 29
  30. 30. force a choice<option value ="pgmr” selected=“selected”> Programmer</option><option value ="pgmr” selected> Programmer</option> 30
  31. 31. Option Groups <optgroup> 31
  32. 32. Textarea element Multi-line text box Uses fixed width font Sized using rows and columns 32
  33. 33. Textarea <textarea><textarea rows="4" cols="50" name="" id=""></textarea> 33
  34. 34. fieldset and legend elements Logically groups elements Draws a box The <legend> tag defines a caption for the fieldset element 34
  35. 35. <fieldset> <legend> </legend> form elements</fieldset> 35
  36. 36. tabindex / accesskey attributes Assigns a tabbing order Assigns a keyboard shortcut 36
  37. 37. tabindex / accesskey attributes <label for=“name">Name (Alt-n):</label> <input type="text“ name=“name“ id="name“ tabindex="1" accesskey="n"> 37
  38. 38. readonly / disabled attributes<input type=” ” readonly=”readonly” /><input type=” ” disabled> 38
  39. 39. Other input elements<input type=”password" ><input type=”hidden" ><input type=”image" ><input type=”file" ><input type=”submit" ><input type=”reset" > 39
  40. 40. type=“hidden”hidden fields – used to send information to server 40
  41. 41. type=“file” 41
  42. 42. type=“image”<input type=“image” src =“photo.jpg” > 42
  43. 43. Three Types of Buttons• Command button – used with JavaScript• Submit button• Reset button 43
  44. 44. Submit Button<input type=”submit" name=“" Not really needed id=““ value= „what_it_says” > Calls the action of the form 44
  45. 45. Reset Reset Button<input type=”reset" name=“" Not really needed id=““ value= „what_it_says“ > Clears all the values in the form 45
  46. 46. Click Me Command Button<input type=”button" name=“" id=““ value= „what_it_says“ > Used with JavaScript 46

×