FormsThe Universe, And Everything

Hello, World!

<form method="POST" > <fieldset> <legend> Speaker Info </legend> <input type='text' name='name' value='Aaron T. Maturen' /> <select name='title'/> <option selected> Web Developer </option> <option> Customer Support</option> </select> <input type='email' name='email' value='aaron@svsu.edu' /> <input type='tel' name='phone'/ value='9899642190'> <input type='text' name='employer[]' value='SVSU' /> <input type='text' name='employer[]' value='Ivory Penguin' /> <input type='text' name='twitter' value='@atmature' /> <input type='url' name='website' value='http://www.aaronmaturen.com' /> <input type='submit' /> </fieldset></form>

Hello, World!

{ "name" : "Aaron T. Maturen", "title" : "Web Developer", "email" : "aaron@svsu.edu", "phone" : "989-964-2190", "employers" : [ "Saginaw Valley State University", "Ivory Penguin" ], "twitter" : "@atmaturen"

}

forms

Story Time.There once was a man from Poughkeepsie...

Input<form> <input name='email' /></form>

Email<form> <input type='email' name='email' /></form>

<form>

<form action="http://localhost" method="post"> ... </form>

<label>

<label>Email: <input name="email" type="email" /></label>

or

<label for="userEmail">Email: </label><input name="email" type="email" id="userEmail" />

<textarea>

<textarea name="textarea" rows="10" cols="50"> Write something here</textarea>

<input><input type='button' /><input type='checkbox' /><input type='hidden' /><input type='password' /><input type='radio' /><input type='reset' /><input type='submit' /><input type='text' />

Warning!<input type=' image ' />Is just a graphical button

<select><option></option><optgroup></optgroup>

<select name="select"> <option value="value1">Value 1</option> <option value="value2" selected>Value 2</option> <option value="value3">Value 3</option></select>

we're in the future now.

<form>

<form accept-charset='utf-8' autocomplete='false' action='http://localhost' method='POST' novalidate='false'>

</form>

Content Editable

<div contenteditable="true"> This text can be edited by the user.</div>

New types in HTML5<input type='date' />

A control for entering a date (year, month, and day, with no time).

New types in HTML5<input type='time' />

A control for entering a time value with no time zone.

New types in HTML5<input type='datetime-local' />

A control for entering a date and time (hour, minute, second, and fraction of a second), with no time zone.

New types in HTML5<input type='month' />

A control for entering a month and year, with no time zone.

New types in HTML5<input type='email' />

A field for editing an e-mail address. The input value is validated to contain either the empty string or a single valid e-mail address before submitting.

New types in HTML5<input type='search' />

A single-line text field for entering search strings; line-breaks are automatically removed from the input value.

New types in HTML5<input type='url' />

A field for editing a URL. The input value is validated to contain either the empty string or a valid absolute URL before submitting. Line-breaks and leading or trailing whitespace are automatically removed from the input value.

New types in HTML5<input type='file' />

A control that lets the user select a file. Use the accept attribute to define the types of files that the control can select.

Halfway Through

New types in HTML5<input type='number' />

A control for entering a floating point number.

New types in HTML5<input type='range' />

A control for entering a number whose exact value is not important. - min: 0 - max: 100 - step: 1

New types in HTML5<input type='tel' />

A control for entering a telephone number; line-breaks are automatically removed from the input value, but no other syntax is enforced.

New types in HTML5<input type='color' />

A control for specifying a color. A color picker's UI has no required features other than accepting simple colors as text.

New types in HTML5<input type='week' />

A control for entering a date consisting of a week-year number and a week number with no time zone.

The slides willbe uploaded for later

attributes

autocompleteoff / on

» form

» input

autofocusSpecify a control that should have focus as soon as the page loads.

autosaveuuid

» search

Persist a search term across across page loads

formform id

» input

...

<form id=neat>

</form>

...

<input form='neat' />

formmethodGET / POST

» input

<form method='post'> <input type='submit' /> <input type='submit' formmethod='get' value='GET!' /></form>

