How to add static text inside an input form
Because disabled controls that do not receive focus and are ignored in tabbing navigation, are not posted. The readonly property only can’t be changed by the user.
How about wrapping your input inside a div (let’s call it div.wrapper for ease), and then you can add some text in the div.wrapper with «.domain.com» aligned to the right? Like this for example:
You can style your div to make it look like your input and can make sure the actual input has no border, etc., so it’s indistinguishable from div.wrapper.
It is a bit of a hack, but why not?
I’m not sure if this can be accomplished using just one input form.
Maybe what you are seeing there is not a single input form, but an input form next to a static text.
Как сделать текст внутри input html
Создайте <input type="password"> с цветной подсказкой внутри (должен правильно выглядеть, не обязан работать):
В дальнейшем мы сможем при помощи JavaScript сделать, чтобы текст при клике пропадал. Получится красивая подсказка.
P.S. Обратите внимание: type="password" ! То есть, просто value использовать нельзя, будут звёздочки. Кроме того, подсказка, которую вы реализуете, может быть как угодно стилизована.
P.P.S. Вокруг INPUT с подсказкой не должно быть лишних отступов, блоки до и после продолжают идти в обычном потоке.
Подсказка
Надвиньте элемент с текстом на INPUT при помощи отрицательного margin .
Решение
Надвинем текст на INPUT при помощи отрицательного margin-top . Поднять следует на одну строку, т.е. на 1.25em , можно для красоты чуть больше – 1.3em :
Также нам понадобится обнулить «родной» margin у INPUT , чтобы не сбивал вычисления.
Текст в input и textarea по умолчанию или замещающий текст. Placeholder.
Как часто нам приходится реализовывать замещающий текст (текст в поле ввода, который исчезает при фокусировке) для полей ввода? Да, практически, в каждом проекте. Чаще всего это бремя ложилось на JavaScript события onFocus и onBlur. Но с приходом и быстрым распространением HTML 5 объемы кода для реализации замещающего текста сводится к минимуму.
Это происходит благодаря новому атрибуту placeholder у <input> и <textarea> .
Итак, если вы уверены, что все пользователи вашего проекта используют “нормальные” браузеры, то для создания замещающего текста достаточно этого:
Но, как известно, в семье не без урода. IE не поддерживает вплоть по 9 версию. Opera и Safari – только последние версии. Для этого случая нам, как и обычно, приходится мудрить с JavaScript. Для начала напишем функцию, которая сможет проверить, можем ли мы в текущем браузере использовать атрибут placeholder для полей ввода:
Теперь, используя её и любимый jQuery реализуем кроссбраузерный замещающий текст на примере <textarea> :
Отсюда не сложно понять как сделать это для <input> .
Хочу обрадовать, что есть способ реализовать placeholder еще быстрее и проще. Можно просто воспользоваться jQuery плагином Placeholder =)
UPD: placeholder аттрибут давно является стандартом. Статья устарела.
Как оформить поле ввода: советы и техники
Поле ввода HTML — простой и удобный элемент. Оно содержит более 30 вариантов атрибутов и является одним из самых надежных и заслуживающих изучения HTML-тегов. Поскольку пользователи постоянно взаимодействуют с полями на странице, приходится прилагать множество усилий, чтобы сделать их максимально удобными. Однако по ходу дела могут возникнуть различные сложности.
Базовая разметка
Помечать поля — отличная CSS-практика. В статье мы будем использовать вложенное поле внутри разметки метки, которое связывает метку и входной тег и устраняет необходимость указывать атрибут for для метки и id для ввода. К тому же это значительно упрощает стилизацию поля.
Другой альтернативой может послужить тег div в качестве обертки для таких элементов, как позиционирование, чтобы у них был общий родитель. Тег fieldset также может быть полезен в некоторых случаях. Данный метод позволяет расположить метку и ввод рядом и рассматривать их как единое целое.
Еще более короткая и допустимая альтернатива — использовать тег label с полем ввода внутри, но с атрибутом aria-label для читателей экрана, а затем применить псевдоэлемент CSS after для создания заполнителя.
Все три альтернативы подойдут для типа стиля, который будет использоваться в данной статье, поэтому выберите любой из них по своему предпочтению. Ниже показано, что все три параметра отображают одно и то же на странице. Результат отображен в браузере Chrome.
Для чего мы ставим метку после ввода? Данный шаг дает возможность использовать такие состояния ввода, как focus и т. д. Таким образом мы сможем настроить метку и контролировать ее внешний вид и анимацию. В качестве альтернативы можно использовать Javascript, но это выходит за рамки данного руководства.
Начальная настройка
Если вы не используете CSS-нормализаторы, вам все же стоит добавить такие элементы CSS, как border-box и box-sizing — они важны для данного руководства. Если в конечном итоге готовое поле выглядит не так, как в статье, то, скорее всего, вам понадобится следующий фрагмент кода:
Базовый стиль
Придадим данной области очень простой и минималистичный вид. Мы cможем улучшить его по ходу работы.
Для этого поля размер текста составит 14 пикселей. Элемент placeholder будет располагаться над полем ввода, поэтому необходимо установить относительное ( relative ) положение.
Стиль поля ввода в основном предназначен для его сброса, например для удаления внешнего вида и границ. Обратите внимание, что ширина поля ввода определяет размер элемента custom-field . Следующей важной деталью здесь является заполнение, которое нужно сопоставить при размещении элемента-заполнителя наверху.
Мы расположили заполнитель слева от 12 пикселей, чтобы он соответствовал заполнению ввода. Мы также использовали преобразование для выравнивания по вертикали -50% с верхней частью — 22 пикселя. Такое количество пикселей необходимо для создания идеально центрированного преобразования. Верхняя часть 50% также работает, но из-за сообщения об ошибке мы используем пиксели.
Чтобы текст заполнителя не был слишком длинным, ограничиваем его ширину максимальным 100%-значением минус 24 пикселя (сумма входных левых и правых отступов). Затем устанавливаем переполнение в виде многоточия.
Вы можете использовать переменную CSS, но, если вы измените заполнение ввода позже, это также повлияет на заполнитель.
Эффект всплывающей метки
Если нажать на поле, заполнитель уменьшиться и переместится в верхний левый угол над полем.
Чтобы добавить этот переход, нужно обозначить пространство над полем, куда будет перемещаться заполнитель. Оно также пригодится, если перед полем появится другой элемент. 20 пикселей на верхней границе — отличный вариант: метка остается центрированной, а граница выступает внешней частью.
Далее нужно узнать, когда ввод получает фокус, чтобы анимировать заполнитель. Воспользуемся сиблинг-комбинатором, чтобы выбрать заполнитель, а затем уменьшить шрифт, установить темный цвет и поднять его на 10 пикселей.
При наличии значения заполнитель должен оставаться в таком положении, даже если фокус отсутствует. Достичь этой цели можно несколькими способами. Например, использовать псевдокласс ввода :valid вместе с атрибутом required . Однако стоит учитывать, что это работает только для обязательных полей.
Другой альтернативой является использование Javascript для определения класса, вне зависимости от наличия значения. Однако данное руководство предназначено только для CSS, поэтому laceholder-shown вместе с атрибутом заполнителя может послужить отличным решением.
Чтобы получить хорошую анимацию, можно добавить переход наверх, размер шрифта и цвет в элемент-заполнитель.
Отображение сообщения об ошибке
В зависимости от формы, вам может потребоваться отобразить сообщение об ошибке. Для тега метки можно включить другой элемент для ошибки.
Важно помнить, что поле ошибки по ширине равно полю ввода и располагается под ним. Вы также можете проверить наличие ошибки и отобразить элемент сообщения об ошибке.
Вежливое значение показывает то, как следует сообщить пользователю об ошибке. Для данного сценария необходим такой атрибут, чтобы помочь с текстом mix ox внутри тега label.
Вывод
Данные техники можно применять для создания полей, при этом не затрагивая доступность и SEO. Разобраться в них более подробно вам поможет исходный код.