Textarea в HTML и тег button. Поле ввода многострочного текста и кнопки.

ВИДЕОКУРС HTML. УРОК 40.

Рубрикатор статьи

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

Сегодня изучим еще пару тегов и их атрибуты. Узнаем, как в форму добавить поле для ввода многострочного текста. И поговорим об еще одном способе добавления кнопок в HTML-форму.

Textarea в HTML и тег button. Поле ввода многострочного текста и кнопки.

HTML-тег textarea: Многострочный текст.

Тег <textarea> чем-то похож на обычное текстовое поле, о котором мы уже говорили немного ранее, так как также позволяет вводить в поле текст. Однако если вспомнить видео урок о текстовом поле, то мы сразу сможем заметить разницу. Она заключается в том, что в текстовое поле мы можем вводить только одну строку текста. А тег <textarea> позволяет написать многострочный текст. То есть использовать не одну строку, а сколько угодно. Именно тег <textarea> дает возможность добавить в форму поле для ввода сообщения или комментария. То есть применять его мы можем как в формах комментирования, так и в формах обратной связи.

Видеокурс "Технические секреты групп Вконтакте" доступен для скачивания!

Не получается сделать меню в группе Вконтакте? Устали платить другим за добавление меню в Вашу группу? Хотели бы научится всем техническим тонкостям и экономить свои деньги? Тогда скачайте курс прямо сейчас!

Также стоит отметить, что HTML-тег <textarea> имеет два обязательных HTML-атрибута, которые мы должны использовать всегда. Это атрибуты, которые отвечают за размеры поля.

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

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

Пример HTML-кода поля ввода многострочного текста. Не забываем, что этот код должен находиться между тегами <form>.

<textarea cols="80" rows="50"></textarea>

HTML-тег button: Кнопки.

HTML-тег <button> отвечает за добавление кнопок в HTML-форму. Однако мы помним, что в одном из прошлых видео мы уже говорили о том, как добавить кнопки. Тогда для этого мы использовали тег <input> с атрибутом type значение, которого и позволяло добавлять кнопки и другие элементы.

Но существует и второй способ указания кнопок с помощью тега <button>. А для определения назначения кнопки существует атрибут type, изменяя значения, которого мы можем определить назначение кнопки. Как мы можем помнить, назначений у кнопок может быть всего три: обычная кнопка-пустышка, кнопка сброса введенных данных и кнопка отправки.

А в чем разница между этими способами. Все очень просто. HTML-тег <button> который ориентирован конкретно на кнопки, дает нам больше возможностей в оформлении этих элементов. Например, на кнопке с использованием тега <button> мы можем использовать такие элементы, как изображения или таблицы, что в свою очередь не возможно с использованием тега <input>.

Пример HTML-кода добавления кнопки с использованием тега <button> и значения button атрибута type. Добавляется между тегами <form>.

<button type="button">Обычная кнопка</button>

Видео урок: Textarea в HTML и тег button. Поле для ввода многострочного текста и кнопки.

HTML-справочник и другие материалы можно и нужно скачать здесь!

В следующем видео продолжим изучение HTML-форм.

Видеокурс "Технические секреты групп Вконтакте" доступен для скачивания!

Не получается сделать меню в группе Вконтакте? Устали платить другим за добавление меню в Вашу группу? Хотели бы научится всем техническим тонкостям и экономить свои деньги? Тогда скачайте курс прямо сейчас!

VN:F [1.9.22_1171]
Оценка статьи: 1.0/10 (1 голос)
Автор: Михаил Веб Дата публикации: 19.05.2014