HTML5: Текстовое поле и кнопка для начинающих

Этот урок посвящен двум 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> предлагает большую гибкость и читаемость кода.

Что будем искать? Например,программа