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
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
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 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
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
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
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
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
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.
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
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
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
fieldset's title