HTML для начинающих
Тег <input> при создании страницы используется для различных целей.
Он может быть и кнопкой, и полем для ввода текстовой информации, выпадающим списком и тд.
В зависимости от значения атрибута type.
В данном уроке мы рассмотрим тег input как текстовое поле, поле для ввода текстовых данных на странице сайта. Вообще данный тег используется вместе с тегом <form> для отправки введенных пользователем данных. Без формы особого смысла в его использовании нет. Поэтому мы научимся создавать текстовое поле, изменять его при помощи стилей, а полноценное его использование (его, так сказать, целевое предназначение) мы рассмотрим в уроке о формах.
Итак, тег input.
Синтаксис:
<input type="text" size="10" value="" placeholder="HTML5 - поясняющий текст" name="text_box">
Основным атрибутом тега является атрибут type. В зависимости от значения этого атрибута тег принимает разные формы и служит для различных целей.
Наиболее часто используемые значения атрибута type:
text - текстовое поле
password - поле для ввода пароля
button - кнопка
file - форма выбора файла
submit - кнопка для отправки данных с формы
radio - переключатели
Плюс в HTML5 добавлено много значений атрибута, что существенно упростит работу верстальщика - многое что делалось при помощи JS теперь будет делаться лишь сменой типа.
С помощью атрибута size задается длина поля равная числу символов (моноширинного шрифта).
Текст который вводится в текстовом поле заполняется в атрибуте value.
Placeholder используется для того чтобы если value="" (пустой строке) в инпуте высвечивался текст находящийся в данном атрибуте.
Соответственно при вводе текста пользователем текст placeholder-а скрывается. Используется это для пояснения пользователю для чего используется данное поле, какую информацию требуется ввести.
(когда-то это делалось при помощи JS, теперь все намного проще, но отработает это лишь в браузерах с поддержкой HTML5)
Атрибут name определяет имя элемента. Требуется для того чтобы на серверный скрипт мог получить доступ к данным.
Во второй части видеоурока мы научимся изменять внешний вид текстового поля применяя CSS.
С помощью height и width определим высоту и ширину поля.
Изменим фон и добавим картинку с помощью backgroung-image, backgroung-color, backgroung-position, backgroung-repeat;
Изменим границы элемента и закруглим углы при помощи border и border-radius.
