Front-End
Web Development
Lesson 15
Form Basics
Agenda
●
●
●
●
●

Review
Form tags
Input tags
Attributes
Other Form Tags
○ select, option, labels, textarea, fieldset, leg...
Forms
How we get data
from users …
BEWD begins
March 4
Apply Now ...
Forms
A form is a wrapper for data collection
elements.
● text fields
● drop down lists
● radio buttons
● check boxes
● et...
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 w...
Form Tag
Example:
<form action="register.php" method="post"
enctype="multipart/form-data">
<!--Data collection elements go...
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 typ...
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
● placehold...
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>
</sele...
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 Validation
Search jquery.com plugins for “form validation”
Other options:
Parsley.js
jQuery Validation Plugin Made Ea...
Lab
Build GA Application Form
Homework
Incorporate a form into your project
Upcoming SlideShare
Loading in...5
×

Lesson 15

104

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

No notes for slide

Lesson 15

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

    Clipping is a handy way to collect important slides you want to go back to later.

×