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


sdcvoy.ru
Понравился сайт? Поделись с друзьями!
Главная » Html5 » Atribut-placeholder-autofocus

Атрибут placeholder

Атрибут placeholder позволяет без помощи JavaScript применить дополнительно в поле поиска на сайте текст-подсказку. Это очень удобно и этим приёмом пользуются многие разработчики сайтов. Как вы, наверное, помните из предыдущих уроков поле поиска задается с помощью типа данных search. Давайте попытаемся увязать его с данным атрибутом:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Использование атрибута placeholder</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><input type=search placeholder="Ваша подсказка">
   <input type="submit" value="Искать"></p>
  </form> 
 </body>
</html>

У вас должно получиться примерно следующее:

placeholder в HTML5

Думаю с этим никаких сложностей не возникнет если, что пишите спрашивайте. У себя на сайте я применил этот атрибут в поиске от Google.

Атрибут autofocus

Этот атрибут используется для установки фокуса на определенном элементе формы. Например, вы можете нажать на кнопку Отмена не переводя курсор на эту кнопку после загрузки страницы (воздействовать на элемент можно с помощью клавиатуры). Ну и чтобы понять как воспользоваться атрибутом autofocus, давайте взглянем на небольшой пример:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Атрибут placeholder</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">
   <fieldset>
   <p>Нажмите клавишу Enter, чтобы отменить действие</p>
   <p><button value="next">Следующий</button>&nbsp;&nbsp;
<button autofocus value="exit">Отмена</button></p>
   </fieldset>
  </form> 
 </body>
</html>

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

Атрибут autofocus в HTML5

Использовать данный атрибут следует очень осторожно. Лучше всего его применять для основной функции сайта, например для формы поиска на сайте. Вот в принципе и всё, что я хотел рассказать вам в данном уроке, а в следующем уроке вы познакомитесь с другими новыми атрибутами HTML5.



наверх