Этот урок посвящен двум HTML5 тегам: <textarea> для создания поля ввода большого текста и <button> для создания кнопки.
Тег <textarea>: Поле для ввода большого текста
Тег <textarea> создает поле ввода многострочного текста. Он обычно размещается внутри тега <form>. В этом примере атрибуты action и method в теге <form> опущены, поскольку обработка отправки формы не рассматривается.
<form>
<textarea></textarea>
</form>
Тег <textarea> является парным. В отличие от тега <input>, он по умолчанию имеет больший размер и позволяет изменять высоту и ширину. Разрешены переносы строк.
К тегу <textarea> можно добавлять атрибуты, аналогичные атрибутам тега <input>:
- placeholder: Подсказка, исчезающая при вводе текста (например, placeholder="Введите текст").
- maxlength: Ограничение на количество символов (например, maxlength="50").
- id: Уникальный идентификатор элемента.
- name: Имя поля (используется при отправке формы).
Атрибут value не используется для предварительного заполнения поля. Для этого текст нужно вписать между открывающим и закрывающим тегами <textarea> и </textarea>. Например:
<textarea>Просто текст</textarea>
Другие полезные атрибуты: hidden, disabled, readonly, required. Атрибут required делает поле обязательным для заполнения при отправке формы.
Управление размерами поля лучше осуществлять с помощью CSS-стилей, а не атрибутов cols (количество столбцов) и rows (количество строк).
Тег <button>: Создание кнопки
Для создания кнопок используется парный тег <button>. Внутри тега <button> можно разместить любой текст.
<button>Готово</button>
Кнопка по умолчанию является кнопкой типа «клик» (не отправляет форму). Атрибут type позволяет изменить тип кнопки:
- button: Обычная кнопка.
- submit: Кнопка отправки формы.
- reset: Кнопка сброса формы.
<button type="submit">Отправить</button>
Кнопки можно создавать с помощью тега <button> или <input type=»button»>, <input type=»submit»>, <input type=»reset»>. Оба варианта корректны. Однако, <button> предпочтительнее для кнопок вне формы.
В этом уроке мы рассмотрели создание полей ввода текста с помощью <textarea> и кнопок с помощью <button>. Выбор между <button> и <input type=»button»> зависит от контекста, но <button> предлагает большую гибкость и читаемость кода.