lesson 15
DESCRIPTION
TRANSCRIPT
Front-EndWeb Development
Lesson 15Form Basics
Agenda
● Review● Form tags● Input tags● Attributes● Other Form Tags
○ select, option, labels, textarea, fieldset, legend● Form Validation● Lab
Forms
How we get datafrom users …
BEWD beginsMarch 4 Apply Now ...
Forms
A form is a wrapper for data collection elements.
● text fields● drop down lists● radio buttons● check boxes● etc.
Forms
The form wrapper tells the page ...● where to send the data● how to send the data● what data is being sent
Form Tag
<form></form>
Available attributes:● method | get or post● action | url to send data to● enctype | used only with post method
Form Tag
Example:
<form action="register.php" method="post" enctype="multipart/form-data"> <!--Data collection elements go here--></form>
Input Tags
<input> tags placed inside <form> tags
“type” attribute identifies different types of data content
Input Tags
Commons types:<input type=“text”><input type=“radio”><input type=“checkbox”><input type=“submit”>Other types
Code Along
Let’s start building something.
Introduce <form> and <input>types: text, radio, checkbox, submit
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
HTML5 Form Attributes
New attributes added to the <form> tag and to the <input> tag
Details at w3schools.
Code Along
Let’s continue building something.
Introduce other attributes:name, value, placeholder, ids, classes
Select and Option
<select><option value=1>One</option><option value=2>Two</option><option value=3>Three</option>
</select>
Details
Labels
<label for=“name”>Name</label><input type=“text” id=“name”>
Details
Textarea
<textarea rows=”4” cols=”50”></textarea>
Details
Code Along
Let’s continue building something.
Introduce other form tags:select, option, label, textarea
Fieldsets and Legends
<fieldset><legend>Legend</legend>stuff goes here
</fieldset>
Details
CSS Positioning and Styling
Apply CSS positioning (floats) and styling like you would with all other HTML tags
Code Along
Let’s continue building something.
Introduce other form tags and styling:fieldset, legend, CSS
Form ValidationSearch jquery.com plugins for “form validation”
Other options:Parsley.jsjQuery Validation Plugin Made Easy Tutorial
Lab
Build GA Application Form
Homework
Incorporate a form into your project