Вывод текста html: Текст | htmlbook.ru

: Элемент вывода — HTML

HTML-элемент вывода (<output>) является контейнерным элементом, в котором сайт или приложение могут выводить результаты вычислений или действий пользователя.

Категории контентаПотоковый контент, фразовый контент, перечисляемые, лэйбловые, сбрасываемые форма-ассоциированные элементы, явный контент.
Допустимый контентФразовый контент.
Пропуск теговНет, открывающий и закрывающий теги обязательны.
Допустимые родителиВсе элементы, которые принимают фразовый контент.
Допустимые ARIA-ролиЛюбые
DOM-интерфейсHTMLOutputElement (en-US)

Этот элемент включает глобальные атрибуты.

for

Пробело-разделяемый список id других элементов, указывающий, что эти элементы предоставили входные значения для (или иным образом повлияли) вычисления.

form

Элемент формы, с которым связан этот элемент («владелец формы»). Значением атрибута должен быть id элемента <form> в том же документе. Этот атрибут не нужен, если элемент <output> является потомком элемента <form> (в этом случае эта форма является владельцем формы), или, если элемент <output> вообще не связан с формой.

name

Имя элемента; используется для идентификации этого <output> при отправке формы.

Эта форма содержит слайдер, значение которого находится в пределах от 0 до 100, и элемент <input>, в который можно ввести второе значение. Два числа складываются и результат отображается в элементе

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

<form oninput="result.value=parseInt(a. value)+parseInt(b.value)">
  <input type="range" name="b" value="50" /> +
  <input type="number" name="a" value="10" /> =
  <output name="result">60</output>
</form>
Specification
HTML Standard
# the-output-element

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

  • Другие элементы, связанные с формой: <form>, <input>, <button>, <datalist>, <legend>, <label>, <select>
    , <optgroup>, <option>, <textarea> (en-US), <keygen> (en-US), <fieldset>, <progress> and <meter>.

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

Want to get more involved?

Learn how to contribute.

This page was last modified on by MDN contributors.

Форматированный текст | HTML | CodeBasics

Иногда возникает потребность вставить текст, сохраняя его оригинальное форматирование. Взглянем на знаменитую «лесенку Маяковского» из стихотворения «Сергею Есенину».

    Вы ушли,
            как говорится,
                          в мир в иной.
    Пустота...
            Летите,
                  в звезды врезываясь.
    Ни тебе аванса,
                  ни пивной.
    Трезвость.
    

Владимир Маяковский считал, что именно в таком виде лучше всего оформляется ритм стиха.

Оформить такой текст с помощью спецсимволов в HTML очень сложно. Придётся «жонглировать» пробельными спецсимволами. Из-за этого такую разметку будет очень сложно поддерживать в будущем:

<p>Вы ушли,</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;как говорится,</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;в мир в иной.
</p>

Для решения этой проблемы существует специальный тег <pre>, задача которого — вывести текст внутри себя с сохранением всех пробельных символов. По умолчанию тег <pre> выводит текст моноширинным шрифтом, в котором все символы имеют одинаковую ширину, в отличие от обычных шрифтов.

<pre>
Вы ушли,
        как говорится,
                      в мир в иной.
Пустота...
        Летите,
              в звезды врезываясь.
Ни тебе аванса,
              ни пивной.
Трезвость.
</pre>

Внутри тега pre можно использовать теги для оформления текста: <i>, <em>, <b>, <strong>.

Добавьте любой текст в тег <pre> и вставьте его в редактор. Попробуйте различные варианты текстов.

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

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

  • Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.
В моей среде код работает, а здесь нет 🤨

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

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

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

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

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

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

Обычно нам нужно несколько дней для внесения правок.

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

←Предыдущий

Следующий→

Нашли ошибку? Есть что добавить? Пулреквесты приветствуются https://github.com/hexlet-basics

Тег вывода HTML

❮ Предыдущий Полный справочник HTML Далее ❯


Пример

Выполнить вычисление и показать результат в элементе:


  < input type="range" value="50">
  +
  =

Попробуйте сами »


Определение и использование

Тег используется для представления результата вычисления (например, выполненного скриптом).


Поддержка браузера

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

Элемент
<выход> 10,0 13,0  4,0 5,1 11,0

Атрибуты

Атрибут Значение Описание
для element_id Задает взаимосвязь между результатом расчета и элементами, используемыми в расчете
форма form_id Указывает, к какой форме относится выходной элемент
наименование имя Задает имя элемента вывода


Глобальные атрибуты

Тег также поддерживает глобальные атрибуты в HTML.


Атрибуты событий

Тег также поддерживает атрибуты событий в HTML.


Связанные страницы

Ссылка HTML DOM: объект вывода


Настройки CSS по умолчанию

Большинство браузеров отображают элемент со следующими значениями по умолчанию:

output {
  display: inline;
}

❮ Предыдущий Полный справочник HTML Следующий ❯


ВЫБОР ЦВЕТА



Лучшие учебники
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3.CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

Основные ссылки
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference


3 Top2 Examples Примеры HTML
Примеры CSS
Примеры JavaScript
How To Примеры
Примеры SQL
Примеры Python
Примеры W3. CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery


FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

HTML-форма вывода Атрибут

❮ Тег HTML

Пример

Элемент, расположенный вне формы (но все же часть формы):

oninput=»x.value=parseInt(a.value)+parseInt(b.value)»>

+

Попробуйте сами »


Определение и использование

Атрибут формы определяет форму Тег принадлежит.

Значение атрибута формы должно быть равно id атрибут

элемент в том же документе.


Поддержка браузера

Атрибут
форма Не поддерживается Не поддерживается Не поддерживается Не поддерживается Не поддерживается

Синтаксис

Значения атрибутов

Значение Описание
form_id Указывает элемент формы, которому принадлежит элемент. Значение этого атрибута должно быть атрибутом id элемента в том же документе.

❮ Тег HTML


ВЫБОР ЦВЕТА



Лучшие учебники
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебник по Python
Учебник по W3. CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

Основные ссылки
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference


3 Top2 Examples Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM 90 | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *