Formation HTML5 : Formulaires Web
HTML5 - sémantique

Formation HTML5 : Formulaires Web

  1. Formulaires Web
  2. Élément datalist
  3. Élément output

Web Forms / formulaires Web : Nouveaux types pour l'élément input

  • <input type="search">
  • <input type="number">
  • <input type="range">
  • <input type="color">
  • <input type="tel">
  • <input type="url">
  • <input type="email">
  • <input type="date">
  • <input type="time">
  • <input type="datetime">
  • <input type="datetime-local">
  • <input type="month">
  • <input type="week">
  • Nouveaux attributs : placeholder, autocomplete, autofocus, list, pattern, required
  • Détection: créer un élement, et vérifier ensuite son type (disponible si le type n'est pas text)
  • Téléversement de plusieurs fichiers à la fois! (attribut multiple sur un <input type="file">)

Web Forms / formulaires Web : Validation des formulaire

  • novalidate, attribut sur le formulaire
  • formnovalidate, attribut sur le bouton submit, surcharge l'attribut du formulaire

L'élément <datalist>


  <label for="pays">Choisissez votre pays</label>
  <input list="pays" name="pays">
  <datalist id="pays">
    <option value="Canada"></option>
    <option value="États-Unis"></option>
    <option value="France"></option>
  </datalist>
              

L'élément <output>





        <script>
            function concat() {
                document.getElementById("concatenation").value = document.getElementById("el1").value + document.getElementById("el2").value
            }
        </script>
        <form id="outputExemple">
            <label for="el1">Premier élément</label>
            <input type="text" id="el1">
            <label for="el2">Deuxième élément</label>
            <input type="text" id="el2">
            <input type="submit" value="Calcule" onclick="concat();return false">
            <label for="concatenation">Concaténation :</label>
            <output id="concatenation" form="outputExemple" ></output>
        </form>