HTML Form Part 1
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

HTML Form Part 1

on

  • 616 views

 

Statistics

Views

Total Views
616
Views on SlideShare
616
Embed Views
0

Actions

Likes
0
Downloads
13
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

HTML Form Part 1 Presentation 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