: Элемент вывода — HTML
HTML-элемент вывода (<output>) является контейнерным элементом, в котором сайт или приложение могут выводить результаты вычислений или действий пользователя.
| Категории контента | Потоковый контент, фразовый контент, перечисляемые, лэйбловые, сбрасываемые форма-ассоциированные элементы, явный контент. |
|---|---|
| Допустимый контент | Фразовый контент. |
| Пропуск тегов | Нет, открывающий и закрывающий теги обязательны. |
| Допустимые родители | Все элементы, которые принимают фразовый контент. |
| Допустимые ARIA-роли | Любые |
| DOM-интерфейс | HTMLOutputElement (en-US) |
Этот элемент включает глобальные атрибуты.
foridдругих элементов, указывающий, что эти элементы предоставили входные значения для (или иным образом повлияли) вычисления.
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> как говорится,</p> <p> в мир в иной.
</p>
Для решения этой проблемы существует специальный тег <pre>, задача которого — вывести текст внутри себя с сохранением всех пробельных символов. По умолчанию тег <pre> выводит текст моноширинным шрифтом, в котором все символы имеют одинаковую ширину, в отличие от обычных шрифтов.
<pre>
Вы ушли,
как говорится,
в мир в иной.
Пустота...
Летите,
в звезды врезываясь.
Ни тебе аванса,
ни пивной.
Трезвость.
</pre>
Внутри тега pre можно использовать теги для оформления текста: <i>, <em>, <b>, <strong>.
Добавьте любой текст в тег <pre> и вставьте его в редактор. Попробуйте различные варианты текстов.
Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:
- Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.
Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.
Мой код отличается от решения учителя 🤔Это нормально 🙆, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.
В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.
Прочитал урок — ничего не понятно 🙄Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов.
Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.
←Предыдущий
Следующий→
Нашли ошибку? Есть что добавить? Пулреквесты приветствуются https://github.com/hexlet-basics
Тег вывода HTML
❮ Предыдущий Полный справочник HTML Далее ❯
Пример
Выполнить вычисление и показать результат в элементе
Попробуйте сами »
Определение и использование
Тег используется для представления результата вычисления (например, выполненного скриптом).
Поддержка браузера
Числа в таблице указывают первую версию браузера, которая полностью поддерживает элемент.
| Элемент | |||||
|---|---|---|---|---|---|
| <выход> | 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 ReferenceCSS 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 атрибут элемент в том же документе.
Поддержка браузера
| Атрибут | |||||
|---|---|---|---|---|---|
| форма | Не поддерживается | Не поддерживается | Не поддерживается | Не поддерживается | Не поддерживается |
Синтаксис
Основные ссылки
HTML ReferenceCSS 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 оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения.
Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.