Подсказывающий текст
В дизайне часто требуется вставить пояснение к текстовому полю, но не всегда для этого имеется место. Решением в таком случае является добавление подсказывающего текста непосредственно внутрь поля, при получении фокуса исходный текст должен пропадать. Это делается с помощью атрибута placeholder , значением которого служит любой текст. Подсказка делается для полей , , , , , и , иными словами, везде, где вводится текст.
Подсказывающий текст отображается серым цветом, исчезает при получении фокуса и снова появляется, если фокус теряется. Если в поле с подсказкой ввести любой текст, то подсказка больше не появится. Также её не будет при наличии атрибута value с непустым значением.
В примере 1 показано добавление подсказки к полям формы для создания авторизации.
Пример 1. Подсказывающий текст
HTML5 IE 10+ Cr Op Sa Fx
Результат примера в браузере Chrome показан на рис. 1.
Рис. 1. Вид полей с подсказывающим текстом
Как в html сделать поле для ввода текста
Тег является одним из разносторонних элементов формы и позволяет создавать разные элементы интерфейса и обеспечить взаимодействие с пользователем. Главным образом предназначен для создания текстовых полей, различных кнопок, переключателей и флажков. Хотя элемент не требуется помещать внутрь контейнера , определяющего форму, но если введенные пользователем данные должны быть отправлены на сервер, где их обрабатывает серверная программа, то указывать обязательно. То же самое обстоит и в случае обработки данных с помощью клиентских приложений, например, скриптов на языке JavaScript.
Основной атрибут тега , определяющий вид элемента — type . Он позволяет задавать следующие элементы формы: текстовое поле ( text ), поле с паролем ( password ), переключатель ( radio ), флажок ( checkbox ), скрытое поле ( hidden ), кнопка ( button ), кнопка для отправки формы ( submit ), кнопка для очистки формы ( reset ), поле для отправки файла ( file ) и кнопка с изображением ( image ). Для каждого элемента существует свой список атрибутов, которые определяют его вид и характеристики. Кроме того, в HTML5 добавлено еще более десятка новых элементов.
Синтаксис
Атрибуты
accept Устанавливает фильтр на типы файлов, которые вы можете отправить через поле загрузки файлов. accesskey Переход к элементу с помощью комбинации клавиш. align Определяет выравнивание изображения. alt Альтернативный текст для кнопки с изображением. autocomplete Включает или отключает автозаполнение. autofocus Устанавливает фокус в поле формы. border Толщина рамки вокруг изображения. checked Предварительно активированный переключатель или флажок. disabled Блокирует доступ и изменение элемента. form Связывает поле с формой по её идентификатору. formaction Определяет адрес обработчика формы. formenctype Устанавливает способ кодирования данных формы при их отправке на сервер. formmethod Сообщает браузеру каким методом следует передавать данные формы на сервер. formnovalidate Отменяет встроенную проверку данных на корректность. formtarget Определяет окно или фрейм в которое будет загружаться результат, возвращаемый обработчиком формы. list Указывает на список вариантов, которые можно выбирать при вводе текста. max Верхнее значение для ввода числа или даты. maxlength Максимальное количество символов разрешенных в тексте. min Нижнее значение для ввода числа или даты. multiple Позволяет загрузить несколько файлов одновременно. name Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать. pattern Устанавливает шаблон ввода. placeholder Выводит подсказывающий текст. readonly Устанавливает, что поле не может изменяться пользователем. required Обязательное для заполнения поле. size Ширина текстового поля. src Адрес графического файла для поля с изображением. step Шаг приращения для числовых полей. tabindex Определяет порядок перехода между элементами с помощью клавиши Tab. type Сообщает браузеру, к какому типу относится элемент формы. value Значение элемента.
Также для этого тега доступны универсальные атрибуты и события.
Закрывающий тег
HTML5 IE Cr Op Sa Fx6
Тег INPUT Ваше имя:
Каким браузером в основном пользуетесь: Internet Explorer Opera Firefox
Комментарий
Результат данного примера показан на рис. 1.
Рис. 1. Вид элементов формы в браузере
Статьи по теме
- Адрес электронной почты
- Блокирование элементов форм
- Ввод чисел
- Веб-адрес
- Выбор цвета
- Загрузка файлов
- Защита от дурака
- Календарь
- Кнопки
- Однострочное текстовое поле
- Отправка данных формы
- Переключатели
- Подсказывающий текст
- Поле для пароля
- Поле для поиска
- Поле для телефона
- Поле с изображением
- Ползунок
- Проверка технологий HTML5
- Скрытое поле
- Сумасшедшие формы
- Флажки
- Шаблон ввода данных
Многострочное текстовое поле
Для создания области, в которую можно вводить несколько строк текста, предназначен элемент . В отличие от в текстовом поле допустимо делать переносы строк, они сохраняются при отправке данных на сервер.
Поле для многострочного текста незаменимо для добавления комментариев к статьям, написания сообщений форума, вставки и редактирования постов в блоге и во многих других случаях, когда одной строки текста явно недостаточно. Синтаксис создания поля следующий.
Между тегами можно поместить любой текст, который будет отображаться внутри поля. Если текста нет, то поле будет изначально пустым.
Допустимые атрибуты перечислены в табл. 1.
| Атрибут | Описание |
|---|---|
| cols | Ширина поля в символах. |
| maxlength | Максимальное число символов текста, которое можно ввести. |
| name | Имя поля; предназначено для того, чтобы обработчик формы мог его идентифицировать. |
| rows | Высота поля в строках текста. |
| wrap | Параметры переноса строк. |
Создание поля многострочного текста показано в примере 1.
Ни один из этих атрибутов не является обязательным, поэтому простая форма для отправки текста выглядит так (пример 1).
Пример 1. Текстовое поле
Результат примера показан на рис. 1.
Рис. 1. Вид текстового поля по умолчанию
При оформлении многострочного поля применяются те же стилевые свойства, что и для однострочного текста. А именно можно изменять ширину (свойство width ), высоту ( height ), границу ( border ), цвет текста и фона ( color и background соответственно) и др. Пример создания текстового поля с разными характеристиками приведен в примере 2.
Пример 2. Оформление текстового поля
Результат данного примера показан на рис. 2.
Рис. 2. Изменение вида текстового поля
Все браузеры кроме Internet Explorer поддерживают изменение размера для . Достаточно потянуть за правый нижний уголок, который по своему виду отличается от остальных. Вот как выглядит такой уголок в Firefox (рис. 3). Вид в разных браузерах может несколько различаться, но общая схожесть сохраняется.
Рис. 3. Уголок для изменения размера
Если вам не нужно, чтобы пользователь мог менять размеры текстового поля, то добавьте свойство resize со значением none .
Тег — Текстовое поле
Тег при создании страницы используется для различных целей.
Он может быть и кнопкой, и полем для ввода текстовой информации, выпадающим списком и тд.
В зависимости от значения атрибута type.
В данном уроке мы рассмотрим тег input как текстовое поле, поле для ввода текстовых данных на странице сайта. Вообще данный тег используется вместе с тегом для отправки введенных пользователем данных. Без формы особого смысла в его использовании нет. Поэтому мы научимся создавать текстовое поле, изменять его при помощи стилей, а полноценное его использование (его, так сказать, целевое предназначение) мы рассмотрим в уроке о формах.
Основным атрибутом тега является атрибут 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.