lesson 15
DESCRIPTION
TRANSCRIPT
![Page 1: Lesson 15](https://reader033.vdocuments.net/reader033/viewer/2022051612/54bc87914a79590a388b456b/html5/thumbnails/1.jpg)
Front-EndWeb Development
Lesson 15Form Basics
![Page 2: Lesson 15](https://reader033.vdocuments.net/reader033/viewer/2022051612/54bc87914a79590a388b456b/html5/thumbnails/2.jpg)
Agenda
● Review Startup Matchmaker● Form tags● Input tags● Attributes● Other Form Tags
○ select, option, labels, textarea, fieldset, legend● Form Validation● Lab
![Page 3: Lesson 15](https://reader033.vdocuments.net/reader033/viewer/2022051612/54bc87914a79590a388b456b/html5/thumbnails/3.jpg)
Forms
How we get datafrom users …
BEWD beginsJune 11 (M &W) Apply Now ...
![Page 4: Lesson 15](https://reader033.vdocuments.net/reader033/viewer/2022051612/54bc87914a79590a388b456b/html5/thumbnails/4.jpg)
Forms
A form is a wrapper for data collection elements.
● text fields● drop down lists● radio buttons● check boxes● etc.
![Page 5: Lesson 15](https://reader033.vdocuments.net/reader033/viewer/2022051612/54bc87914a79590a388b456b/html5/thumbnails/5.jpg)
Forms
The form wrapper tells the page ...● where to send the data● how to send the data● what data is being sent
![Page 6: Lesson 15](https://reader033.vdocuments.net/reader033/viewer/2022051612/54bc87914a79590a388b456b/html5/thumbnails/6.jpg)
Form Tag
<form></form>
Available attributes:● method | get or post● action | url to send data to● enctype | used only with post method
![Page 7: Lesson 15](https://reader033.vdocuments.net/reader033/viewer/2022051612/54bc87914a79590a388b456b/html5/thumbnails/7.jpg)
Form Tag
Example:
<form action="register.php" method="post" enctype="multipart/form-data"> <!--Data collection elements go here--></form>
![Page 8: Lesson 15](https://reader033.vdocuments.net/reader033/viewer/2022051612/54bc87914a79590a388b456b/html5/thumbnails/8.jpg)
Input Tags
<input> tags placed inside <form> tags
“type” attribute identifies different types of data content
![Page 9: Lesson 15](https://reader033.vdocuments.net/reader033/viewer/2022051612/54bc87914a79590a388b456b/html5/thumbnails/9.jpg)
Input Tags
Commons types:<input type=“text”><input type=“radio”><input type=“checkbox”><input type=“submit”>Other types
![Page 10: Lesson 15](https://reader033.vdocuments.net/reader033/viewer/2022051612/54bc87914a79590a388b456b/html5/thumbnails/10.jpg)
Code Along
Let’s start building something.
Introduce <form> and <input>types: text, radio, checkbox, submit
![Page 11: Lesson 15](https://reader033.vdocuments.net/reader033/viewer/2022051612/54bc87914a79590a388b456b/html5/thumbnails/11.jpg)
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
![Page 12: Lesson 15](https://reader033.vdocuments.net/reader033/viewer/2022051612/54bc87914a79590a388b456b/html5/thumbnails/12.jpg)
HTML5 Form Attributes
New attributes added to the <form> tag and to the <input> tag
Details at w3schools.
![Page 13: Lesson 15](https://reader033.vdocuments.net/reader033/viewer/2022051612/54bc87914a79590a388b456b/html5/thumbnails/13.jpg)
Code Along
Let’s continue building something.
Introduce other attributes:name, value, placeholder, ids, classes
![Page 14: Lesson 15](https://reader033.vdocuments.net/reader033/viewer/2022051612/54bc87914a79590a388b456b/html5/thumbnails/14.jpg)
Select and Option
<select><option value=1>One</option><option value=2>Two</option><option value=3>Three</option>
</select>
Details
![Page 15: Lesson 15](https://reader033.vdocuments.net/reader033/viewer/2022051612/54bc87914a79590a388b456b/html5/thumbnails/15.jpg)
Labels
<label for=“name”>Name</label><input type=“text” id=“name”>
Details
![Page 16: Lesson 15](https://reader033.vdocuments.net/reader033/viewer/2022051612/54bc87914a79590a388b456b/html5/thumbnails/16.jpg)
Textarea
<textarea rows=”4” cols=”50”></textarea>
Details
![Page 17: Lesson 15](https://reader033.vdocuments.net/reader033/viewer/2022051612/54bc87914a79590a388b456b/html5/thumbnails/17.jpg)
Code Along
Let’s continue building something.
Introduce other form tags:select, option, label, textarea
![Page 18: Lesson 15](https://reader033.vdocuments.net/reader033/viewer/2022051612/54bc87914a79590a388b456b/html5/thumbnails/18.jpg)
Fieldsets and Legends
<fieldset><legend>Legend</legend>stuff goes here
</fieldset>
Details
![Page 19: Lesson 15](https://reader033.vdocuments.net/reader033/viewer/2022051612/54bc87914a79590a388b456b/html5/thumbnails/19.jpg)
CSS Positioning and Styling
Apply CSS positioning (floats) and styling like you would with all other HTML tags
![Page 20: Lesson 15](https://reader033.vdocuments.net/reader033/viewer/2022051612/54bc87914a79590a388b456b/html5/thumbnails/20.jpg)
Code Along
Let’s continue building something.
Introduce other form tags and styling:fieldset, legend, CSS
![Page 21: Lesson 15](https://reader033.vdocuments.net/reader033/viewer/2022051612/54bc87914a79590a388b456b/html5/thumbnails/21.jpg)
Form ValidationHTML5 form validation
W3Schools
~ required~ autocomplete
![Page 22: Lesson 15](https://reader033.vdocuments.net/reader033/viewer/2022051612/54bc87914a79590a388b456b/html5/thumbnails/22.jpg)
Form ValidationjQuery form validation
Search jquery.com plugins for “form validation”
Other options:Parsley.jsjQuery Validation Plugin Made Easy Tutorial
![Page 23: Lesson 15](https://reader033.vdocuments.net/reader033/viewer/2022051612/54bc87914a79590a388b456b/html5/thumbnails/23.jpg)
Lab
Build GA Application Form
~ see starter code
HTML Forms: From Basics to Style: Layouts
![Page 24: Lesson 15](https://reader033.vdocuments.net/reader033/viewer/2022051612/54bc87914a79590a388b456b/html5/thumbnails/24.jpg)
Homework
Incorporate a form into your project