SlideShare a Scribd company logo
1 of 63
Download to read offline
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
StoryTime.
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>
<inputtype='button' />
<inputtype='checkbox' />
<inputtype='hidden' />
<inputtype='password' />
<inputtype='radio' />
<inputtype='reset' />
<inputtype='submit' />
<inputtype='text' />
Warning!<inputtype=' image ' />
Isjusta graphicalbutton
<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 inthe future now.
<form>
<form
accept-charset='utf-8'
autocomplete='false'
action='http://localhost'
method='POST'
novalidate='false'>
</form>
ContentEditable
<div contenteditable="true">
This text can be edited by the user.
</div>
Newtypes in HTML5
<inputtype='date' />
A control for entering a date
(year, month, and day, with
no time).
Newtypes in HTML5
<inputtype='time' />
A control for entering a time
value with no time zone.
Newtypes in HTML5
<inputtype='datetime-local' />
A control for entering a date
and time (hour, minute,
second, and fraction of a
second), with no time zone.
Newtypes in HTML5
<inputtype='month' />
A control for entering a
month and year, with no time
zone.
Newtypes in HTML5
<inputtype='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.
Newtypes in HTML5
<inputtype='search' />
A single-line text field for
entering search strings;
line-breaks are automatically
removed from the input value.
Newtypes in HTML5
<inputtype='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.
Newtypes in HTML5
<inputtype='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.
HalfwayThrough
Newtypes in HTML5
<inputtype='number' />
A control for entering a
floating point number.
Newtypes in HTML5
<inputtype='range' />
A control for entering a
number whose exact value is
not important.
- min: 0
- max: 100
- step: 1
Newtypes in HTML5
<inputtype='tel' />
A control for entering a
telephone number; line-breaks
are automatically removed
from the input value, but no
other syntax is enforced.
Newtypes in HTML5
<inputtype='color' />
A control for specifying a
color. A color picker's UI
has no required features
other than accepting simple
colors as text.
Newtypes in HTML5
<inputtype='week' />
A control for entering a date
consisting of a week-year
number and a week number with
no time zone.
The slideswill
be uploaded for later
attributes
autocomplete
off/ on
» form
» input
autofocus
Specify a control that should have focus as soon as
the page loads.
autosave
uuid
» search
Persist a search term across across page loads
form
form id
» input
...
<form id=neat>
</form>
...
<input form='neat' />
formmethod
GET/ 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.
formnovalidate
true / 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 notreplace
<label>with placeholder
required
» input
<input required />
spellcheck
true / 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
cssvalidation
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 ::after
html
<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;
}
Atthe
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
}
Beyondthe
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 Idea
using AngularJS / Backbone / EmberJS ...
forms allow user input and you can bind models to
them
Bad Idea
using onclick / onsubmit / onchange ...
at least use jQuery and seperate the responsibilities
Questions?
aaron@svsu.edu
@atmaturenhttp://www.aaronmaturen.com/forms

More Related Content

What's hot

HTML5 - Forms
HTML5 - FormsHTML5 - Forms
HTML5 - Forms
tina1357
 

What's hot (18)

HTML Forms
HTML FormsHTML Forms
HTML Forms
 
Html form tag
Html form tagHtml form tag
Html form tag
 
Javascript validating form
Javascript validating formJavascript validating form
Javascript validating form
 
HTML 5 Simple Tutorial Part 4
HTML 5 Simple Tutorial Part 4HTML 5 Simple Tutorial Part 4
HTML 5 Simple Tutorial Part 4
 
PHP Making Web Forms
PHP Making Web FormsPHP Making Web Forms
PHP Making Web Forms
 
Html Form Controls
Html Form ControlsHtml Form Controls
Html Form Controls
 
html forms
html formshtml forms
html forms
 
Html forms
Html formsHtml forms
Html forms
 
HTML Forms
HTML FormsHTML Forms
HTML Forms
 
HTML Forms Tutorial
HTML Forms TutorialHTML Forms Tutorial
HTML Forms Tutorial
 
New Form Element in HTML5
New Form Element in HTML5New Form Element in HTML5
New Form Element in HTML5
 
html 5 new form attribute
html 5 new form attributehtml 5 new form attribute
html 5 new form attribute
 
Entering User Data from a Web Page HTML Forms
Entering User Data from a Web Page HTML FormsEntering User Data from a Web Page HTML Forms
Entering User Data from a Web Page HTML Forms
 
HTML5 - Forms
HTML5 - FormsHTML5 - Forms
HTML5 - Forms
 
Web engineering - HTML Form
Web engineering -  HTML FormWeb engineering -  HTML Form
Web engineering - HTML Form
 
Forms with html5 (1)
Forms with html5 (1)Forms with html5 (1)
Forms with html5 (1)
 
2. HTML forms
2. HTML forms2. HTML forms
2. HTML forms
 
phptut2
phptut2phptut2
phptut2
 

Similar to Forms

Designing web pages html forms and input
Designing web pages html  forms and inputDesigning web pages html  forms and input
Designing web pages html forms and input
Jesus Obenita Jr.
 
Form Processing In Php
Form Processing In PhpForm Processing In Php
Form Processing In Php
Harit Kothari
 
