Подготовительный курс HTML и CSS: Textarea

Часто мы хотим дать пользователю возможность набрать не одну строчку текста, а сразу несколько. Например, если пользователь хочет оставить отзыв. Для этого используется элемент <textarea>, позволяющий вводить несколько строчек текста.

Оставьте свой отзыв

<form>
  <textarea></textarea>
</form>

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

По умолчанию высота и ширина <textarea> зависит от настроек браузера. Это значит, что в разных браузерах высота и ширина может меняться. Для того, чтобы установить одинаковое значение, используются атрибуты rows и cols, означающие количество строк и столбцов соответственно.

<form>
  <textarea rows="5" cols="30">textarea с 5 строками и 30 столбцами</textarea>
</form>

Задание

Создайте форму, у которой файл с обработчиком данных лежит по адресу /people. Внутри формы создайте поле для многострочного ввода. Количество строк для ввода: 4. Количество столбцов: 30

Как с вами связаться? 🙃

Команда проекта находится в телеграм-сообществе по ссылке https://ttttt.me/HexletLearningBot. Там можно задать любой вопрос и повлиять на проект

Упражнение не проходит проверку — что делать? 😶

Если вы зашли в тупик, то самое время поговорить с нашим асситентом Тота во вкладке "ИИ-помощник". Как правильно задать вопрос:

В моей среде код работает, а здесь нет 🤨

Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.

Мой код отличается от решения учителя 🤔

Это нормально 🙆, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи. В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.

Прочитал урок — ничего не понятно 🙄

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

Нашли ошибку? Есть что добавить? Пулреквесты приветствуются

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

Привет! Я Тота и моя задача помочь в обучении. Чтобы активировать меня, нужно зарегистрироваться или залогиниться, если у вас уже есть аккаунт

Ваше упражнение проверяется по этим тестам

1const { test } = require('tests');
2
3test(({ query, expect }) => {
4  const form = query(document, 'form');
5  const textarea = form.querySelector('textarea');
6
7  expect(form).to.have.attr('action', '/people');
8  expect(textarea).to.have.attr('rows', '4');
9  expect(textarea).to.have.attr('cols', '30');
10
11});
12

Решение учителя откроется через:

20:00

← ПредыдущийСледующий →