html5のフォーム

html5のフォームってどういう見た目になるのかなーと試してた。

ソース

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>html5 form</title>
  </head>
  <body>
    <h1>
      html5 form
    </h1>
    <div style="font-size:small">
      UserAgent: <span id="version"></span>
    </div>
    <form>
      <div>
        text: <input type="text" placeholder="text">
      </div>
      <div>
        number: <input type="number" placeholder="number">
      </div>
      <div>
        email: <input type="email" placeholder="email">
      </div>
      <div>
        date: <input type="date" placeholder="date">
      </div>
      <div>
        datetime: <input type="datetime" placeholder="datetime">
      </div>
      <div>
        time: <input type="time" placeholder="time">
      </div>
      <div>
        month: <input type="month" placeholder="month">
      </div>
      <div>
        week: <input type="week" placeholder="week">
      </div>
      <div>
        tel: <input type="tel" placeholder="tel">
      </div>
      <div>
        color: <input type="color" placeholder="color">
      </div>
      <div>
        url: <input type="url" placeholder="url">
      </div>
      <div>
        range: <input type="range" placeholder="range" min="-50" max"100">
      </div>
    </form>
    <script type="text/javascript">
      document.getElementById("version").innerHTML = navigator.userAgent;
    </script>
  </body>
</html>

結果