Введите ваш адрес почты


sdcvoy.ru
Понравился сайт? Поделись с друзьями!
Главная » Html5 » Novye-atributy-v-html5-atribut-list

Новые атрибуты в HTML5. Атрибут list

С некоторыми новыми атрибутами HTML5 мы уже с вами знакомились (min,max,required,step). Все эти атрибуты имеют свои свойства. Первым атрибутом с которым я вас познакомлю будет атрибут list.

Атрибут list позволяет с помощью тега datalist создать список ввода новых данных. Имеет название идентификатора элемента datalist.

Синтаксис использования имеет следующий вид:

<input list="идентификатор">  
  <datalist id="идентификатор">  
     <option value="Текст1">  
     <option value="Текст2">  
  </datalist>  

На практике его можно использовать следующим способом:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Использование атрибута list</title>
  <style>
  .forma {
	  display:block;
	  position:relative;
	  top:40%;
	  left:30%;
	  background:#CCC;
	  border:1px solid #666;
	  width:40%;
	  padding-left:10px}
  </style>
 </head>
 <body>
   <form class="forma">
   <p>Ведите название птицы или животного</p> 
   <p><input list="animal"></p>
   <datalist id="animal">
    <option>Антилопа</option>
    <option>Бобр</option>
    <option>Ворон</option>
    <option>Гиена</option>
    <option>Дрозд</option>    
   </datalist> 
  </form> 
 </body>
</html>

В результате вы должны получить следующее:

Атрибут list в HTML5

Я думаю у вас все получиться. Из примера видно как при этом можно использовать незнакомый для вас элемент datalist. На этом я думаю следует закончить этот урок и переходить к следующему



наверх