SdelaemBlog

Создание Сайтов и их настройка

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

Главная Статьи HTML & CSS ВидеоКурс HTML Textarea в HTML и тег button. Поле ввода многострочного текста и кнопки.

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

Оставьте свой коммент
ДОСТАВКА СТАТЕЙ ПОЧТОЙ, на дом

Ознакомьтесь с условиями хранения ваших данных

Комментариев пока нет, но вы можете стать первым!

Чтобы оставить комментарий, заполните, пожалуйста форму ниже:

Смайлы

Нажимая на кнопку "Комментировать" Вы согласшаетесь с условиями политики конфиденциальности

Обязательно для Заполнения!

Обязательно для Заполнения!

Проверка комментариев включена. Прежде чем Ваши комментарии будут опубликованы пройдет какое-то время.

Отправить жалобу разработчику сайта

Если у Вас возникли проблемы, не стесняйтесь отправлять жалобу, она обязательно будет учтена и все будет исправлено.

[contact-form-7 404 "Not Found"]

Спасибо большое за поддержку проекта! :)

Для поддержки проекта, выберите убодный способ для оплаты: