Атрибут wrap в HTML


Содержание

HTML :: Ввод данных в форму в виде многострочного текста

Использование тега

Для ввода многострочного текста, например, при оставлении комментариев или отправки сообщений, в HTML 5 предусмотрен отдельный элемент ‘textarea’ , формирующийся парным тегом

(от англ. textarea – текстовая область). В отличие от текстового поля ‘input’ в элементе ‘textarea’ допустимо делать переносы строк, которые сохраняются при отправке данных на сервер. Отметим, что внутри контейнера ‘textarea’ разрешается писать любой текст, включая конструкции тегов. Этот текст будет отображаться браузером внутри текстового поля и при желании может быть удален пользователем во избежание отправки на сервер вместе с остальными данными.

Атрибуты rows и cols тега

Для того, чтобы задать ширину и высоту поля, используются атрибуты cols и rows . Атрибут cols принимает в качестве значения натуральные числа, которые определяют ширину текстового поля в виде количества символов моноширинного шрифта. По умолчанию принимает значение «20» . Поскольку ширина текстового поля ‘textarea’ зависит от текущего размера шрифта, то с увеличением или уменьшением размера шрифта будет изменяться и ширина поля в пикселях. Атрибут rows задает высоту текстового поля в строках (без прокрутки) и принимает в качестве значения натуральные числа. По умолчанию принимает значение «2» . Опять же, при изменении размера шрифта, изменяется и высота поля в пикселах.

Атрибут wrap тега

Чтобы сообщить браузеру, как осуществлять перенос строк в элементе ‘textarea’ используется атрибут wrap , который может принимать два значения:

  • «soft» – строки, которые не вмещаются в поле по ширине, автоматически переносятся на новую строку, при этом на сервер отправляется одна строка без разрывов; если же разрыв строки был добавлен при помощи клавиши Enter , то в процессе отправки данных на сервер он сохраняется; значение используется по умолчанию;
  • «hard» – строки, которые не вмещаются в поле по ширине, автоматически переносятся на новую строку, но при этом все переносы строк сохраняются в процессе отправки данных на сервер, включая и разрывы, сделанные клавишей Enter ; обязательным условием использования данного значения является наличие атрибута cols .

Использование элемента ‘textarea’ показано в примере №1.

Пример №1. Использование атрибутов элемента ‘textarea’

Другие атрибуты тега

Кроме перечисленных атрибутов у элемента ‘textarea’ имеются атрибуты, аналогичные атрибутам элемента ‘input’: autofocus , disabled , form , maxlength , minlength , name , placeholder , readonly , required . Их можно посмотреть в нашем справочнике здесь.

Элемент textarea

Элемент textarea HTML — это поле для ввода текста, состоящего из нескольких строк, и его редактирования. Он используется для ввода и редактирования длинных фрагментов текста.

Содержимое этого элемента представляет его исходное значение. Оно отображается в текстовом поле после загрузки документа или после нажатия кнопки сброса в форме.

Примеры

В первом примере мы создадим форму с элементом управления textarea со всеми значениями по умолчанию. Также мы установим атрибут placeholder с подсказкой относительно того, контент какого типа должен вводиться в поле. Она будет отображаться, когда текстовая область пуста:

Во втором примере мы установим начальное значение в качестве содержимого HTML textarea . Оно будет использоваться для заполнения элемента управления сразу после загрузки документа, а также после сброса формы.

В отличие от поля для ввода однострочного текста элемент textarea использует начальное значение в качестве содержимого ( вместо атрибута value ):

Далее мы используем атрибуты cols и rows , чтобы задать количество символов, которые могут одновременно отображаться в элементе управления. Браузеры рассчитывают ширину и высоту элемента, умножая эти значения на ширину и высоту символа используемого шрифта.

Ширина HTML input textarea вычисляется относительно ширины символа используемого шрифта. Так как символы не всегда имеют одинаковую ширину, то браузеры могут использовать различные методы, чтобы округлить это значение:

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

Соответствие minlength проверяется только при отправке данных формы, а в maxlength браузеры проверяют, чтобы пользователь не ввел больше символов, чем указано через этот атрибут.

Атрибут maxlength элемента textarea HTML хорошо поддерживается браузерами, а minlength – нет:

Теперь мы используем атрибут required , который был введен в HTML5 . Когда этот атрибут указан, браузер не позволяют отправить данные формы, пока соответствующее поле не будет заполнено.

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

Атрибуты

Специальные атрибуты

