[HTML5] Form – Input Types

The most common form element is the <input> element. It works differently depending to the specified “type” attribute. HTML5 adds more types for semantic and validation purposes.

1. Colors

The “color” type <input> element shows the color picker.

<script src="../Scripts/jquery.js"></script>
<script>
$(document).ready(function () {
  $("#colorPicker").on("change", function (e) {
    $("body").css("background-color", e.target.value);
  });
});
</script>
</head>
<body>
  <form id="form1" method="post" action="#">
    <label>Choose the background color: </label>
    <input type="color" id="colorPicker"" />
  </form>
</body>

 

2. Date and Time

The following types are related with date and time values.

  • datetime 
  • date 
  • time 
  • datetime-local 
  • month 
  • week
<script src="../Scripts/jquery.js"></script>
<script>
$(document).ready(function () {
  $("input").on("change", function (e) {
    $("#result").html(e.target.id + ": " + e.target.value);
  });
});
</script>
</head>
<body>
  <form id="form1" method="post" action="#">
    <p>Date and Time UTC: <input type="datetime" id="datetime1" /></p>
    <p>Date and Time Local: <input type="datetime-local" id="datetime2" /></p>
    <p>Date: <input type="date" id="date1" /></p>
    <p>Time: <input type="time" id="time1" /></p>
    <p>Month: <input type="month" id="month1" /></p>
    <p>Week: <input type="week" id="week1" /></p>
  </form>
  <p id="result"></p>
</body>

 

3. Numbers

The “number” and “range” types are added for semantic and validation improvement.

You can set the following attributes:

  • min : the smallest value
  • max : the largest value
  • step : the increment
  • value : the default value

If supported, the “number” type is rendered as a spinner and the “range” type is rendered as a slider.

<script src="../Scripts/jquery.js"></script>
<script>
function displayResult() {
  var rgbColor = "rgb(" + $("#numberR").val() + "," + $("#numberG").val() + "," + $("#numberB").val() + ")";
  $("#result").html(rgbColor);
  $("#numbers").css("background-color", rgbColor);
}
$(document).ready(function () {
  $("#rangeR").on("change", function (e) {
    $("#numberR").val(e.target.value); displayResult();
  });
  $("#numberR").on("change", function (e) {
    $("#rangeR").val(e.target.value); displayResult();
  });
  $("#rangeG").on("change", function (e) {
    $("#numberG").val(e.target.value); displayResult();
  });
  $("#numberG").on("change", function (e) {
    $("#rangeG").val(e.target.value); displayResult();
  });
  $("#rangeB").on("change", function (e) {
    $("#numberB").val(e.target.value); displayResult();
  });
  $("#numberB").on("change", function (e) {
    $("#rangeB").val(e.target.value); displayResult();
  });
});
</script>
</head>
<body>
  <form id="form1" method="post" action="#">
    <div id = "numbers" style="width:400px">
      <p>R:
        <input type="range" id="rangeR" min="0" max="255" value="120" step="5" />
        <input type="number" id="numberR" min="0" max="255" value="120" />
      </p>
      <p>G:
        <input type="range" id="rangeG" min="0" max="255" value="120" step="5" />
        <input type="number" id="numberG" min="0" max="255" value="120" />
      </p>
      <p>B:
        <input type="range" id="rangeB" min="0" max="255" value="120" step="5" />
        <input type="number" id="numberB" min="0" max="255" value="120" />
      </p>
    </div>
  </form>
  <p id="result"></p>
</body>

 

4. Special Text Fields – Emails, URLs, and Telephone Numbers

Emails, URLs, and Telephone Numbers are frequently used in forms. In HTML4, you used a generic text field and added validation code.

HTML5 provides new types for these fields and browsers are supposed to validate values. But you can use the “pattern” attributes to validate the fields.

<form id="form1" method="post" action="#">
  <p>Email: <input type="email" id="email1" /></p>
  <p>URL: <input type="url" id="url1" /></p>
  <p>Phone: <input type="tel" id="tel1" /></p>
</form>

 

5. Search Text Field

The “search” type input element may be used to create a text box for search terms.

<input type="search" id="searchterm" /><input type="submit" />

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s