New inputs in HTML5

0
55

New inputs:


Search – Serves for a search field.
Number – For numeric field.
Range – It will show something like a “line” in which you set a range.
Date, datetime, week, month – Field for date
Tel, email, url – You will already know

Search

<input type=”search” autofocus placeholder=”search” name=”nombre”>

In input type we are declaring the type of input, then with Autofocus means that when loading the page, this field will be self-selected.

The placeholder is the text that will appear in the inactive field, so that when we select it, it will remain blank
And in name, we assign any name to the field

Number

<input type=”number” min=”10″ max=”80″ step=”10″ placeholder=”numero” name=”nombre”>


As we said, input type declares the type of input, min declares the minimum number of characters, max the maximum number, placeholder and name we had already said.

Range

<input type=”range” min=”10″ max=”80″ placeholder=”range” name=”nombre”>

Date

<input type=”datetime”>


You can change datetime by date, datetime-local, time, week or month

Tel, email, url

<input id="input" name="input" type="email" />

You can change email by tel or url

Required attribute

Now the forms allow the ‘required’ attribute to specify that a field is required. This means that the form data will not be sent if the field marked as required is empty. You can use this attribute in two ways:

<input type=”text” name=”Input1″ required>


or

<input type=”text” name=”Input1″ required=”required”>


The placeholder attribute
This attribute allows filling the field with a predetermined value and once the user clicks on the field this value disappears. At the moment, this attribute only works in some browsers.

<input name=”search” type=”search” placeholder=”Buscar” />


Use of regular expressions
If you want only a maximum number of characters, or only uppercase, etc., to be written in a field of a form, this can be done using regular expressions used directly in the HTML code:

<form action=”” method=”post”> <label for=”username”>Nombre de Usuario: </label> <input type=”text” name=”username” id=”username” placeholder=”4 <> 10″ pattern=”[A-Za-z]{4,10}” required> <button type=”submit”>Enviar </button> </form>


LEAVE A REPLY

Please enter your comment!
Please enter your name here