autocomplete

Указывает браузеру, должен ли он автоматически предлагать варианты при вводе данных для этого элемента управления, пытаясь угадать, что пользователь печатает. Для данного атрибута элемента HTML textarea допустимы два значения, они не чувствительны к регистру:

  • on: браузер должен предлагать варианты автоматически. Это значение по умолчанию;
  • off: браузер не должен предлагать варианты автоматически.

autofocus

Логическое значение, указывающее браузеру установить фокус ввода на элементе управления после завершения загрузки документа или при открытии диалогового окна, в котором отображается элемент управления. Если атрибут имеет значение « autofocus «, пустую строку ( » « ), то элемент управления будет находиться в фокусе ввода сразу после загрузки страницы или диалогового окна.

Илон Маск рекомендует:  vh в CSS

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

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

dirname

Название нового поля, предназначенного для передачи направления ввода текста. Этот атрибут, введенный в HTML5 , позволяет авторам корректно обрабатывать значения, вводимые на языках с различным направлением письма. Для этого добавляется отдельное поле, заполняемое вместе с формой. Название поля будет выступать в качестве значения атрибута.

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

disabled

Логическое значение, указывающее отключен ли данный элемент управления или нет. Если атрибут принимает значение « disabled » или пустую строку ( «» ), то элемент управления отключен.

Отключенные элементы управления при отображении формы неактивны, блокируются от взаимодействия с пользователем и их значения ( если таковые имеются ) не передаются при отправке данных формы.

Значение атрибута идентификатора формы, с которой HTML input textarea связан.

Этот атрибут является новым и был введен в HTML5 . Он помогает определить принадлежность элементов управления во вложенных или разделенных формах.

inputmode

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

  • verbatim : алфавитно-цифровой ввод на латинице текста, такого как имена пользователей, пароли, коды товаров и т.д.;
  • latin : ввод на латинице на предпочтительном для пользователя языке с подключением вспомогательных средств, таких как автоматическое заполнение. Предназначен для передачи данных от пользователей компьютеру. Например, через форму поиска;
  • latin-name : ввод на латинице на предпочтительном для пользователя языке, с подключением некоторых вспомогательных средств. Таких, как автоматическое заполнение предлагаемых имен из списка контактов и автоматическая установка регистра;
  • latin-prose : ввод для передачи данных от человека человеку с автоматическим заполнением предлагаемого текста и автоматической расстановкой заглавных букв в начале предложений;
  • full-width-latin : ввод на латинице на втором языке пользователя, с подключением вспомогательных средств для ввода символов в полном размере и передачи данных от человека человеку, таких как автоматическое заполнение предлагаемого текста и расстановка заглавных букв в начале предложений;
  • kana : ввод на кана или ромадзи, стандартный ввод на хирагана, использующий ввод символов в полном размере с поддержкой преобразования в кандзи. Предназначен для ввода текста на японском языке;
  • kana-name : то же самое, что и « kana «, но с подключением вспомогательных средств для ввода человеческих имен из списка контактов;
  • katakana : ввод на катакана с использованием символов и поддержкой преобразования в кандзи. Предназначен для ввода текста на японском языке;
  • numeric : ввод цифр, включая клавиши для цифр от 0 до 9 , с использованием указанного символа, разделяющего тысячи и символа для отрицательных чисел. Рекомендуется для элемента ввода цифр;
  • tel : ввод номеров телефонов, включая клавиши цифр от 0 до 9 , символа « # » и символа « * «. В некоторых локальных зонах это значение атрибута HTML textarea может включать буквенные мнемонические метки. Рекомендуется для элемента ввода номера телефона;
  • email : ввод текста в локали пользователя с использованием клавиш для ввода адреса электронной почты. Например, символов « @ » и « . «. Рекомендуется для элемента ввода адреса электронной почты;
  • url : ввод текста в локали пользователя с использованием клавиш для ввода адресов. Например, символов « / » и « . «, а также для быстрого ввода частей доменных имен, таких как « www .» или « .co.uk «. Рекомендуется для элемента управления ввода URL-адреса .

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

maxlength

Целое число, указывающее максимальное количество символов, которое может содержать значение элемента управления.

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

minlength

Целое число, указывающее минимальное количество символов, которое может содержать значение элемента управления.

Разработчики не должны полагаться на атрибут minlength . Пользователи могут отправить данные формы через браузер, не поддерживающий эту функцию.