» post The data from the form is included in the body of the form and is sent to the server.

» get The data from the form are appended to the form attribute URI and is sent to the server.

formnovalidatetrue / false

» input [submit]

formtarget

» input [submit]

» _self

» _blank

» _parent

» _top

max / min» input [numeric, date-time]

the max / min value that can be submitted

pattern» input [ text, search, tel,

url or email]

<input type='text' required pattern='\d{3}[\-]\d{3}[\-]\d{4}' title='###-###-####' />

A regular expression that the control's value is checked against.

placeholder» input

A hint to the user of what can be entered in the control.

<label> Email <input placeholder="e.g. aaron@ivorypenguin.com" /></label>

Do not replace

<label>with placeholder

required» input

<input required />

spellchecktrue / false

<textarea spellcheck='false'></textarea>

list<div>Employee name:</div><input list="employees" /><datalist id="employees"> <option value="Aaron"> <option value="Adam"> <option value="Andrea"> <option value="Jacob"> <option value="Jessica"> <option value="Ryan"> <option value="Sean"></datalist>

CSS

css validation

input:focus:valid { background: rgba(0, 255, 0, .2);}

input:invalid { background: rgba(255, 0, 0, .2);}

html

<input type="email" required /><br /><input type="email" required /><br /><input type="email" /><br /><input type="submit" />

css ::afterhtml

<form> <input type="checkbox" id="agreement" required /> <label for="agreement">Do you agree to the terms?</label>

<br />

<input type="submit" /></form>

css

input:required ~ label::after { content: ' *'; color: red;}

At the Mountains of Madness<ul class="nav nav-pills nav-stacked"> <li><input type="checkbox" id="nav1"><label for="nav1">Hello</label> <ul class="nav"> <li><a href="#">Friends</a></li> <li><a href="#">Countrymen</a></li> <li><a href="#">Romans</a></li> </ul> </li> ...</ul>

.nav-pills>li>ul { margin-left: 2em;}.nav-pills>li>label { border-radius: 4px;}.nav>li>label { position: relative; display: block; padding: 10px 15px; color: #dd4814; text-decoration: none; cursor: pointer;} .nav>li.active>label { background-color: #dd4814; color: white;}.nav>li>label:hover { background-color: #eeeeee;}

.nav>li>input[type="checkbox"]:checked ~ label { font-weight: bolder;}.nav>li>input[type="checkbox"]{ display: none;}.nav>li>input[type="checkbox"] ~ ul { visibility: hidden; height: 0;}.nav>li>input[type="checkbox"]:checked ~ ul{ visibility: visible; height: auto}

Beyond the Threshold<ul class="nav nav-pills nav-stacked"> <li><input type="radio" id="nav1"><label for="nav1">Hello</label> <ul class="nav"> <li><a href="#">Friends</a></li> <li><a href="#">Countrymen</a></li> <li><a href="#">Romans</a></li> </ul> </li> ...</ul>

.nav-pills>li>ul { margin-left: 2em;}.nav-pills>li>label { border-radius: 4px;}.nav>li>label { position: relative; display: block; padding: 10px 15px; color: #dd4814; text-decoration: none; cursor: pointer;} .nav>li.active>label { background-color: #dd4814; color: white;}.nav>li>label:hover { background-color: #eeeeee;}

.nav>li>input[type="radio"]:checked ~ label { font-weight: bolder;}.nav>li>input[type="radio"]{ display: none;}.nav>li>input[type="radio"] ~ ul { visibility: hidden; height: 0;}.nav>li>input[type="radio"]:checked ~ ul{ visibility: visible; height: auto}

http://aaronmaturen.com/list

JavaScript

Good Ideausing AngularJS / Backbone / EmberJS ...

forms allow user input and you can bind models to them

Bad Ideausing onclick / onsubmit / onchange ...

at least use jQuery and seperate the responsibilities

Questions?aaron@svsu.edu@atmaturenhttp://www.aaronmaturen.com/forms