Нововъведения в HTML5

HTML5 има няколко нови вида inputs за форми. Тези нови услуги подобряват контрола върху inputs.

Този урок разглежда всички нови inputs:

• color 
• date
• datetime
• datetime-local
• email
• month
• number
• range
• search
• tel
• time
• url
• week

	Inputs които не се поддържат от вашия браузър ще се държат като нормален текст.

Input Type: number

Тагът number се използва за input полетата които трябва да съдържат числови стойности.

Можете да зададете забрани на числата.

В зависимост от браузъра, забраните могат да бъдат приложени върху input полето.

Пример

<form>
  Количество (между 1 и 5):
  <input type="number" name="quantity" min="1" max="5">
</form>

Input Забрани

Това е таблица съдържаща най-използваните input забрани:

= Ново в HTML5.

Ще научите още за input забраните в другия урок.

Пример

<form>
  Количество:
  <input type="number" name="points" min="0" max="100" step="10" value="30">
</form>

Input Type: date

Input поле което трябва да съдържа дата.

В зависимост от браузъра, може да се отвори и падащо меню.

Пример

<form>
  Рожден ден:
  <input type="date" name="bday">
</form>

Можете да добавите забрана към този input:

Пример

<form>
  Въведете дата преди 1980-01-01:
  <input type="date" name="bday" max="1979-12-31"><br>
  Въведете дата след 2000-01-01:
  <input type="date" name="bday" min="2000-01-02"><br>
  <input type="submit" value="Send"> 
</form>

Input Type: color

Поле което трябва да съдържа цвят.

В зависимост от браузъра, може да се отвори падащо меню.

Example

<form>
  Кой е вашият любим цвят?:
  <input type="color" name="favcolor">
</form>

Input Type: range

Поле което трябва да съдържа разстояние.

В зависимост от браузъра полето може да бъде изобразено като слайдер.

Пример

<form>
  <input type="range" name="points" min="0" max="10">
</form>

Можете да използвате следните атрибути за да зададете забрана : min,max,step,value.

Input Type: month

Month type позволява на потребителя да избере месец и година.

В зависимост от браузъра може да се отвори падащо меню.

Пример

<form>
  Рожден ден (месец и година):
  <input type="month" name="bdaymonth">
</form>

Input Type: week

Week type позволява на потребителя да избере седмица и година.

В зависимост от браузъра може да се отвори падащо меню.

Пример

<form>
  Изберете седмица:
  <input type="week" name="week_year">
</form>

Input Type: time

Time type позволява на потребителя да избере време (без часова зона).

В зависимост от браузъра може да се отвори падащо меню.

Пример

<form>
  Изберете време:
  <input type="time" name="usr_time">
</form>

Input Type: datetime

Datetime type позволява на потребителя да избере дата и час (с часова зона).

В зависимост от браузъра може да се отвори падащо меню.

Example

<form>
  Рожден ден (дата и час):
  <input type="datetime" name="bdaytime">
</form>

Input Type: datetime-local

Datetime-local type позволява на потребителя да избере дата и час (без часова зона)

В зависимост от браузъра може да се отвори падащо меню.

Пример

<form>
  Рожден ден (дата и час):
  <input type="datetime-local" name="bdaytime">
</form>

Input Type: email

Еmail type е input поле което трябва да съдържа електронна поща.

В зависимост от браузъра ел.пощата може да бъде веднага потвърдена след като бъде изпратена.

Някои SmartPhone-и разпознават email type, и добавшт ".com" към ключовите думи за да съвпадне с email input.

Пример

<form>
  Eлектронна поща:
  <input type="email" name="email">
</form>

Input Type: search

Search type се използва за полетата за търсене (полето за търсене се държи като нормално поле за текст).

Пример

<form>
  Google Търсене:
  <input type="search" name="googlesearch">
</form>

Input Type: tel

Тel type е поле което трябва да съдържа телефонен номер.

За момента tel type се поддържа само в Safari 8.

Пример

<form>
  Телефон:
  <input type="tel" name="usrtel">
</form>

Input Type: url

Url type е поле което трябва да съдържа URL адрес.

Някои SmartPhone-и разпознават url type, и добавят ".com" към ключовите думи за да съвпадне с полето.

Пример

<form>
  Вашата страница:
  <input type="url" name="homepage">
</form>