SLIDE 1
Form follows function - that has been
- misunderstood. Form and function should be
- ne, joined in a spiritual union.
- - Frank Lloyd Wright
MWF Forms and Messages Form follows function - that has been - - PowerPoint PPT Presentation
MWF Forms and Messages Form follows function - that has been - - PowerPoint PPT Presentation
MWF Forms and Messages Form follows function - that has been misunderstood. Form and function should be one, joined in a spiritual union. -- Frank Lloyd Wright MWF Forms and Messages Forms Where were at Examples Crawl basic techniques
SLIDE 2
SLIDE 3
MWF Forms and Messages
Forms
Where we’re at Examples
Crawl – basic techniques Walk – more advanced Run – PHP API
Messages Questions (and maybe answers!)
SLIDE 4
WHERE WE’RE AT
MWF Forms
SLIDE 5
HTML 1 forms
SLIDE 6
HTML 2 forms
SLIDE 7
HTML 3 forms
SLIDE 8
HTML 4 forms
SLIDE 9
HTML 5 forms
SLIDE 10
HTML 5 forms
New input types New attributes New form elements
SLIDE 11
Supported on mobile?
Yes, with a little help.
SLIDE 12
Crawl
MWF Forms
SLIDE 13
Crawl: My first MWF form
<form class="short"> <h2>Short Form</h2> <input type="text" name="text-input" /> <input class="primary" type="submit" value="Search" /> </form>
SLIDE 14
Crawl: My first MWF form
SLIDE 15
Walk
MWF Forms
SLIDE 16
Walk: Forms polyfill
SLIDE 17
Walk: Forms polyfill
Shim: piece of material, used to fill small gaps or spaces between objects. Also: a small library that transparently intercepts an API and changes the parameters passed, handles the operation itself, or redirects the operation elsewhere. Polyfill: downloadable code which provides facilities that are not built-in to a web browser.
SLIDE 18
Walk: Forms polyfill
SLIDE 19
Using the forms polyfill
<script src="//{MOBILE_DOMAIN}/assets/js.php?full_libs=formsPolyfills“ type="text/javascript“> </script>
SLIDE 20
Polyfill vs. non-polyfill
Android 2.1 w/o polyfill Android 2.1 with polyfill
SLIDE 21
Walk: My first MWF HTML5 form
<label> <span class="required">Placeholder</span> <input id="input-10" name="input-10" required="required" placeholder="Please enter text here“ /> </label>
SLIDE 22
Walk: My first HTML5 form
SLIDE 23
Walk: More complex forms
<label> <span>Label Text</span> <div class="option"> <label> <input type="checkbox" value="1" name="checkbox-input" />One </label> <label> <input type="checkbox" value="2" name="checkbox-input" />Two </label> </div> </label>
SLIDE 24
Walk: More complex forms
SLIDE 25
Walk: New HTML5 input types
Number, color, range, telephone, email, date, time, etc.
SLIDE 26
Walk: New HTML5 input types
Input handling varies wildly
SLIDE 27
Run
MWF Forms
SLIDE 28
PHP forms API
echo Site_Decorator::form()
- >set_short()
- >set_title('Short Form')
- >add_input($text_input)
- >add_input(Site_Decorator::input()->type_submit()
- >set_param('value', 'Search'))
- >render();
SLIDE 29
Messages
MWF Forms
SLIDE 30
What are messages?
Notifications
in-line or block messages modal dialog
Use them to
Confirm Alert Error Inform
SLIDE 31
Inline messages
SLIDE 32
The source …
In-line
<span class=“message info”>info</span>
Block
<div class=“message error”>error</div>
SLIDE 33
Modal dialog
SLIDE 34
Behind the curtain …
When you want to bring the message to the front of the screen as a modal, use Messages JS.
mwf.messages.model({id:”alert-msg”}); mwf.messages.modal({ text: “A dynamic info message”, type: “info” });
SLIDE 35