Lesson 8: New HTML5 Input elements

HTML5 Input elements

HTML5 Input elements

HTML5 Input elements is one of the basic but most important lesson for learning HTML5.

Is HTML5 Input elements is different from earlier html versions ?

No, HTML5 Input elements is not different from earlier version but ha added some tags , an HTML5 webpage support every earlier version Input elements.

In this tutorial we will be learning about the use of <input> tag elements in HTML5.

An <input> tag is used within a <form></form> tag and it refers to an input field where the user fills up data values.

HTML5 introduces the following new <input> types:

  • datetime-local
  • email: for input fields that should contain an e-mail address.
  • color : for input fields with colors, i.e. color picker/ color selector
  • date : allows the user to select data, i.e. date picker with calendar
  • month : allows the user to select a month and year. I.e. date picker with month and year only
  • number : for a numeric value input only, we can also set restrictions on acceptable numbers using one of the following <input> attributes: max for max allowed value, min for the min allowed value, step for the number interval and value for setting the default value.
  • datetime: allows the user to select a date and time (

 

For example:

<input type=”enter a number” min=”1″ max=”5″/>
  • range: should contain a value from a range of numbers. In the same way as with the number, type we can use the following <input> attributes to specify the range: max for max allowed value, min for the min allowed value, step for the number interval and value for setting the default value.

For example:

<input type=”range” min=”1″ max=”5″/>

Demo result:

  • search: used search fields
  • tel: used for entering a phone numbers
  • time : for input field for entering time via up/down buttons
  • url : for input fields that should contain a URL address
  • week: allows the user to select a week and year.

Examples:

<input type=”color” ><input type=”date” >

<input type=”email” >

<input type=”datetime-local” >

attribute-html5-374x200

HTML5 <input> new attributes

There are 14 new attributes that we’ll be looking at in this article.

  • Placeholder
  • Autofocus
  • Autocomplete
  • Required
  • Pattern
  • List
  • Multiple
  • Novalidate
  • Formnovalidate
  • Form
  • Formaction
  • Formenctype
  • Formmethod
  • Formtarget

 

NOTE: In HTML5, we can use attributes that are boolean with or without values as we like! For ex. autofocus=”autofocus” or also autofocus! I.e. the presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value.

Now we will learn how to implement attributes.

  1. Placeholder

Let’s have a look at how to implement the placeholder attribute.

<inputtype=”text”name=”user-name”id=”user-name”placeholder=”at least 3 characters”>
  1. Autofocus

It is a Boolean attribute (except if you are writing XHTML5; see the note) and is implemented as follows:

<inputtype=”text”name=”first-name”id=”first-name”autofocus>
  1. Autocomplete

We can implement it like so:

<inputtype=”text”name=”tracking-code”id=”tracking-code”autocomplete=”off”>
  1. Required

We can would implement it like so:

<inputtype=”text”id=”given-name”name=”given-name”required>
HTML5 Beginners

HTML5 Imput elements

  1. Pattern

The possibilities for pattern are wide-ranging, and this is just one simple example using a product number.

<label>Product Number:
<input pattern=”[0-9][A-Z]{3}” name=”product” type=”text” title=”Single digit followed by three uppercase letters.”/>
</label>
  1. List

The following example shows how list and datalist are combined

<label>Your favorite fruit:
<datalist id=”fruits”>
<option value=”Blackberry”>Blackberry</option>
<option value=”Blackcurrant”>Blackcurrant</option>
<option value=”Blueberry”>Blueberry</option>
<!– … –>
</datalist>
If other, please specify:
<input type=”text” name=”fruit” list=”fruits”>
</label>
  1. Multiple

We can implement it like so:

<label>Your favorite fruit:
<datalist id=”fruits”>
<select name=”fruits”>
<option value=”Blackberry”>Blackberry</option>
<option value=”Blackcurrant”>Blackcurrant</option>
<option value=”Blueberry”>Blueberry</option>
<!– … –>
</select>
If other, please specify:
</datalist>
<input type=”text” name=”fruit” list=”fruits” multiple>
</label>

multiple isn’t exclusively for use with datalists, though. A further example for multiple might be for email addresses when sending items to friend or the attachment of files, as shown here:

<label>Upload files:
<inputtype=”file”multiplename=”upload”></label>
  1. Novalidate

We can would implement it like so:

this example shows how to use novalidate:

<form action=”process.php” novalidate>
<label for=”email”>Email:</label>
<input type=”text” name=”email” value=”gordo@example.com”>
<input type=”submit” value=”Submit”>
</form>
  1. Formvalidate

We can would implement it like so:

The following example shows how to use formnovalidate:

<form action=”process.php”>
<label for=”email”>Email:</label>
<input type=”text” name=”email” value=”gordo@example.com”>
<input type=”submit” formnovalidate value=”Submit”>
</form>

You Might Also Like

63 Comments

  1. 1

    Appreciation for the excellent writeup.. Info It was a discretion bill this. Glance complex so that you can a lot introduced pleasant from you! However, how can we communicate?

  2. Pingback: HTML | Pearltrees
  3. 4

    WOW I love it. I voted both patted and the deisgnee choice. The blue give the perfect pop, like I always say “the WOW FACTOR” and the sliver water drop crystal give Romanic and chic feeling. Love it love it love it……Question what software do you use to show your 3D design to your clients

  4. 5
  5. 6

    Right here is the right blog for everyone who wants to find
    out about this topic. You know a whole lot its almost tough to argue with
    you (not that I actually would want to…HaHa). You definitely put a fresh spin on a topic which has been discussed for many years.
    Great stuff, just great!

  6. 7

    Hi there to every , since I am actually eager of reading this webpage’s post to be updated on a
    regular basis. It consists of fastidious data.

Comments are closed.