Меню
Спросить
< >

Урок 6. Тег Input

18 ноября 2016
Урок 6. Тег Input

Всем привет, сегодня ты получишь ответы и такие вопросы как:
Что такое тег input?
Какие атрибуты может принимать тег input?
Какие бывают теги input?
И далее, далее, далее...

input

Что такое input?
Если переводить дословно или просто вспомнить как переводиться, то что-то вроде ввод. Да, примерно такое у тега input назначение, с помощью него мы можем вводить или передавать данные, но тег input может принимать разные виды благодаря атрибуту type.

Атрибут type

Атрибут type(или тип) позволяет нам выбрать тип "инпута". По умолчанию стоит текстовый тип. Выглядит он как текстовое поле, это такое поле, куда обычно вы вводите свои данные, к примеру логин и пароль. Рассмотрим некоторые типы тега input.

  1. <input type="text"> <!--Текстовый тип, стоит по умолчанию-->

  2. type="button" <!--Тип кнопка, просто кнопка-->
  3. type="radio" <!--Тип радио-кнопка-->
  4. type="checkbox" <!--Тип чек-бокс-->
  5. type="file" <!--Тип файл, позволяет загружать файлы-->
  6. type="hidden" <!--Скрытый типок, хм...-->
  7. type="submit" <!--Кнопка, но уже умеет отправлять данные из формы-->
  8. type="reset" <!--Кнопка, умеет очищать переменные в форме-->
  9. type="password" <!--Текстовое поля, но для пароля, все что вводишь не видно глазу-->

Не много о типах radio и checkbox. Если из списка чекбоксов вы можете выбрать несколько пунктов, то радио-кнопка позволяет выбрать только один пункт. Каждый из этих input полезен по своему.

html 5 input

С приходом html 5, у тега input появились новые типы, смотрим:

  1. type="date" <!--Можно выбирать дату, время-->
  2. type="number" <!--Текстовое поле, но можно вводить только числа-->
  3. type="range" <!--Ползунок, который можно двигать-->
  4. type="email" <!--Текстовое поле для email-почты, требует знака собака(@)-->
  5. type="color" <!--input для выбора цвета-->

Подробнее про тип range обязательно посмотрите в видео ниже =)
Пошли дальше

Атрибут name

Атрибут name задает имя инпуту, с помощью имя, к примеру, мы можем обозначить индивидуально поля и принимать данные по POST-запросам, в которые пропишем это имя, на php.

Атрибут value

Атрибут value у тега input содержит в себе значение, введенное в него пользователем или машиной.

Заключение

Скопируй, а лучше напиши вручную каждый тип и потренируй свою правую, ну или какой ты больше любишь держать мышь, руку и постарайся определиться какой тип тебе больше нравится. Следи за новыми уроками для новичков по html, видео ниже.
До встречи =).

Следующая статьяПредыдущая статья