User Input in HTML5


User input forms are significant aspect of web applications. There are a few new form elements available in HTML5. Here are a few:

Element list:

color email tel
datalist month time
date number url
datetime range week
datetime-local search

Search from


code:

<form novalidate>
    <input type="search"
        id="search-text"
        class="form-control"
        placeholder="search"
        autofocus>
</form>

Here the novalidate is perfect for a search form where no validation is required before submitting the form. The autofocus attribute allows the cursor to be focused to the search box when page loads.

Contact Form










code:

<form>
    <input type="text"
       id="name-text"
       placeholder="first and last name"
       required
       pattern="(.*)\s(.*)"
       class="form-control">
    
    <input type="email"
        id="email-text"
        placeholder="email address"
        required
        class="form-control">
    
    <input type="tel"
        id="phone-text"
        placeholder="phone number"
        required
        class="form-control">
    
    <input type="url"
        id="url-text"
        placeholder="web address"
        required
        class="form-control">
    
    <div>
        <input type="submit" value="Submit" />
    </div>
</form>

In the first and last name form field the pattern contains a regular expression (.*)\s(.*) that means any text of type John Doe.

HTML5 provides form validity check of type email, tel, url etc by default.

The attribute required makes these form fields necessary to be filled up before submitting.

Styles applied

input:required {
      border-left: 4px solid #c33;
    }
    input:focus:invalid,
    textarea:focus:invalid,
    select:focus:invalid {
      color: #c33;
      border-color: #c33;
    }
    input:focus:invalid:focus,
    textarea:focus:invalid:focus,
    select:focus:invalid:focus {
      border-color: #c33;
      -webkit-box-shadow: 0 0 6px #fcc;
         -moz-box-shadow: 0 0 6px #fcc;
              box-shadow: 0 0 6px #fcc;
    }

Number field


code:

<form>
    <input type="number" 
        id="number-text" 
        placeholder="# of tickets" 
        min="1" 
        max="6" 
        class="form-control">
        <input type="submit" value="Submit" />
</form>

Here the number entered must be between 1 and 6 including both.

Range slider

code:

<div>
  <input type="range" 
    id="move-range" 
    min="0" max="120" 
    step="10" value="30">
</div>

Datalist Input

With this element we can define a list of elements which are shown as options in input field.

code:

<form>
    <input
        type="text"
        list="colors"
        name="color_names">
    <datalist id="colors">
        <option value="blue">
        <option value="red">
    </datalist>
</form>

Color input

click me!

code:

<form>
    <input type="color" 
        id="main-color"
        value="#ffffff"
        class="form-control push-down-top">
    <p>click me!</p>
</form>

Month, Week and Datetime






code:

<form>
    <input type="month"
        class="form-control"
        value="2018-06">
    
    <input type="week"
        class="form-control"
        value="2018-W26">
    
    <input type="datetime-local"
        class="form-control"
        value="2018-06-26T09:30:00">
</form>
Show Comments