Front-EndWeb Development

Lesson 15Form Basics

Agenda

● Review Startup Matchmaker● Form tags● Input tags● Attributes● Other Form Tags

○ select, option, labels, textarea, fieldset, legend● Form Validation● Lab

Forms

How we get datafrom users …

BEWD beginsJune 11 (M &W) 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 ValidationHTML5 form validation

W3Schools

~ required~ autocomplete

Form ValidationjQuery form validation

Search jquery.com plugins for “form validation”

Other options:Parsley.jsjQuery Validation Plugin Made Easy Tutorial

Lab

Build GA Application Form

~ see starter code

HTML Forms: From Basics to Style: Layouts

Homework

Incorporate a form into your project