Большие этикетки с малым вводом

Я создаю веб-приложение с несколькими длинными формами (~ 30 полей каждая). Многие поля имеют длинные имена меток, и я бы предпочел короткие поля ввода. Я размещаю эти поля в ряды по 3-5 полей в каждой.

Пример, в котором я бы хотел, чтобы метка переполнялась дополнительным белым пространством между полями формы, а не переносила текст:

Большие этикетки с малым вводом

Код:

<div class = "col-md-2">
@Html.LabelFor(model => model.Oopmaxind, htmlAttributes: new { @class = "control-label" })
@Html.EditorFor(model => model.Oopmaxind, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Oopmaxind, "", new { @class = "text-danger" })
</div>

С другой стороны, если у кого-то есть пример элегантно оформленных форм с длинными метками и множеством полей, поделитесь, пожалуйста.

Спасибо!

Думали ли вы о сокращении названий лейблов? например макс вместо максимума или инд., а не индивидуальный? Кроме того, сколько этикеток затронуто, а не все 30?

Rachel Gallen 10.12.2018 23:04

Я бы сказал, что около 1/3 этикеток эффективны. И, к сожалению, их нельзя сокращать. Я подумал о внедрении всплывающих подсказок вместо ярлыков, но по возможности предпочитаю использовать ярлыки.

extensionhelp 10.12.2018 23:07
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
2
122
0

Другие вопросы по теме