Поддержка браузерами атрибута minlength является крайне слабой. Лучше не полагаться на этот атрибут, пока его поддержка не улучшится.

Имя тега textarea в HTML . Оно будет отправлено браузером обработчику, связанному с содержимым элемента. Они вместе будут соответствовать паре имя-значение, которая используется для обработки данных формы.

placeholder

Текст подсказки, как должно быть заполнено поле ( пример или краткое описание ). Браузеры могут отображать содержимое атрибута в элементе управления, хотя он не имеет никакого значения. Когда пользователь начинает вводить собственный текст, подсказка должна удаляться из элемента управления.

readonly

Логическое значение, указывающее браузеру запретить пользователю изменять значение элемента управления. Если атрибут имеет значение « readonly » или пустую строку ( «» ), то пользователю запрещено изменять значение в элементе управления.

Хотя этот атрибут не позволяет редактировать значения элемента управления, но блокируются не все действия: пользователь все равно сможет выделить и скопировать текст в элементе управления.

required

Логическое значение, указывающее на то, может ли данный элемент управления оставаться незаполненным. Если атрибут имеет значение « required » или пустую строку ( «» ), то пользователь должен заполнить элемент управления, чтобы отправить данные формы.

Если HTML input textarea с атрибутом required не заполнен, то при попытке пользователя отправить данные формы, браузер выдаст ошибку и отменит отправку данных.

Поддержка браузеров для атрибута required является неполной. Разработчикам придется полагаться на скрипты, чтобы обеспечить данный функционал во всех браузерах.

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

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

Илон Маск рекомендует:  Что такое код asp iiswebfile

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

  • soft : текст не будет переноситься при отправке данных формы, но он может переноситься при отображении. Это значение по умолчанию;
  • hard : текст будет переноситься при отправке данных формы с помощью добавления новых строк. Таким образом длина текста не превысит ширину фрейма.

Это относительно новый атрибут textarea HTML , его поддержка является неполной. Разработчикам придется полагаться на скрипты, чтобы обеспечить этот функционал во всех браузерах.

Данная публикация представляет собой перевод статьи « textarea element » , подготовленной дружной командой проекта Интернет-технологии.ру

WRAP Attribute | wrap

HTML (DHTML)

WRAP Attribute | wrap Property

Sets or retrieves how to handle wordwrapping in the object .

HTML ELEMENT WRAP = sWrap . >
Scripting object . wrap [ = sWrap ]
sWrap String that specifies or receives one of the following values.
soft Default. Text is displayed with wordwrapping and submitted without carriage returns and line feeds.
hard Text is displayed with wordwrapping and submitted with soft returns and line feeds.
off Wordwrapping is disabled. The lines appear exactly as the user types them.

The property is read/write. The property has a default value of soft .

Expressions can be used in place of the preceding value(s), as of Microsoft® Internet Explorer 5. For more information, see About Dynamic Properties.

To detect the difference between soft and hard you must submit the content within the textArea to an HTTP server.

This example dynamically sets the wrap property of a textArea to the value selected by the user.

There is no public standard that applies to this property.

Для чего теги “оборачивают” Wrapper’ом?

Для чего теги «оборачивают» Wrapper’ом и почему у Wrappera часто ставят position:relative ? Что вообще дает использование wrapper’а?

4 ответа 4

Это может быть связано с position:absolute для вложенного элемента. Дело в том, что без обёртки с position:relative координаты такого элемента будут отсчитываться относительно всего документа, а с обёрткой — относительно обёрточного элемента.

Это всего лишь контейнер для удобства, заключая блоки в обертку проще центрировать, задавать общую ширину. и т.д. Релейтив ставят если собираются абсолютно позиционировать внутренние блоки.

В целом, wrapper используют для удобства позиционирования. Самому wrapper , присваивают минимум свойств.

А иногда вообще оставляют его без них. Почему просто не оставлять див без класса? Во первых, противоречит некоторым методологиям (например БЭМ). Во вторых, слово «wrapper» переводится как «обертка» и дает понять, тем кто будет работать с кодом после вас, зачем этот div нужен (при беглом просмотре). Также, он может послужить прослойкой для функционирования различных скриптов.

Wrap and align html attributes when line reaches wrap-line-length #1285

Comments

Copy link Quote reply

Helayxa commented Nov 2, 2020

Description

I would like to get the combination of the power of :
«wrap-attributes»: «force-aligned»,
«wrap-line-length»: 120
If my line reaches the wrap-line-length, it should wrap the whole line and align them with the previous line.

