Учебник по HTML Вводу многострочного текста

Введение

HTML-тег <textarea> позволяет пользователям вводить и отправлять свободный текст в форме. В этом практическом занятии мы создадим простую HTML-форму с вводом <textarea> и применим некоторые часто используемые атрибуты.

Примечание: Вы можете практиковать программирование в index.html и изучить Как писать HTML в Visual Studio Code. Нажмите кнопку "Go Live" в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем можно обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Это Guided Lab, который предоставляет пошаговые инструкции, чтобы помочь вам учиться и практиковаться. Внимательно следуйте инструкциям, чтобы выполнить каждый шаг и получить практический опыт. Исторические данные показывают, что это лабораторная работа уровня начальный с процентом завершения 92%. Он получил 100% положительных отзывов от учащихся.

Создайте HTML-скелет

Создайте пустой HTML-файл с именем index.html и введите базовый HTML5-шаблонный код.

<!doctype html>
<html>
  <head>
    <title>HTML Textarea Tag Tutorial</title>
  </head>
  <body>
    <!-- Ваш HTML-код здесь -->
  </body>
</html>

Добавьте элемент формы

Добавьте элемент <form> в тело HTML. Мы будем использовать эту форму для сбора информации от пользователя.

<form>
  <!-- Элементы формы здесь -->
</form>

Добавьте ввод в текстовую область

Добавьте элемент <textarea> внутри элемента <form>. Вы можете настроить размер текстовой области, установив атрибуты rows и cols.

<form>
  <label for="feedback">Введите обратную связь:</label>
  <textarea id="feedback" name="feedback" rows="10" cols="50"></textarea>
</form>

Здесь мы добавили метку для описания поля ввода (обратная связь) и ввод <textarea> с атрибутом id "feedback". Атрибут name используется для идентификации поля ввода на стороне сервера.

Добавьте другие атрибуты формы

Мы можем добавить другие HTML-атрибуты к нашим элементам формы и ввода. Например, мы можем добавить атрибут required, чтобы убедиться, что пользователь вводит какой-то текст.

<form>
  <label for="feedback">Введите обратную связь:</label>
  <textarea
    id="feedback"
    name="feedback"
    rows="10"
    cols="50"
    required
  ></textarea>
  <input type="submit" value="Submit Feedback" />
</form>

Здесь мы добавили элемент input типа submit, чтобы пользователь мог отправить свою обратную связь. Теперь пользователь не может отправить пустую форму, так как атрибут required был добавлен к textarea.

Дальнейшая настройка с использованием CSS

Наконец, вы можете применить несколько стилей CSS к элементам формы и ввода, чтобы сделать форму более привлекательной визуально.

<style>
  form {
    border: 1px solid #ccc;
    padding: 10px;
    margin: 20px auto;
    max-width: 500px;
  }

  label,
  textarea,
  input[type="submit"] {
    display: block;
    margin-bottom: 10px;
    width: 100%;
  }
</style>

Здесь мы установили границу, добавили отступы и отстояние, и ограничили максимальную ширину формы. Мы также настроили отображение и ширину элемента метки, текстовой области и элемента ввода для отправки.

Резюме

В этом практическом занятии мы научились создавать базовую HTML-форму с вводом в текстовую область и применять часто используемые атрибуты. Мы также применили несколько стилей CSS для настройки внешнего вида элементов формы. Вы можете дальнейше настраивать форму и элементы ввода в соответствии с вашими требованиями.

HTML Ввод многострочного текста