Закрыть
Вход на сайт
Регистрация
Вы успешно зарегистрировались!

Перейти к обучению
Регистрация
Войти на сайт

HTML
<input>

А мы продолжаем изучать очень интересные теги, которые добавляют некой красоты к нашему сайту. Этот новый тег называется «input».

<input type="text">

Он у нас на странице ставит вот такую вот штуковину.


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

Для чего эта штуковина нужна? А вдруг вам на странице придётся делать какие-нибудь формы, допустим, для ввода каких-нибудь данных. Начиная от формы для заявки, заканчивая оформлением корзины. Об этом мы поговорим чуть позже, ну, в смысле, очень далеко чуть позже, прям практически в самом конце нашего курса о том, как используются эти «input’ы». Тем не менее мы сейчас о них немножечко поговорим, разберёмся, как они вообще выглядят, как они работают, чтобы потом они не стали для вас чем-то новым, страшным и непонятным. 

У «input’а» есть самый главный атрибут, который называется «type», и есть несколько стандартных значений, которые можно здесь прописать. Первый – это text, обычный «input», в котором мы прописываем какой-то текст. 

Если вы не прописываете «type» никакой, а просто ставите «input», то значение text ставится автоматически. В исходнике не прописывается ничего, но знайте, что автоматом ставится «type» текст. 

Следующий важный атрибут, это «name», в котором мы прописываем название нашего «input’а». В дальнейшем, когда мы с вами будем изучать формы, как отправлять данные, этот атрибут нам очень понадобится. В данном случае он ни несет никакой нагрузки. Но лучше, чтобы упростить себе жизнь, когда пишите какой-то сайт, лучше «name’ы» прописывать. Здесь мы пишем на английском название того, что вводим в «input». Допустим, еcли мы пишем имя, то «name»; если телефон, то «tel»; если e-mail, то «email»; если вводим кракозябры, то вводим кракозябры, как вариант. Давайте оставим «name». 

<input type="text" name="name">

Ещё один важный атрибут – это «placeholder», в котором мы пишем, допустим, следующее: «Имя».

<input type="text" name="name" placeholder="Имя">

И, видите, теперь сереньким появилось слово «Имя», и, когда мы начинаем прописывать, этот текст исчезает.

То есть это подсказочка, что нужно вводить в данный «input». Если мы начинаем вводить текст, то понимаем, что сюда нужно ввести имя, и пишем «Александр», допустим. 

На самом деле, это очень интересный атрибут, потому что многие о нём почему-то не знают и пишут иногда супер-мудрёные Java-скрипты, чтобы сделать реализацию этой штуковины.

Там есть, на самом деле, ещё куча атрибутов для «input’ов», но мы их не будем разбирать. Можете просто по подсказочкам посмотреть. Большая часть нам пока что вообще не нужна.

Самые важные по сути – это «name» и «placeholder». Там можно ещё какие-то дополнительные настройки позадавать по «input’ам», например, «autocomplete», «autofocus», но пока что не будем забивать себе голову вот этими замудрёными штуковинами. Лучше рассмотрим, какие ещё есть типы «input’ов».

Итак, следующий тип, который мы с вами узнаем, –  это «tel».

<input type="tel">

Это «input», который позволяет ввести телефон. На самом деле, сейчас визуальной нагрузки никакой не появляется, но просто, чтобы браузер понимал, что мы сюда вводим, и потом, когда будем обрабатывать «input’ы», чтобы мы понимали, куда вводили и что вводили, мы можем использовать атрибут «tel».

Если мы используем атрибут «email», то здесь мы должны прописать e-mail, и здесь будет вводиться e-mail.

<input type="email">

Данный тип позволяет провериить ввел ли человек e-mail или нет. Но для этого, тег input необходимо разметить в теге <form>

<form>
  <input type="email">
  <button>Кнопка</button>
</form>

Теперь если нажать на кнопку, то, если в поле email ввести случайный текст, появится вот такое сообщение: 

То есть автоматически браузер проверит этот «input» на наличие того, что прописали вы e-mail или не прописали вы e-mail. 

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

Поэтому смотря какие данные вводите, если это просто текст, то «text», если нужно, чтобы кто-то ввёл телефон, то вводите «tel», если нужно ввести e-mail, то нужно обязательно ставите «e-mail». Всё, в принципе, не столь уж такое сложное правило. 

И последний type из этого разряда – «password». Сюда вводится пароль, то есть все символы заменяются на такие вот точечки.


В этом как раз и есть идея типа «password» в том, что символы заменяются на точечки. 

Поехали дальше! Прописываем в атрибуте type вот такую штуку: «checkbox». И у нас появляется вот такой вот квадратик на странице, который мы можем кликнуть и поставить там галочку.


Но есть ещё один тип похожих «input’ов», который называется «radio».



Разница заключается в том, что у «checkbox’ов» – квадратики, у «radio» – кругляшки. В целом, визуально разница меняется, но концептуально разница очень большая. Давайте разберёмся в чём. 

Итак, если мы ставим «checkbox’ы» – квадратики, – то идея в том, что, если они объединены в одну группу, мы можем поставить галочек сколько угодно. Можем одну галку, можем три, можем две, в общем, как хотим. Можем вообще ничего не ставить. В случае с «radio» мы можем поставить только одну из группы. Для того, чтобы их объединить им нужно дать одинаковый атрибут «name». Давайте просто зададим «name» «radio» им троим.

<input type='radio' name='radio'>
<input type='radio' name='radio'>
<input type='radio' name='radio'>

И теперь, внимание, куда бы я ни кликнул, в один из трёх, у меня всегда будет выделяться только один. То есть checkbox-ов я могу выделить три, а «radio» я могу выделить только один.

На этом всё. На самом деле тема «input’ов» гораздо более обширная и интересная, но сейчас для начала вот этой информации, которую я вам дал, вполне достаточно, чтобы понять, что это за штуковины, где они используются и как с ними мутить. Всё, что касается того, что нужно изучить дальше, понять, как они работают и где их вообще использовать, как из них данные извлекать, это мы уже будем говорить в уроке по вёрстке, когда будем верстать сайт и настраивать форму, чтобы данные, которые мы вводим в «input’ы», отправлялись куда-то на почту. Ну, или куда-то отправлялись ещё. Смотря от того, что вы хотите от этих «input’ов». На этом всё. Давайте пойдём дальше.

Предыдущий урок Следующий урок
Тестирование

Чтобы пройти тестирование, необходимо войти или зарегистрироваться