HTML5 Forms 1.0 or Let’s Form!

Hungarian Version!

We can meet with forms throughout the internet. They are crucial elements of the wegpages. Fortunately during the standard’s development greater attention has been given to the forms. In current condition the HTML5 standard contains 13 new input or modified operation types.

HTML5 input types

Let’s see then the 13 new HTML5 input types (I’m gonna give a simple example for every type with a representative value):

color – A native color elector which helps to chose a color.

<input type="color" value="#99BBEE">

date – Allows the user to select a Date.

<input type="date" value="13-01-2012">

datetime – Allows the user to select the Date and Time.

<input type="datetime" value="13-01-2012T13:13:13.13">

datetime-local – Allows the user to select the Local Date and Time.

<input type="datetime-local" value="13-01-2012T13:13">

email – E-mail address elector input type.

<input type="email" value="">

month – Select a Month and a Year.

<input type="month" value="01-2012">

number – Select a number.

<input type="number" value="5">

range – Selection field with a special slide. Step scale is also available (I’m gonna write more from this. Nowadays not all the browsers support this)

<input type="range" value="10">
 <!— default values are min="0", max="100", step="1". -->

search – simple search field

<input type="search" value="[what r u lookin for?]">

tel – telephone number input field

<input type="tel" value="[+36301234567]">

time – Time input field.

<input type="time" value="13:13">

url – web address input type

<input type="url" value="">
<!—You have to define the protocoll in every case! http:// ftp:// -->

week – A special week-elector field

<input type="week" value="2012-W3">

Let’s see for these a simple (non CSS3) example.

Due to length of the post i will not put the Demo’s source out. I would like to tell You that bigger part of the browsers doesn’t support these new input types. If You are curious of your browser form support check this page out:

HTML5 Attributes – or ease on the programmer’s life

With the help of these new attributes we can achieve very clever tricks simply and swift without javascript. I’m going to mention all of the current attributes but i will speak of in detail just couple of them. autocomplete – automatic complement. Its switches are on-off. Could be useful very often if we are not going to let the browser to offer a new value by premises (already filled forms) into the input field. (Could be interesting from security aspect)

<input type="text" autocomplete="off" />

autofocus – Turn Form into „focus” what means we can define at the page loading on which input field have to jump first.

<input type="text" autofocus="true" />

formaction – Override the ACTION attribute of the entire form field.
formenctype – Coding the form field’s data (MIME). Override the ENCTYPE attribute.
formmethod – Procedure to send the URL. Override the METHOD attribute.
formnovalidate – By send the field will not be checked. Override the NOVALIDATE attribute.
formtarget – The open path of the target.
•    _blank: new window
•    _parent: Opens in the parent-document
•    _self: default. original opening window
•    _top: the target opens on top of the window
•    framename: in case of iframe

list – (datalist) – new element used to create datalist connecting to this element.

I show you the use both of them with a simple example.

<datalist id="Auto brand">
<option value="FORD">
<option value="OPEL">
<option value="FIAT">
<input type="text" list="Auto brand">

max – Input field’s maximum value
min – Input field’s minimum value
multiple – Allowing multiple selection e.g.: picture upload or open multiple files.
novalidate – The given input field will not be checked.
pattern – A regular expression. With this we can define that e.g.: how many number/letter have to write of the user into the input field.

<input type="text" pattern="[A-z]{3}" title="3 digit country code"/>

placeholder – Showing the text in the input field.

<input name="first_name" placeholder="What is your name?" type="text">

readonly – Input field with read only content.
required – Input field. Information needed for Filling.

<input type="text" required="true" />

spellcheck – for check the content.
step – Can be used with the following types: number, range, date, datetime, datetime-local, month, time and week.
A very simple demo is available here.

HTML5 Elements

datalist – Interconnected with the list element. I have showed its use above.
keygen – As its name implies we can make keys with it. The client keeps the private key and the server keeps the public one.
with the help of the key-pair assures authenticating for the user. Temporarily for security reasons the browsers don’t support.

<form action="dkeygen.asp" method="get">
Username: <input type="text" name="usr" />
Encryption: <keygen name="sec" />
<input type="submit" />

output – I would like to except a mathematics example for its use.

<form oninput="c.value=parseInt(a.value)+parseInt(b.value)">
<input type="number" name="a" value="100" />
+<input type="number" name="b" value="100" />
=<output name="c" for="a b"></output>

In the next part of the article we are going to make – with the help of CSS3 – a nice form.


Creative Commons Licenc
HTML5 Forms 1.0 or Let’s Form! a Creative Commons Nevezd meg! – Ne add el! – Így add tovább! 2.5 Magyarország Licenc alatt van.
Permissions beyond the scope of this license may be available at

You may also like...