Your SlideShare is downloading. ×
  • Like
HTML Form Part 1
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

HTML Form Part 1

  • 623 views
Published

 

Published in Education , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
623
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
14
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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