CREATING FORMS  by Ray Villalobos
WHAT ARE FORMS?
WHAT ARE FORMS?• Create   interactions with server
WHAT ARE FORMS?• Create   interactions with server• Compound     tag
WHAT ARE FORMS?• Create   interactions with server• Compound     tag• Accept   user input in various ways
FORM TAG           <form action="formprocessor.php">             First name: <input type="text" name="fname"><br>         ...
FORM TAG                                    <form action="formprocessor.php">                                      First n...
FORM TAG                                    <form action="formprocessor.php">                                      First n...
FORM TAG                                    <form action="formprocessor.php">                                      First n...
THE GET METHOD
THE GET METHOD• Passes   data as a URL
THE GET METHOD• Passes   data as a URL• Name/Value Pairs (? then name=values separated by &)
THE GET METHOD• Passes   data as a URL• Name/Value Pairs (? then name=values separated by &)• Useful   for bookmarking
THE GET METHOD• Passes   data as a URL• Name/Value Pairs (? then name=values separated by &)• Useful   for bookmarking• Li...
THE GET METHOD• Passes   data as a URL• Name/Value Pairs (? then name=values separated by &)• Useful   for bookmarking• Li...
THE POST METHOD
THE POST METHOD• Sends   the data as an HTTP transaction
THE POST METHOD• Sends   the data as an HTTP transaction• Cannot   be bookmarked
THE POST METHOD• Sends   the data as an HTTP transaction• Cannot   be bookmarked• More    secure than GET
THE POST METHOD• Sends   the data as an HTTP transaction• Cannot    be bookmarked• More    secure than GET• Does    not ha...
ENCTYPE             Value                                     Description                                    Default. Char...
ENCTYPE• Defines now form data is encoded for sending to server              Value                                     Desc...
ENCTYPE• Defines now form data is encoded for sending to server• Only         needed if method is POST               Value ...
ENCTYPE• Defines now form data is encoded for sending to server• Only         needed if method is POST• Can          be one...
INPUT   name: <input name="fname"><br />
INPUT                  name: <input name="fname"><br />• Most   common and versatile form element
INPUT                    name: <input name="fname"><br />• Most   common and versatile form element• Manydifferent types: ...
INPUT                    name: <input name="fname"><br />• Most   common and versatile form element• Manydifferent types: ...
COMMON INPUT ATTRIBUTES
COMMON INPUT ATTRIBUTES • name/value: the   name and values that will be sent to  the action URL
COMMON INPUT ATTRIBUTES • name/value: the   name and values that will be sent to  the action URL • checked: on            ...
COMMON INPUT ATTRIBUTES • name/value: the   name and values that will be sent to  the action URL • checked: on            ...
COMMON INPUT ATTRIBUTES • name/value: the   name and values that will be sent to  the action URL • checked: on            ...
LABEL   <label for="myname">Male</label>        <input id="myname" name="name" /><br>
LABEL               <label for="myname">Male</label>                               <input id="myname" name="name" /><br>• ...
LABEL               <label for="myname">Male</label>                               <input id="myname" name="name" /><br>• ...
LABEL                <label for="myname">Male</label>                                <input id="myname" name="name" /><br>...
LABEL                <label for="myname">Male</label>                                <input id="myname" name="name" /><br>...
TEXTAREA   <textarea name="comments" rows="4" cols="50"></textarea>
TEXTAREA                    <textarea name="comments" rows="4" cols="50"></textarea>• Multi   line text input
TEXTAREA                     <textarea name="comments" rows="4" cols="50"></textarea>• Multi   line text input• Beginning ...
TEXTAREA                     <textarea name="comments" rows="4" cols="50"></textarea>• Multi   line text input• Beginning ...
TEXTAREA                     <textarea name="comments" rows="4" cols="50"></textarea>• Multi   line text input• Beginning ...
SELECT   <select name="referral">           <option>Choose...</option>           <option value="fb">Facebook</option>     ...
SELECT      <select name="referral">                       <option>Choose...</option>                       <option value=...
SELECT                        <select name="referral">                                         <option>Choose...</option> ...
SELECT                         <select name="referral">                                          <option>Choose...</option...
SELECT                         <select name="referral">                                           <option>Choose...</optio...
SELECT                           <select name="referral">                                             <option>Choose...</o...
BUTTON   <button type="button">Click Me!</button>
BUTTON                 <button type="button">Click Me!</button>•A   clickable button
BUTTON                        <button type="button">Click Me!</button>•A   clickable button• Almost   exactly like input t...
BUTTON                         <button type="button">Click Me!</button>•A   clickable button• Almost   exactly like input ...
BUTTON                         <button type="button">Click Me!</button>•A   clickable button• Almost    exactly like input...
FIELDSET
FIELDSET• Groups   form elements togethers
FIELDSET• Groups   form elements togethers• Drawsa box around related elements in most browsers
FIELDSET• Groups   form elements togethers• Drawsa box around related elements in most browsers• Youuse the <legend> tag t...
THE END
Upcoming SlideShare
Loading in...5
×

