Your SlideShare is downloading. ×
  • Like
Lesson 15
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply


Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads


Total Views
On SlideShare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. Front-End Web Development Lesson 15 Form Basics
  • 2. Agenda ● ● ● ● ● Review Form tags Input tags Attributes Other Form Tags ○ select, option, labels, textarea, fieldset, legend ● Form Validation ● Lab
  • 3. Forms How we get data from users … BEWD begins March 4 Apply Now ...
  • 4. Forms A form is a wrapper for data collection elements. ● text fields ● drop down lists ● radio buttons ● check boxes ● etc.
  • 5. Forms The form wrapper tells the page ... ● where to send the data ● how to send the data ● what data is being sent
  • 6. Form Tag <form></form> Available attributes: ● method | get or post ● action | url to send data to ● enctype | used only with post method
  • 7. Form Tag Example: <form action="register.php" method="post" enctype="multipart/form-data"> <!--Data collection elements go here--> </form>
  • 8. Input Tags <input> tags placed inside <form> tags “type” attribute identifies different types of data content
  • 9. Input Tags Commons types: <input type=“text”> <input type=“radio”> <input type=“checkbox”> <input type=“submit”> Other types
  • 10. Code Along Let’s start building something. Introduce <form> and <input> types: text, radio, checkbox, submit
  • 11. Input Tags Other attributes besides “type”: ● name | used server side ● value | used server side & button text ● placeholder | default text ● ids and classes | CSS properties Other attributes
  • 12. HTML5 Form Attributes New attributes added to the <form> tag and to the <input> tag Details at w3schools.
  • 13. Code Along Let’s continue building something. Introduce other attributes: name, value, placeholder, ids, classes
  • 14. Select and Option <select> <option value=1>One</option> <option value=2>Two</option> <option value=3>Three</option> </select> Details
  • 15. Labels <label for=“name”>Name</label> <input type=“text” id=“name”> Details
  • 16. Textarea <textarea rows=”4” cols=”50”></textarea> Details
  • 17. Code Along Let’s continue building something. Introduce other form tags: select, option, label, textarea
  • 18. Fieldsets and Legends <fieldset> <legend>Legend</legend> stuff goes here </fieldset> Details
  • 19. CSS Positioning and Styling Apply CSS positioning (floats) and styling like you would with all other HTML tags
  • 20. Code Along Let’s continue building something. Introduce other form tags and styling: fieldset, legend, CSS
  • 21. Form Validation Search plugins for “form validation” Other options: Parsley.js jQuery Validation Plugin Made Easy Tutorial
  • 22. Lab Build GA Application Form
  • 23. Homework Incorporate a form into your project