Input

The code looked like this before beautification:

Expected Output

The code should look like this after beautification with that feature:

This comment has been minimized.

Copy link Quote reply

cheerypick commented Nov 12, 2020

+1, me and my team need the same feature, and it seems to be the same feature as requested here: #1262
I saw this exact feature requested at VSCode github too: microsoft/vscode#2204 (last comment)

I played with the source code a bit and have some implementation that seems to work: a new option for «wrap_attributes» — «aligned» which doesn’t force the attrs to wrap unless the line length is reached, and aligns them properly when the line is wrapped.

Can something like this work, @bitwiseman?

If so, we could discuss the details or I can open a PR. (But to be honest, I am not exactly an open source expert and a bit confused about the tests and python version and whatnot). Well, html beautifier doesn’t exist in python so maybe it’s not an issue :) So guidance is appreciated!

This comment has been minimized.

Copy link Quote reply

bitwiseman commented Nov 13, 2020

@cheerypick
Thanks for taking a swing at implementing this.

Yeah, you don’t need to worry about the python version for HTML beautifier changes — there is no python implementation for that module yet.

For testing, make sure you can run the build and it works locally. Then update test/data/html/tests.js. When you run the build again, it will regenerate the runnable tests from that data file. You can see an example of this in #1158 . If you want to try some simple tests first, cool. If you can make sense of the way that the matrix test generation works, add your new value to the attribute wrap tests at test/data/html/tests.js#L323.

Whatever the case feel free to start a PR whenever you like and we can discuss there.

Атрибут wrap в HTML

Метод помещает выбранные элементы внутрь заданного элемента.

version added: 1.0 .wrap( wrappingElement )

Оборачивает каждый выбранный элемент в элемент-обертку wrappingElement.

version added: 1.4 .wrap( function(index) )

Выбранные элементы обертываются содержимым, которое будет возвращено в виде html функцией function. Функция вызывается для каждого элемента в наборе.

Примеры. Первый параграф при клике будет обернут div.wrap1, второй — результатом работы функции, для примера эта функция просто возвращает div.wrap2:

HTML:
JS:

Связанные уроки:

20 полезных методов jQuery, которые следует использовать в работе

Итак, Вы попробовали использовать jQuery, и он Вам понравился! Пора перейти на следующую ступень на лестнице мастерства. В данном уроке будут продемонстрированы 20 функций и способов jQuery, о которых Вы может быть раньше не слышали.

15 особенностей jQuery 1.4

jQuery постоянно развивается. Релиз версии 1.4 состоялся в январе. jQuery 1.4 получила много новых функций, расширений и имеет значительно лучшую производительность. Данная статья посвящена описанию основных улучшений jQuery 1.4.

HTML :: Ввод данных в форму в виде многострочного текста

Использование тега

Для ввода многострочного текста, например, при оставлении комментариев или отправки сообщений, в HTML 5 предусмотрен отдельный элемент ‘textarea’ , формирующийся парным тегом

Илон Маск рекомендует:  Глава 7 редактирование исходных файлов

(от англ. textarea – текстовая область). В отличие от текстового поля ‘input’ в элементе ‘textarea’ допустимо делать переносы строк, которые сохраняются при отправке данных на сервер. Отметим, что внутри контейнера ‘textarea’ разрешается писать любой текст, включая конструкции тегов. Этот текст будет отображаться браузером внутри текстового поля и при желании может быть удален пользователем во избежание отправки на сервер вместе с остальными данными.

Атрибуты rows и cols тега

Для того, чтобы задать ширину и высоту поля, используются атрибуты cols и rows . Атрибут cols принимает в качестве значения натуральные числа, которые определяют ширину текстового поля в виде количества символов моноширинного шрифта. По умолчанию принимает значение «20» . Поскольку ширина текстового поля ‘textarea’ зависит от текущего размера шрифта, то с увеличением или уменьшением размера шрифта будет изменяться и ширина поля в пикселях. Атрибут rows задает высоту текстового поля в строках (без прокрутки) и принимает в качестве значения натуральные числа. По умолчанию принимает значение «2» . Опять же, при изменении размера шрифта, изменяется и высота поля в пикселах.

Атрибут wrap тега

