Многострочное поле ввода в HTML. Как обработать длинный текст?

многострочное поле ввода в html. как обработать длинный текст?

Создание поля многострочного текста

В отличие от однострочных полей ввода, изученных в предыдущей статье, работа с многострочным текстом имеет свои особенности. Он используется для обработки данных, вводимых в свободной форме: комментарии к статьям, личные сообщения в соцсетях, описание навыков в резюме и т.д.

В HTML для создания полей ввода многострочного текста используется специальный элемент <textarea>. Он в обязательном порядке должен иметь закрывающий тег. Браузер отобразит такое поле в виде прямоугольной области. Размер этой области может быть изменен пользователем самостоятельно, захватом нижнего правого края с помощью мыши и перетаскиванием.

Также HTML позволяет явным образом задать размеры многострочного текстового поля. Особенность заключается в том, что они указываются не в процентах или пикселях, а в количестве букв и строк, вмещающихся по горизонтали и вертикали.

Атрибут cols элемента <textarea> определяет ширину поля в символах, а rows задает количество строк. Оба атрибута должны иметь числовые значения.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Пример создания многострочного поля ввода</title>
    </head>
    <body>
        <form>
            <!-- поле ввода с описанием -->
            <label>
                <span>Опишите ваш образ жизни:</span><br>
                <textarea cols="40" rows="5"></textarea>
            </label><br>

            <!-- кнопка отправки формы -->
            <input type="submit" value="Отправить">
        </form>
    </body>
</html>
пример отображения многострочного поля ввода в браузере
рис 1. Отображение многострочного поля в браузере

Блокировка содержимого поля ввода

Элемент <textarea> можно заблокировать для редактирования. В HTML есть атрибут disabled. Его использование окрасит поле ввода в серый цвет, а при отправке формы данные не будут включены в тело запроса.

Атрибут readonly обладает схожим поведением. Его добавление не вызовет закрашивание поля серым цветом, но текстовое содержимое станет недоступным для редактирования. В отличие от атрибута diasbled, данные из такого многострочного поля будут включены в тело запроса при отправке.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Пример блокировки полей от редактирования</title>
    </head>
    <body>
        <form>
            <!-- поля ввода с описанием -->
            <label>
                <span>Комментарий к статье:</span><br>
                <textarea disabled cols="40" rows="2">мне очень понравилось изложение</textarea>
            </label><br><br>
            <label>
                <span>Заметки и предложения:</span><br>
                <textarea readonly cols="40" rows="2">нужно больше практических примеров</textarea>
            </label><br>

            <!-- кнопка отправки формы -->
            <input type="submit" value="Отправить">
        </form>
    </body>
</html>
пример отображения заблокированных полей ввода
рис 2. Отображение заблокированных полей

Значение по умолчанию и подсказки

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

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Пример установки значений и подсказок</title>
    </head>
    <body>
        <form>
            <!-- поля ввода с описанием -->
            <label>
                <span>Краткая биография:</span><br>
                <textarea cols="40" rows="2">моя история началась с ...</textarea>
            </label><br><br>
            <label>
                <span>Планы на будущее:</span><br>
                <textarea placeholder="чего вы хотите достигнуть?" cols="40" rows="2"></textarea>
            </label><br>

            <!-- кнопка отправки формы -->
            <input type="submit" value="Отправить">
        </form>
    </body>
</html>

использование подсказок и предустановленных значений
рис 3. Предустановленные значения и подсказки

Управление вводом текста

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

Если элементу <textarea> добавить атрибут required, его заполнение станет обязательным. При попытке отправить незаполненную форму, браузер покажет сообщение об ошибке.

Одной из важных особенностей поля ввода многострочного текста является управление переносами строк. Оно влияет не на визуальное оформление, а на то, как данные будут отправлены на сервер. Если к элементу <textarea> добавить атрибут wrap со значением soft, часть текста, не помещающаяся в строке, будет переноситься на новую. Однако при отправке формы значение будет передано одной строкой, без каких-либо переносов. HTML позволяет сохранить переносы строк в отправляемых данных, если значением атрибута wrap является hard.

Также нужно отметить. Чтобы добавить многострочный текст в запрос при отправке формы, элемент <textarea> должен иметь атрибут name с уникальным значением.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Пример с контролем ввода многострочного текста</title>
    </head>
    <body>
        <form>
            <!-- поле ввода с описанием -->
            <label>
                <span>Личное сообщение другу:</span><br>
                <textarea wrap="hard" required maxlength="60" cols="40" rows="2"></textarea>
            </label><br>

            <!-- кнопка отправки формы -->
            <input type="submit" value="Отправить">
        </form>
    </body>
</html>
пример контроля ввода в многострочное текстовое поле
рис 4. Сообщение о неправильном заполнении

Последние публикации