HTML5 Forms - KISS time - Fronteers
HTML5 Forms - KISS time - FronteersHTML5 Forms - KISS time - Fronteers
HTML5 Forms - KISS time - Fronteers
Robert Nyman
 

Similar to Forms (20)

Lecture-5.pptx
Lecture-5.pptxLecture-5.pptx
Lecture-5.pptx
 
HTML FORMS.pptx
HTML FORMS.pptxHTML FORMS.pptx
HTML FORMS.pptx
 
Forms,Frames.ppt
Forms,Frames.pptForms,Frames.ppt
Forms,Frames.ppt
 
Forms,Frames.ppt
Forms,Frames.pptForms,Frames.ppt
Forms,Frames.ppt
 
Getting Information through HTML Forms
Getting Information through HTML FormsGetting Information through HTML Forms
Getting Information through HTML Forms
 
HTML Forms Basics by Kamran Solangi.pptx
HTML Forms Basics by Kamran Solangi.pptxHTML Forms Basics by Kamran Solangi.pptx
HTML Forms Basics by Kamran Solangi.pptx
 
Bad Form @ JSConf Asia 2014
Bad Form @ JSConf Asia 2014Bad Form @ JSConf Asia 2014
Bad Form @ JSConf Asia 2014
 
Lab final
Lab finalLab final
Lab final
 
HTML - FORMS.pptx
HTML - FORMS.pptxHTML - FORMS.pptx
HTML - FORMS.pptx
 
Lecture-5.ppsx
Lecture-5.ppsxLecture-5.ppsx
Lecture-5.ppsx
 
Html class-04
Html class-04Html class-04
Html class-04
 
PHP-04-Forms.ppt
PHP-04-Forms.pptPHP-04-Forms.ppt
PHP-04-Forms.ppt
 
Working with Data and built-in functions of PHP
Working with Data and built-in functions of PHPWorking with Data and built-in functions of PHP
Working with Data and built-in functions of PHP
 
Building & Breaking Web Forms with Quaid-JS
Building & Breaking Web Forms with Quaid-JSBuilding & Breaking Web Forms with Quaid-JS
Building & Breaking Web Forms with Quaid-JS
 
CT xam.pdf
CT xam.pdfCT xam.pdf
CT xam.pdf
 
Angular js form validation shashi-19-7-16
Angular js form validation shashi-19-7-16Angular js form validation shashi-19-7-16
Angular js form validation shashi-19-7-16
 
Designing web pages html forms and input
Designing web pages html  forms and inputDesigning web pages html  forms and input
Designing web pages html forms and input
 
Chapter 9: Forms
Chapter 9: FormsChapter 9: Forms
Chapter 9: Forms
 
Form Processing In Php
Form Processing In PhpForm Processing In Php
Form Processing In Php
 
HTML5 Forms - KISS time - Fronteers
HTML5 Forms - KISS time - FronteersHTML5 Forms - KISS time - Fronteers
HTML5 Forms - KISS time - Fronteers
 

Recently uploaded

Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo DiehlFuture Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Peter Udo Diehl
 

Recently uploaded (20)

Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdfIntroduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
 
Connecting the Dots in Product Design at KAYAK
Connecting the Dots in Product Design at KAYAKConnecting the Dots in Product Design at KAYAK
Connecting the Dots in Product Design at KAYAK
 
Intro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджераIntro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджера
 
Buy Epson EcoTank L3210 Colour Printer Online.pdf
Buy Epson EcoTank L3210 Colour Printer Online.pdfBuy Epson EcoTank L3210 Colour Printer Online.pdf
Buy Epson EcoTank L3210 Colour Printer Online.pdf
 
The UX of Automation by AJ King, Senior UX Researcher, Ocado
The UX of Automation by AJ King, Senior UX Researcher, OcadoThe UX of Automation by AJ King, Senior UX Researcher, Ocado
The UX of Automation by AJ King, Senior UX Researcher, Ocado
 
AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101
 
Strategic AI Integration in Engineering Teams
Strategic AI Integration in Engineering TeamsStrategic AI Integration in Engineering Teams
Strategic AI Integration in Engineering Teams
 
Free and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
Free and Effective: Making Flows Publicly Accessible, Yumi IbrahimzadeFree and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
Free and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
 
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya HalderCustom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
 
A Business-Centric Approach to Design System Strategy
A Business-Centric Approach to Design System StrategyA Business-Centric Approach to Design System Strategy
A Business-Centric Approach to Design System Strategy
 
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
 
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo DiehlFuture Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
 
Speed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in MinutesSpeed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in Minutes
 
Optimizing NoSQL Performance Through Observability
Optimizing NoSQL Performance Through ObservabilityOptimizing NoSQL Performance Through Observability
Optimizing NoSQL Performance Through Observability
 
ECS 2024 Teams Premium - Pretty Secure
ECS 2024   Teams Premium - Pretty SecureECS 2024   Teams Premium - Pretty Secure
ECS 2024 Teams Premium - Pretty Secure
 
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdfHow Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
 
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
 
Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)
Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)
Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)
 
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdfSimplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
 
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
 

Forms