Creating forms

9,618

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
9,618
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \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

    1. 1. CREATING FORMS by Ray Villalobos
    2. 2. WHAT ARE FORMS?
    3. 3. WHAT ARE FORMS?• Create interactions with server
    4. 4. WHAT ARE FORMS?• Create interactions with server• Compound tag
    5. 5. WHAT ARE FORMS?• Create interactions with server• Compound tag• Accept user input in various ways
    6. 6. FORM TAG <form action="formprocessor.php"> First name: <input type="text" name="fname"><br> <input type="submit"> </form>
    7. 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. 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. 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. 10. THE GET METHOD
    11. 11. THE GET METHOD• Passes data as a URL
    12. 12. THE GET METHOD• Passes data as a URL• Name/Value Pairs (? then name=values separated by &)
    13. 13. THE GET METHOD• Passes data as a URL• Name/Value Pairs (? then name=values separated by &)• Useful for bookmarking
    14. 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. 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. 16. THE POST METHOD
    17. 17. THE POST METHOD• Sends the data as an HTTP transaction
    18. 18. THE POST METHOD• Sends the data as an HTTP transaction• Cannot be bookmarked
    19. 19. THE POST METHOD• Sends the data as an HTTP transaction• Cannot be bookmarked• More secure than GET
    20. 20. THE POST METHOD• Sends the data as an HTTP transaction• Cannot be bookmarked• More secure than GET• Does not have size limitations
    21. 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. 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. 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. 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. 25. INPUT name: <input name="fname"><br />
    26. 26. INPUT name: <input name="fname"><br />• Most common and versatile form element
    27. 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. 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. 29. COMMON INPUT ATTRIBUTES
    30. 30. COMMON INPUT ATTRIBUTES • name/value: the name and values that will be sent to the action URL
    31. 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. 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. 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. 34. LABEL <label for="myname">Male</label> <input id="myname" name="name" /><br>
    35. 35. LABEL <label for="myname">Male</label> <input id="myname" name="name" /><br>• Every field should have a label
    36. 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. 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. 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. 39. TEXTAREA <textarea name="comments" rows="4" cols="50"></textarea>
    40. 40. TEXTAREA <textarea name="comments" rows="4" cols="50"></textarea>• Multi line text input
    41. 41. TEXTAREA <textarea name="comments" rows="4" cols="50"></textarea>• Multi line text input• Beginning and end tag.
    42. 42. TEXTAREA <textarea name="comments" rows="4" cols="50"></textarea>• Multi line text input• Beginning and end tag.• maxlength: max # of characters allowed
    43. 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. 44. SELECT <select name="referral"> <option>Choose...</option> <option value="fb">Facebook</option> </select>
    45. 45. SELECT <select name="referral"> <option>Choose...</option> <option value="fb">Facebook</option> </select>• Drop down list
    46. 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. 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. 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. 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. 50. BUTTON <button type="button">Click Me!</button>
    51. 51. BUTTON <button type="button">Click Me!</button>•A clickable button
    52. 52. BUTTON <button type="button">Click Me!</button>•A clickable button• Almost exactly like input type=submit
    53. 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. 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. 55. FIELDSET
    56. 56. FIELDSET• Groups form elements togethers
    57. 57. FIELDSET• Groups form elements togethers• Drawsa box around related elements in most browsers
    58. 58. FIELDSET• Groups form elements togethers• Drawsa box around related elements in most browsers• Youuse the <legend> tag to define the fieldsets title
    59. 59. THE END
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×