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 we’re at Examples Crawl – basic techniques Walk – more advanced Run – PHP API Messages Questions (and maybe answers!)

MWF Forms WHERE WE’RE AT

HTML 1 forms

HTML 2 forms

HTML 3 forms

HTML 4 forms

HTML 5 forms

HTML 5 forms New input types New attributes New form elements

Supported on mobile? Yes, with a little help.

MWF Forms Crawl

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>

Crawl: My first MWF form

MWF Forms Walk

Walk: Forms polyfill

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.

Walk: Forms polyfill

Using the forms polyfill <script src="//{MOBILE_DOMAIN}/assets/js.php?full_libs=formsPolyfills “ type="text/javascript “> </script>

Polyfill vs. non-polyfill Android 2.1 w/o polyfill Android 2.1 with polyfill

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>

Walk: My first HTML5 form

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>

Walk: More complex forms

Walk: New HTML5 input types Number, color, range, telephone, email, date, time, etc.

Walk: New HTML5 input types Input handling varies wildly

MWF Forms Run

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();

MWF Forms Messages

What are messages? Notifications in-line or block messages modal dialog Use them to Confirm Alert Error Inform

Inline messages

The source … In-line <span class=“message info”>info</span> Block <div class=“message error”>error</div>

Modal dialog

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” });

Questions!