Testování podpory nových formulářových prvků v HTML5

• HTML5 přináší mnoho změn i v oblasti tvorby webových formulářů. Jedná se zejména o rozšíření atributů pro element <input />, které výrazně ulehčují práci s některými druhy dat. Programátoři tak nemusejí vymýšlet skripty na kontrolu správnosti vkládaných dat, uživatelé pak využijí vyššího komfortu při jejich zadávání.
  
  Nejlepší podpora je (jako již tradičně u všech nových prvků) v prohlížeči Opera a velmi dobrá v Google Chrome. Ve Firefoxu od verze 57 Quantum z 11/2017 začal celkem slušně fungovat input type="date" a některé další nové prvky. V Explorerech nefunguje z HTML5 Forms nic, ale Edge má již podporu docela dobrou a dokonce lepší než zmíněný Firefox 57. Pro komplexní vyzkoušení tedy doporučuji prohlížet současně ve všech zmíněných prohlížečích, každý zatím (?) podporuje tuto novinku bohužel trochu jinak.
  Podrobnější komentáře k jednotlivým ukázkám najdou mí studenti v kapitole "HTML5" kurzu KIN/7W1 v Moodlu PF JU (http://moodle.pf.jcu.cz/).
  
  

  Číselné pole s možností omezení zadávaných hodnot a určením kroku

  <form method="post" action="">
    <input type="number" min="-5" max="5" step="1" />
  </form>
  
  
  
  
  

  Pole pro telefonní číslo + automatické zaktivnění/zvýraznění pole

  <form method="post" action="">
    <input type="tel" autofocus="autofocus" />
  </form>
  
  
  
  

  Pole pro zadání/výběr datumu + kontrola vyplnění pole (klikněte na Odeslat)

  <form method="post" action="">
    <input type="date" required="required" />
  </form>
  
  
  
  
  

  Pole pro zadání/výběr měsíce v roce

  <form method="post" action="">
    <input type="month" />
  </form>
  
  
  
  

  Pole pro zadání/výběr čísla týdne v roce

  <form method="post" action="">
    <input type="week" />
  </form>
  
  
  
  

  Pole pro zadání/výběr datumu a světového času (GMT, UTC)

  <form method="post" action="">
    <input type="datetime" />
  </form>
  
  
  
  

  Pole pro zadání/výběr datumu a místního času

  <form method="post" action="">
    <input type="datetime-local" />
  </form>
  
  
  
  

  Pole pro zadání času

  <form method="post" action="">
    <input type="time" />
  </form>
  
  
  
  

  Pole pro zadání webové adresy s automatickou kontrolou správnosti zadání

  <form method="post" action="">
    <input type="url" />
  </form>
  
  
  
  

  Pole pro zadání e-mailové adresy s automatickou kontrolou správnosti zadání + předvyplněný text

  <form method="post" action="">
    <input type="email" placeholder="novak@seznam.cz" />
  </form>
  
  
  
  

  Vyhledávací pole (graficky odlišné od ostatních polí + tlačítko "x" na vymazání zadaného textu), i nadále nutný prováděcí skript

  <form method="post" action="">
    <input type="search" />
    <input type="submit" value="Hledat" />
  </form>
  
  
  
  

  Pole pro výběr barvy + vygenerování příslušného hexakódu

  <form method="post" action="">
    <input type="color" />
  </form>
  
  
  
  

  Posuvník/jezdec s možností omezení zadávaných hodnot a určením kroku, pro ovládání např. hlasitosti nutný prováděcí skript

  <form method="post" action="">
    <input type="range"" min="-10" max="10" step="1" />
  </form>
  
  
  
  

  Jednoduchý našeptávač

  <form method="post" action="">
    <input list="mOS" />
    <datalist id="mOS">
      <option value="Windows Phone">
      <option value="Android OS">
      <option value="iOS">
    </datalist>
  </form>