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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Lesson 15

73

Published on

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
73
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  1. Front-End Web Development Lesson 15 Form Basics
  2. Agenda ● Review Startup Matchmaker ● 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 June 11 (M &W) 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 HTML5 form validation W3Schools ~ required ~ autocomplete
  22. Form Validation jQuery form validation Search jquery.com plugins for “form validation” Other options: Parsley.js jQuery Validation Plugin Made Easy Tutorial
  23. Lab Build GA Application Form ~ see starter code HTML Forms: From Basics to Style: Layouts
  24. Homework Incorporate a form into your project

×