SlideServe
Télécharger Obtenir Pro
Menu
Accueil Pro
Préférences
ApparenceLight Aide et commentaires
© SlideServe · v2026

Modern Forms: Enhancing User Interaction with HTML5 Features

sorley avatar
sorley
14 diapositives · 238 Views · Jul 20, 2014

Explore how to implement new input types, placeholders, autofocus fields, data lists, spin boxes, sliders, date pickers, color pickers, and validation in HTML5 forms. Learn about JavaScript date picker functions and validation examples using the Modernizr library.

Modern Forms: Enhancing User Interaction with HTML5 Features - slide 1
01 / 14Modern Forms: Enhancing User Interaction with HTML5 Features
1 / 17

Télécharger la présentation

Modern Forms: Enhancing User Interaction with HTML5 Features
Une image / un lien ci-dessous est fourni (tel quel) pour télécharger la présentation

Politique de téléchargement : le contenu du site vous est fourni TEL QUEL pour votre information et votre usage personnel ; il ne peut être vendu, concédé sous licence ni partagé sur d’autres sites sans l’accord de son auteur.Le contenu vous est fourni TEL QUEL, pour votre information et votre usage personnel uniquement. Téléchargez la présentation en cliquant sur ce lien. Lors du téléchargement, si vous ne parvenez pas à télécharger une présentation, l’éditeur a peut-être supprimé le fichier de son serveur.Pendant le téléchargement, si vous ne parvenez pas à obtenir une présentation, le fichier a peut-être été supprimé par l’éditeur.

F I N

Plus de contenu associé

Transcription de la présentation

  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