Чтобы сообщить браузеру, как осуществлять перенос строк в элементе ‘textarea’ используется атрибут wrap , который может принимать два значения:

  • «soft» – строки, которые не вмещаются в поле по ширине, автоматически переносятся на новую строку, при этом на сервер отправляется одна строка без разрывов; если же разрыв строки был добавлен при помощи клавиши Enter , то в процессе отправки данных на сервер он сохраняется; значение используется по умолчанию;
  • «hard» – строки, которые не вмещаются в поле по ширине, автоматически переносятся на новую строку, но при этом все переносы строк сохраняются в процессе отправки данных на сервер, включая и разрывы, сделанные клавишей Enter ; обязательным условием использования данного значения является наличие атрибута cols .

Использование элемента ‘textarea’ показано в примере №1.

Пример №1. Использование атрибутов элемента ‘textarea’

Другие атрибуты тега

Кроме перечисленных атрибутов у элемента ‘textarea’ имеются атрибуты, аналогичные атрибутам элемента ‘input’: autofocus , disabled , form , maxlength , minlength , name , placeholder , readonly , required . Их можно посмотреть в нашем справочнике здесь.

Атрибут wrap в HTML

В статье представлено несколько трюков, которые вы, возможно, не знали и которые вы найдёте полезными в своих разработках.

1. Изображение в качестве фона, которое пропадает при вводе текста.

Вы можете добавить фоновое изображение также, как и в любой другой элемент. В этом случае стиль по умолчанию для textarea изменяется, а именно бордер толщиной в 1px изменяется на скошенную границу. Исправляется это явным указанием бордера.

Фоновое изображение может повлиять на читаемость текста. Поэтому фоновое изображение надо убирать при получении фокуса и возвращать его, если textarea осталась без текста. Например, используя jQuery это можно сделать таким образом:

2. Placeholder в HTML5

В HTML5 появился новый атрибут, называемый placeholder. Значение этого атрибута показывается в текстовом элементе и исчезает при получении фокуса, а также в случае когда в элементе введён текст.

HTML5 placeholder поддерживается в следующих браузерах: Safari 5, Mobile Safari, Chrome 6, и Firefox 4 alpha.

3. Placeholder, HTML5 с поддержкой старых браузеров используя jQuery

Самый простой способ проверить поддерживается ли атрибут браузером это проверить с помощью javaScript:

Затем можно написать код, который будет срабатывать если браузер не поддерживает атрибут placeholder.

4. Удаляем обводку textarea

Браузеры на движках webkit, а также в FireFox 3.6, обводят textarea, когда он находится в фокусе. Удалить эту обводку можно используя css-свойство outline для webkit-браузеров. Для FireFox используется свойство -moz-appearance, либо можно просто установить элементу бордер или фон.

5. Запрет изменения размера

Webkit-браузеры добавляют к textarea визуальный элемент в правом нижнем углу, который позволяет изменять размер текстовой области. Если вы хотите убрать эту возможность, то вам необходимо использовать следующее css-свойство:

6. Добавление возможности изменения размера

jQuery UI позволяет добавить возможность изменения размера для textarea. Это работает для всех браузеров, а для webkit-браузеров подменяет стандартное поведение. Для того, чтобы использовать эту возможность, необходимо подключить jquery.ui и написать следующий код:

7. Изменение размера под содержимое

James Padolsey написал удобный jQuery-скрипт который позволяет автоматически изменять размер textarea под его содержимое. Похоже что этого плагина больше нет, но можно использовать например вот этот. Плагин содержит много настроек, но самый простой способ его использовать это:

8. Nowrap

Чтобы не переносить слова на новые строки, для всех элементов используется css-свойство white-space, которое не работает с textarea. Для textarea необходимо использовать атрибут wrap.

9. Удаляем скролл-бары в IE

IE показывает вертикальный скролл-бар для всех textarea. Вы можете их спрятать используя overflow: hidden, но в таком случае он не будет показываться при увеличении контента. Поэтому правильнее использовать следующий подход:

В этом случае скролл-бар не будет отображаться когда в textarea помещается весь текст, но выведется в случае необходимости.

Примеры к статье вы можете посмотреть здесь.

HTML | wrap Attribute

The wrap attribute is used to specify that in which manner the text is to be wrapped in a text area when a form is submitted.
The wrap attribute can be applied on the

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the «Improve Article» button below.

Атрибут wrap в HTML

CSS is often used to control the rendering or presentation of a textarea . However, regardless of how the textarea is presented visually in a browser, the newline characters will be added on the basis of where the cols attribute dictates they should be added. So, when we render the textarea above with the CSS width property set to 100% it displays at the full width of the parent element. However, when submitted, a carriage return would be added after every 20 characters.

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL