Creating forms
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Creating forms

on

  • 9,453 views

The basics of creating HTML forms. From my Fundamentals of Interactive Design class.

The basics of creating HTML forms. From my Fundamentals of Interactive Design class.

Statistics

Views

Total Views
9,453
Views on SlideShare
1,317
Embed Views
8,136

Actions

Likes
0
Downloads
1
Comments
0

2 Embeds 8,136

http://planetoftheweb.com 7026
http://www.planetoftheweb.com 1110

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

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
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Creating forms Presentation Transcript

  • 1. CREATING FORMS by Ray Villalobos
  • 2. WHAT ARE FORMS?
  • 3. WHAT ARE FORMS?• Create interactions with server
  • 4. WHAT ARE FORMS?• Create interactions with server• Compound tag
  • 5. WHAT ARE FORMS?• Create interactions with server• Compound tag• Accept user input in various ways
  • 6. FORM TAG <form action="formprocessor.php"> First name: <input type="text" name="fname"><br> <input type="submit"> </form>
  • 7. FORM TAG <form action="formprocessor.php"> First name: <input type="text" name="fname"><br> <input type="submit"> </form>• Action Parameters tells browser where to send data
  • 8. FORM TAG <form action="formprocessor.php"> First name: <input type="text" name="fname"><br> <input type="submit"> </form>• Action Parameters tells browser where to send data• Method tells browser to pass data as URL (GET) or in the background(POST)
  • 9. FORM TAG <form action="formprocessor.php"> First name: <input type="text" name="fname"><br> <input type="submit"> </form>• Action Parameters tells browser where to send data• Method tells browser to pass data as URL (GET) or in the background(POST)• Enctype specifies how to encode the data
  • 10. THE GET METHOD
  • 11. THE GET METHOD• Passes data as a URL
  • 12. THE GET METHOD• Passes data as a URL• Name/Value Pairs (? then name=values separated by &)
  • 13. THE GET METHOD• Passes data as a URL• Name/Value Pairs (? then name=values separated by &)• Useful for bookmarking
  • 14. THE GET METHOD• Passes data as a URL• Name/Value Pairs (? then name=values separated by &)• Useful for bookmarking• Limit to how much you can place in URL
  • 15. THE GET METHOD• Passes data as a URL• Name/Value Pairs (? then name=values separated by &)• Useful for bookmarking• Limit to how much you can place in URL• Not for sensitive info
  • 16. THE POST METHOD
  • 17. THE POST METHOD• Sends the data as an HTTP transaction
  • 18. THE POST METHOD• Sends the data as an HTTP transaction• Cannot be bookmarked
  • 19. THE POST METHOD• Sends the data as an HTTP transaction• Cannot be bookmarked• More secure than GET
  • 20. THE POST METHOD• Sends the data as an HTTP transaction• Cannot be bookmarked• More secure than GET• Does not have size limitations
  • 21. ENCTYPE Value Description Default. Characters encoded before sent (spaces converted toapplication/x-www-form-urlencoded "+" symbols, special characters converted to ASCII/HEX)multipart/form-data No characters are encoded. Required for file uploadstext/plain Spaces are converted to "+" symbols, nothing else
  • 22. ENCTYPE• Defines now form data is encoded for sending to server Value Description Default. Characters encoded before sent (spaces converted to application/x-www-form-urlencoded "+" symbols, special characters converted to ASCII/HEX) multipart/form-data No characters are encoded. Required for file uploads text/plain Spaces are converted to "+" symbols, nothing else
  • 23. ENCTYPE• Defines now form data is encoded for sending to server• Only needed if method is POST Value Description Default. Characters encoded before sent (spaces converted to application/x-www-form-urlencoded "+" symbols, special characters converted to ASCII/HEX) multipart/form-data No characters are encoded. Required for file uploads text/plain Spaces are converted to "+" symbols, nothing else
  • 24. ENCTYPE• Defines now form data is encoded for sending to server• Only needed if method is POST• Can be one of three Value Description Default. Characters encoded before sent (spaces converted to application/x-www-form-urlencoded "+" symbols, special characters converted to ASCII/HEX) multipart/form-data No characters are encoded. Required for file uploads text/plain Spaces are converted to "+" symbols, nothing else
  • 25. INPUT name: <input name="fname"><br />
  • 26. INPUT name: <input name="fname"><br />• Most common and versatile form element
  • 27. INPUT name: <input name="fname"><br />• Most common and versatile form element• Manydifferent types: text, checkbox, password, radio, file, hidden, image, submit, reset,
  • 28. INPUT name: <input name="fname"><br />• Most common and versatile form element• Manydifferent types: text, checkbox, password, radio, file, hidden, image, submit, reset,• HTML5 & Mobile: color, date, datetime, datetime-local, email, month, number, range, search, tel, time, url, week
  • 29. COMMON INPUT ATTRIBUTES
  • 30. COMMON INPUT ATTRIBUTES • name/value: the name and values that will be sent to the action URL
  • 31. COMMON INPUT ATTRIBUTES • name/value: the name and values that will be sent to the action URL • checked: on checkboxes/radio buttons, this displays checkbox or radio as pre-selected
  • 32. COMMON INPUT ATTRIBUTES • name/value: the name and values that will be sent to the action URL • checked: on checkboxes/radio buttons, this displays checkbox or radio as pre-selected • src: on input type image the URL of the image
  • 33. COMMON INPUT ATTRIBUTES • name/value: the name and values that will be sent to the action URL • checked: on checkboxes/radio buttons, this displays checkbox or radio as pre-selected • src: on input type image the URL of the image • HTML5: autofocus, autocomplete, placeholder, required
  • 34. LABEL <label for="myname">Male</label> <input id="myname" name="name" /><br>
  • 35. LABEL <label for="myname">Male</label> <input id="myname" name="name" /><br>• Every field should have a label
  • 36. LABEL <label for="myname">Male</label> <input id="myname" name="name" /><br>• Every field should have a label• Helps with Usability, mobile devices
  • 37. LABEL <label for="myname">Male</label> <input id="myname" name="name" /><br>• Every field should have a label• Helps with Usability, mobile devices• for attribute ties the text to the input field
  • 38. LABEL <label for="myname">Male</label> <input id="myname" name="name" /><br>• Every field should have a label• Helps with Usability, mobile devices• for attribute ties the text to the input field• Makes label activate input field
  • 39. TEXTAREA <textarea name="comments" rows="4" cols="50"></textarea>
  • 40. TEXTAREA <textarea name="comments" rows="4" cols="50"></textarea>• Multi line text input
  • 41. TEXTAREA <textarea name="comments" rows="4" cols="50"></textarea>• Multi line text input• Beginning and end tag.
  • 42. TEXTAREA <textarea name="comments" rows="4" cols="50"></textarea>• Multi line text input• Beginning and end tag.• maxlength: max # of characters allowed
  • 43. TEXTAREA <textarea name="comments" rows="4" cols="50"></textarea>• Multi line text input• Beginning and end tag.• maxlength: max # of characters allowed• Youcan use the rows and cols attribute, but usually better to define size with CSS.
  • 44. SELECT <select name="referral"> <option>Choose...</option> <option value="fb">Facebook</option> </select>
  • 45. SELECT <select name="referral"> <option>Choose...</option> <option value="fb">Facebook</option> </select>• Drop down list
  • 46. SELECT <select name="referral"> <option>Choose...</option> <option value="fb">Facebook</option> </select>• Drop down list• <option> tags define individual options for dropdown
  • 47. SELECT <select name="referral"> <option>Choose...</option> <option value="fb">Facebook</option> </select>• Drop down list• <option> tags define individual options for dropdown• Name within <option> is label, not value
  • 48. SELECT <select name="referral"> <option>Choose...</option> <option value="fb">Facebook</option> </select>• Drop down list• <option> tags define individual options for dropdown• Name within <option> is label, not value• Value attribute on option tag sends value to action URL with name from select tag.
  • 49. SELECT <select name="referral"> <option>Choose...</option> <option value="fb">Facebook</option> </select>• Drop down list• <option> tags define individual options for dropdown• Name within <option> is label, not value• Value attribute on option tag sends value to action URL with name from select tag.• Multiple attribute lets you select multiple items at once
  • 50. BUTTON <button type="button">Click Me!</button>
  • 51. BUTTON <button type="button">Click Me!</button>•A clickable button
  • 52. BUTTON <button type="button">Click Me!</button>•A clickable button• Almost exactly like input type=submit
  • 53. BUTTON <button type="button">Click Me!</button>•A clickable button• Almost exactly like input type=submit• type can be button, reset or submit
  • 54. BUTTON <button type="button">Click Me!</button>•A clickable button• Almost exactly like input type=submit• type can be button, reset or submit• Can use outside of forms
  • 55. FIELDSET
  • 56. FIELDSET• Groups form elements togethers
  • 57. FIELDSET• Groups form elements togethers• Drawsa box around related elements in most browsers
  • 58. FIELDSET• Groups form elements togethers• Drawsa box around related elements in most browsers• Youuse the <legend> tag to define the fieldsets title
  • 59. THE END