Нові значення атрибута type.

Відео: GoToWeb - Відеокурс Html і Css, урок 29, Форми html - 1 частина

Сьогодні ми розглянемо, які нові значення атрибута type повявілісь в HTML5.

Email

 
 
Types 
charset="Utf-8"gt; 
 
 
type="Email"gt;

input з типом email нічим не відрізняється від типу text, за винятком лише того, що дані самі будуть перевірятися перед відправкою форми. Якщо там буде не email, то браузер нам скаже про це.

Url

Поле з типом url, як і email, нічим не відрізняється, але перевіряє, url Чи введений або щось інше.

type="Url"gt;

Tel

Поле з цим типом визначає телефонний номер. За допомогою вже вивченого нами атрибута pattern, можна задати формат.

Відео: Значення checkbox, radio, file атрибута type елементу input

type="Tel"pattern="8 [0-9]"gt;

Number

Поле з цим типом увазі введення чисел. У цьому полі праворуч з`являться дві стрілочки, які допоможуть вказати число. Його перевагою будуть атрибути min, max і step, які дозволяють задати мінімальне, максимальне значення і крок.

type="Number"min="5"max="100"value="10"step="2"gt;

У нашому випадку крок дорівнює 2 і, отже, можна вводити числа 5,7,9 і т.д.

Range

поле range вже відрізняється. Воно буде представлено у вигляді ползунка, який ви можете рухати і тим самим вибирати потрібні вам значення. Атрибути у нього такі ж, як і у number.

Відео: Значення text, password, hidden атрибута type елементу input

type="Range"min="10"max="100"step="7"gt;

Search

Цей тип нічим особливим не відрізняється крім того, що, коли ви почнете вводити що-небудь в поле, то справа у вас з`явиться хрестик, що дозволяє його миттєво очистити.

type="Search"gt;

Color

Color - дуже корисне значення атрибута type. Ви побачите прямокутник, натиснувши на який у вас з`явиться палітра, де ви можете вибрати колір. Це дуже зручно.

type="Color"gt;

Дата

type=`Date`gt; 
type=`Time`gt; 
type=`Datetime`gt; 
type=`Datetime-local`gt; 
type=`Month`gt; 
type=`Week`gt;

Ці значення допоможуть нам вибрати дату і час. Поруч з полями з`являться стрілочки, як в number, за допомогою яких ви зможете вказати потрібне вам число, тиждень, час ...