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