<MyRusakov.ru />

Финансовая грамотность от А до Я

Финансовая грамотность от А до Я

Данный курс в кратчайшие сроки обучит Вас финансовой грамотности. Эти знания позволят Вам получить, как минимум, серьёзную финансовую стабильность, а, как максимум, финансовую независимость.

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

Помимо самого курса Вас ждёт ещё бесплатный ценный Бонус: «Ранний выход на пенсию». В рамках этого Бонуса Вы узнаете, какой должен быть капитал конкретно в Вашем случае, варианты его получения, а также какие есть стратегии вывода капитала на пенсии и где их можно протестировать.

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Какая тема Вас интересует больше?

HTML 5 атрибуты для работы с полями формы.

HTML 5 атрибуты для работы с полями формы.

Сегодня мы с вами разберём несколько новых атрибутов, появившихся в HTML5 для полей формы.

Placeholder

Атрибут placeholder позволяет без скриптов написать текст в поле, который будет появляться, когда нет фокуса, и исчезать, когда фокус есть.

<html>
<head>
  <title>placeholder</title>
  <meta charset="utf-8">
</head>
<body>
  <input type="text" placeholder="Какой-то текст">
</body>
</html>

Autofocus

Этот атрибут позволяет установить фокус в любое поле сразу при загрузке страницы. Например, вы можете это наблюдать, когда заходите в поисковик.

<html>
<head>
  <title>autofocus</title>
  <meta charset="utf-8">
</head>
<body>
  <input type="text" autofocus>
  <input type="text">
  <input type="text">
</body>
</html>

Несмотря на то, что у нас 3 поля, фокус будет в первом.

Required

Атрибут required позволяет сделать поле обязательным для заполнения. Это бывает очень удобно при проверке форм до отправки.

<html>
<head>
  <title>required</title>
  <meta charset="utf-8">
</head>
<body>
  <input type="text" required>
  <input type="submit" value="Отправить">
</body>
</html>

Попробуйте оставить поле пустым и нажать кнопку "Отправить".

Autocomplete

При использовании этого атрибута, когда пользователь начнёт вводить что-то в поле, браузер предложит ему значения, которые он когда-то вводил раньше. Если вы не хотите этого, поставьте значение off.

<html>
<head>
  <title>autocomplete</title>
  <meta charset="utf-8">
</head>
<body>
  <input type="text" autocomplete="on">
</body>
</html>

Pattern

Если вы знакомы с регулярными выражениями, то этот атрибут поможет вам облегчить проверку форм. После того, как пользователь введёт данные, браузер сверится с регулярным выражением в данном атрибуте и, если что-то не так, сообщит об этом.

<html>
<head>
  <title>pattern</title>
  <meta charset="utf-8">
</head>
<body>
  <input type="text" pattern="[0-7]">
</body>
</html>

Datalist

Атрибут datalist позволяет при вводе данных подсказать пользователю возможные значения.

<html>
<head>
  <title>datalist</title>
  <meta charset="utf-8">
</head>
<body>
  <input type="text" list="cities">
  <datalist id="cities">
   <option>Петрозаводск</option>
   <option>Москва</option>
   <option>Санкт-Петербург</option>
   <option>Воронеж</option>
   <option>Нижний Новгород</option>
  </datalist>
</body>
</html>

В datalist вы пишите возможные варианты и id, который указываете в атрибуте list. Теперь попробуйте начать вводить одно из названий городов.

Итак, в этой статье мы с вами разобрали основные атрибуты для работы с полями формы в HTML5.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (3):

MichaLem MichaLem 13.01.2015 09:55:24

+respect za stat'u!

Ответить

Eugene_Stone Eugene_Stone 14.07.2015 15:55:14

А как сделать так, чтобы атрибут datalist не учитывал регистр? Если в атрибуте указано слово-"Свойство", а я пишу в форме -"свойство", то значения не выпадают

Ответить

tihon0 tihon0 06.01.2017 14:22:37

Хороший вопрос. К тому же, datalist - это не атрибут, а новый элемент. А вот list да, это уже атрибут, который указывается в input и значением которого является id элемента datalist, который нужно связать с этим input.

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.