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

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 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

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

59. THE END