forms
TRANSCRIPT
![Page 1: Forms](https://reader035.vdocuments.net/reader035/viewer/2022081516/55514fb4b4c905bd1c8b563c/html5/thumbnails/1.jpg)
FormsThe Universe, And Everything
![Page 2: Forms](https://reader035.vdocuments.net/reader035/viewer/2022081516/55514fb4b4c905bd1c8b563c/html5/thumbnails/2.jpg)
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='[email protected]' /> <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>
![Page 3: Forms](https://reader035.vdocuments.net/reader035/viewer/2022081516/55514fb4b4c905bd1c8b563c/html5/thumbnails/3.jpg)
![Page 4: Forms](https://reader035.vdocuments.net/reader035/viewer/2022081516/55514fb4b4c905bd1c8b563c/html5/thumbnails/4.jpg)
Hello, World!
{ "name" : "Aaron T. Maturen", "title" : "Web Developer", "email" : "[email protected]", "phone" : "989-964-2190", "employers" : [ "Saginaw Valley State University", "Ivory Penguin" ], "twitter" : "@atmaturen"
}
![Page 5: Forms](https://reader035.vdocuments.net/reader035/viewer/2022081516/55514fb4b4c905bd1c8b563c/html5/thumbnails/5.jpg)
![Page 6: Forms](https://reader035.vdocuments.net/reader035/viewer/2022081516/55514fb4b4c905bd1c8b563c/html5/thumbnails/6.jpg)
forms
![Page 7: Forms](https://reader035.vdocuments.net/reader035/viewer/2022081516/55514fb4b4c905bd1c8b563c/html5/thumbnails/7.jpg)
Story Time.There once was a man from Poughkeepsie...
![Page 8: Forms](https://reader035.vdocuments.net/reader035/viewer/2022081516/55514fb4b4c905bd1c8b563c/html5/thumbnails/8.jpg)
Input<form> <input name='email' /></form>
![Page 9: Forms](https://reader035.vdocuments.net/reader035/viewer/2022081516/55514fb4b4c905bd1c8b563c/html5/thumbnails/9.jpg)
![Page 10: Forms](https://reader035.vdocuments.net/reader035/viewer/2022081516/55514fb4b4c905bd1c8b563c/html5/thumbnails/10.jpg)
Email<form> <input type='email' name='email' /></form>
![Page 11: Forms](https://reader035.vdocuments.net/reader035/viewer/2022081516/55514fb4b4c905bd1c8b563c/html5/thumbnails/11.jpg)
<form>
<form action="http://localhost" method="post"> ... </form>
![Page 12: Forms](https://reader035.vdocuments.net/reader035/viewer/2022081516/55514fb4b4c905bd1c8b563c/html5/thumbnails/12.jpg)
<label>
<label>Email: <input name="email" type="email" /></label>
or
<label for="userEmail">Email: </label><input name="email" type="email" id="userEmail" />
![Page 13: Forms](https://reader035.vdocuments.net/reader035/viewer/2022081516/55514fb4b4c905bd1c8b563c/html5/thumbnails/13.jpg)
<textarea>
<textarea name="textarea" rows="10" cols="50"> Write something here</textarea>
![Page 14: Forms](https://reader035.vdocuments.net/reader035/viewer/2022081516/55514fb4b4c905bd1c8b563c/html5/thumbnails/14.jpg)
<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' />
![Page 15: Forms](https://reader035.vdocuments.net/reader035/viewer/2022081516/55514fb4b4c905bd1c8b563c/html5/thumbnails/15.jpg)
Warning!<input type=' image ' />Is just a graphical button
![Page 16: Forms](https://reader035.vdocuments.net/reader035/viewer/2022081516/55514fb4b4c905bd1c8b563c/html5/thumbnails/16.jpg)
<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>
![Page 17: Forms](https://reader035.vdocuments.net/reader035/viewer/2022081516/55514fb4b4c905bd1c8b563c/html5/thumbnails/17.jpg)
we're in the future now.
![Page 18: Forms](https://reader035.vdocuments.net/reader035/viewer/2022081516/55514fb4b4c905bd1c8b563c/html5/thumbnails/18.jpg)
<form>
<form accept-charset='utf-8' autocomplete='false' action='http://localhost' method='POST' novalidate='false'>
</form>
![Page 19: Forms](https://reader035.vdocuments.net/reader035/viewer/2022081516/55514fb4b4c905bd1c8b563c/html5/thumbnails/19.jpg)
Content Editable
<div contenteditable="true"> This text can be edited by the user.</div>
![Page 20: Forms](https://reader035.vdocuments.net/reader035/viewer/2022081516/55514fb4b4c905bd1c8b563c/html5/thumbnails/20.jpg)
New types in HTML5<input type='date' />
A control for entering a date (year, month, and day, with no time).
![Page 21: Forms](https://reader035.vdocuments.net/reader035/viewer/2022081516/55514fb4b4c905bd1c8b563c/html5/thumbnails/21.jpg)
New types in HTML5<input type='time' />
A control for entering a time value with no time zone.
![Page 22: Forms](https://reader035.vdocuments.net/reader035/viewer/2022081516/55514fb4b4c905bd1c8b563c/html5/thumbnails/22.jpg)
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.
![Page 23: Forms](https://reader035.vdocuments.net/reader035/viewer/2022081516/55514fb4b4c905bd1c8b563c/html5/thumbnails/23.jpg)
New types in HTML5<input type='month' />
A control for entering a month and year, with no time zone.
![Page 24: Forms](https://reader035.vdocuments.net/reader035/viewer/2022081516/55514fb4b4c905bd1c8b563c/html5/thumbnails/24.jpg)
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.
![Page 25: Forms](https://reader035.vdocuments.net/reader035/viewer/2022081516/55514fb4b4c905bd1c8b563c/html5/thumbnails/25.jpg)
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.
![Page 26: Forms](https://reader035.vdocuments.net/reader035/viewer/2022081516/55514fb4b4c905bd1c8b563c/html5/thumbnails/26.jpg)
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.
![Page 27: Forms](https://reader035.vdocuments.net/reader035/viewer/2022081516/55514fb4b4c905bd1c8b563c/html5/thumbnails/27.jpg)
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.
![Page 28: Forms](https://reader035.vdocuments.net/reader035/viewer/2022081516/55514fb4b4c905bd1c8b563c/html5/thumbnails/28.jpg)
Halfway Through
![Page 29: Forms](https://reader035.vdocuments.net/reader035/viewer/2022081516/55514fb4b4c905bd1c8b563c/html5/thumbnails/29.jpg)
New types in HTML5<input type='number' />
A control for entering a floating point number.
![Page 30: Forms](https://reader035.vdocuments.net/reader035/viewer/2022081516/55514fb4b4c905bd1c8b563c/html5/thumbnails/30.jpg)
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
![Page 31: Forms](https://reader035.vdocuments.net/reader035/viewer/2022081516/55514fb4b4c905bd1c8b563c/html5/thumbnails/31.jpg)
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.
![Page 32: Forms](https://reader035.vdocuments.net/reader035/viewer/2022081516/55514fb4b4c905bd1c8b563c/html5/thumbnails/32.jpg)
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.
![Page 33: Forms](https://reader035.vdocuments.net/reader035/viewer/2022081516/55514fb4b4c905bd1c8b563c/html5/thumbnails/33.jpg)
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.
![Page 34: Forms](https://reader035.vdocuments.net/reader035/viewer/2022081516/55514fb4b4c905bd1c8b563c/html5/thumbnails/34.jpg)
The slides willbe uploaded for later
![Page 35: Forms](https://reader035.vdocuments.net/reader035/viewer/2022081516/55514fb4b4c905bd1c8b563c/html5/thumbnails/35.jpg)
attributes
![Page 36: Forms](https://reader035.vdocuments.net/reader035/viewer/2022081516/55514fb4b4c905bd1c8b563c/html5/thumbnails/36.jpg)
autocompleteoff / on
» form
» input
![Page 37: Forms](https://reader035.vdocuments.net/reader035/viewer/2022081516/55514fb4b4c905bd1c8b563c/html5/thumbnails/37.jpg)
autofocusSpecify a control that should have focus as soon as the page loads.
![Page 38: Forms](https://reader035.vdocuments.net/reader035/viewer/2022081516/55514fb4b4c905bd1c8b563c/html5/thumbnails/38.jpg)
autosaveuuid
» search
Persist a search term across across page loads
![Page 39: Forms](https://reader035.vdocuments.net/reader035/viewer/2022081516/55514fb4b4c905bd1c8b563c/html5/thumbnails/39.jpg)
formform id
» input
...
<form id=neat>
</form>
...
<input form='neat' />
![Page 40: Forms](https://reader035.vdocuments.net/reader035/viewer/2022081516/55514fb4b4c905bd1c8b563c/html5/thumbnails/40.jpg)
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.
![Page 41: Forms](https://reader035.vdocuments.net/reader035/viewer/2022081516/55514fb4b4c905bd1c8b563c/html5/thumbnails/41.jpg)
formnovalidatetrue / false
» input [submit]
![Page 42: Forms](https://reader035.vdocuments.net/reader035/viewer/2022081516/55514fb4b4c905bd1c8b563c/html5/thumbnails/42.jpg)
formtarget
» input [submit]
» _self
» _blank
» _parent
» _top
![Page 43: Forms](https://reader035.vdocuments.net/reader035/viewer/2022081516/55514fb4b4c905bd1c8b563c/html5/thumbnails/43.jpg)
max / min» input [numeric, date-time]
the max / min value that can be submitted
![Page 44: Forms](https://reader035.vdocuments.net/reader035/viewer/2022081516/55514fb4b4c905bd1c8b563c/html5/thumbnails/44.jpg)
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.
![Page 45: Forms](https://reader035.vdocuments.net/reader035/viewer/2022081516/55514fb4b4c905bd1c8b563c/html5/thumbnails/45.jpg)
placeholder» input
A hint to the user of what can be entered in the control.
<label> Email <input placeholder="e.g. [email protected]" /></label>
![Page 46: Forms](https://reader035.vdocuments.net/reader035/viewer/2022081516/55514fb4b4c905bd1c8b563c/html5/thumbnails/46.jpg)
Do not replace
<label>with placeholder
![Page 47: Forms](https://reader035.vdocuments.net/reader035/viewer/2022081516/55514fb4b4c905bd1c8b563c/html5/thumbnails/47.jpg)
required» input
<input required />
![Page 48: Forms](https://reader035.vdocuments.net/reader035/viewer/2022081516/55514fb4b4c905bd1c8b563c/html5/thumbnails/48.jpg)
spellchecktrue / false
<textarea spellcheck='false'></textarea>
![Page 49: Forms](https://reader035.vdocuments.net/reader035/viewer/2022081516/55514fb4b4c905bd1c8b563c/html5/thumbnails/49.jpg)
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>
![Page 50: Forms](https://reader035.vdocuments.net/reader035/viewer/2022081516/55514fb4b4c905bd1c8b563c/html5/thumbnails/50.jpg)
CSS
![Page 51: Forms](https://reader035.vdocuments.net/reader035/viewer/2022081516/55514fb4b4c905bd1c8b563c/html5/thumbnails/51.jpg)
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" />
![Page 52: Forms](https://reader035.vdocuments.net/reader035/viewer/2022081516/55514fb4b4c905bd1c8b563c/html5/thumbnails/52.jpg)
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;}
![Page 53: Forms](https://reader035.vdocuments.net/reader035/viewer/2022081516/55514fb4b4c905bd1c8b563c/html5/thumbnails/53.jpg)
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>
![Page 54: Forms](https://reader035.vdocuments.net/reader035/viewer/2022081516/55514fb4b4c905bd1c8b563c/html5/thumbnails/54.jpg)
.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;}
![Page 55: Forms](https://reader035.vdocuments.net/reader035/viewer/2022081516/55514fb4b4c905bd1c8b563c/html5/thumbnails/55.jpg)
.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}
![Page 56: Forms](https://reader035.vdocuments.net/reader035/viewer/2022081516/55514fb4b4c905bd1c8b563c/html5/thumbnails/56.jpg)
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>
![Page 57: Forms](https://reader035.vdocuments.net/reader035/viewer/2022081516/55514fb4b4c905bd1c8b563c/html5/thumbnails/57.jpg)
.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;}
![Page 58: Forms](https://reader035.vdocuments.net/reader035/viewer/2022081516/55514fb4b4c905bd1c8b563c/html5/thumbnails/58.jpg)
.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}
![Page 59: Forms](https://reader035.vdocuments.net/reader035/viewer/2022081516/55514fb4b4c905bd1c8b563c/html5/thumbnails/59.jpg)
http://aaronmaturen.com/list
![Page 60: Forms](https://reader035.vdocuments.net/reader035/viewer/2022081516/55514fb4b4c905bd1c8b563c/html5/thumbnails/60.jpg)
JavaScript
![Page 61: Forms](https://reader035.vdocuments.net/reader035/viewer/2022081516/55514fb4b4c905bd1c8b563c/html5/thumbnails/61.jpg)
Good Ideausing AngularJS / Backbone / EmberJS ...
forms allow user input and you can bind models to them
![Page 62: Forms](https://reader035.vdocuments.net/reader035/viewer/2022081516/55514fb4b4c905bd1c8b563c/html5/thumbnails/62.jpg)
Bad Ideausing onclick / onsubmit / onchange ...
at least use jQuery and seperate the responsibilities
![Page 63: Forms](https://reader035.vdocuments.net/reader035/viewer/2022081516/55514fb4b4c905bd1c8b563c/html5/thumbnails/63.jpg)
[email protected]@atmaturenhttp://www.aaronmaturen.com/forms