Creating a Search Box
 

The new search input type can be used to create a search box: 

<input id=“mysearch” name=“searchitem” type=search />
  

Holla Tech - Learn HTML5

Note!
You must remember to set a name for your input; otherwise, nothing will be submitted.

Search Options
 

The <datalist> tag can be used to define a list of pre-defined options for the search field:

<input id=“car” type=“text” list=“colors” />
<datalist id=“colors”>
   <option value=“Red”>
   <option value=“Green”>
   <option value=“Yellow”>
</datalist>
 

Result: 

Holla Tech - Learn HTML5
<option> defines the options in a drop-down list for the user to select.

Note!
The ID of the datalist element must match with the list attribute of the input box.

Creating More Fields
 

Some other new input types include email, url, and tel:

<input id=“email” name=“email” type=“email” placeholder=“example@example.com” />
<br />
<input id=“url” name=“url” type=“url” placeholder=“example.com” />
<br />
<input id=“tel” name=“tel” type=“tel” placeholder=“555.555.1211” />

 

These are especially useful when opening a page on a modern mobile device, which recognizes the input types and opens a corresponding keyboard matching the field’s type:

Holla Tech - Learn HTML5

Note!
These new types make it easier to structure and validate HTML forms.

BACK NEXT

HTML MAIN COURSE PAGE

 

CONTACT HOLLA TECH LEARN SUPPORT