Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTML Form Part 1

  • Login to see the comments

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

×