1 / 14

HTML5 Forms

HTML5 Forms . Janelle Krebsbach Tyson Phillips. 13 New Input Types. Placeholder Text. <form> <input name="q" placeholder=“Search Text" > <input type="submit" value="Search"> </form>. Autofocus Fields. <form> <input name="q" autofocus > <input type="submit" value="Search">

sorley
Download Presentation

HTML5 Forms

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML5 Forms Janelle Krebsbach Tyson Phillips

  2. 13 New Input Types

  3. Placeholder Text <form> <input name="q" placeholder=“Search Text"> <input type="submit" value="Search"> </form>

  4. Autofocus Fields <form> <input name="q" autofocus> <input type="submit" value="Search"> </form>

  5. Data Lists <form> <input type=“text” list=“states”> <datalistid=“states” > <option value=“AK” label=“Alaska”> <option value=“AL” label=“Alabama”> <option value=“AR” label=“Arkansas”> </datalist> </form>

  6. Spin Boxes <form> <input type="number" min="0" max="20" step="2" value="2"> </form>

  7. Sliders <form> <input type="range" min="0" max="20" step="2" value="2"> <input type=“submit” value=“Go”> </form>

  8. Date Pickers <form> <input type="date"> <input type="datetime"> <input type="datetime-local"> <input type=“time"> <input type="week"> <input type="month"> <input type="submit"> </form>

  9. JavaScript Date Picker function show_calendar(str_target, str_datetime) { vararr_months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; varweek_days = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]; varn_weekstart = 1; // day week starts from (normally 0 or 1) vardt_datetime = (str_datetime == null || str_datetime =="" ? new Date() : str2dt(str_datetime)); vardt_prev_month = new Date(dt_datetime); dt_prev_month.setMonth(dt_datetime.getMonth()-1); vardt_next_month = new Date(dt_datetime); dt_next_month.setMonth(dt_datetime.getMonth()+1); vardt_firstday = new Date(dt_datetime); dt_firstday.setDate(1); dt_firstday.setDate(1-(7+dt_firstday.getDay()-n_weekstart)%7); vardt_lastday = new Date(dt_next_month); dt_lastday.setDate(0); …

  10. Color Pickers <form> <input type="color"> </form>

  11. Validation <form> <input type="text" required> <input type="hidden" required> <input type="image" required> </form> <form novalidate> <input type="text"> <input type=“submit” value=“Submit”> </form>

  12. Validation Example

  13. Modernizr – HTML5 Detection Library • Open source JavaScript library that detects support for many HTML5 features.

  14. References • “Web Forms – Dive into HTML 5” http://diveintohtml5.org/forms.html • “Dectecting HTML5 Features” http://diveintohtml5.org/detect.html

More Related