Как создать метку внутри элемента <input>? - PullRequest
Новая
       37

Как создать метку внутри элемента <input>?

41 голосов
/ 23 апреля 2009

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

Я знаю, что это очень распространенный трюк, но я не знаю, как это сделать ..

Какое самое простое / лучшее решение?

Ответы [ 13 ]

118 голосов
/ 19 марта 2010

Если вы используете HTML5, вы можете использовать атрибут placeholder. 

<input type="text" name="user" placeholder="Username">
44 голосов
/ 23 апреля 2009 
<input name="searchbox" onfocus="if (this.value=='search') this.value = ''" type="text" value="search">

Лучшим примером будет кнопка поиска SO! Вот откуда я получил этот код. Просмотр источника страницы является ценным инструментом.

37 голосов
/ 05 января 2010

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

Его легко реализовать и он хорошо подходит для программ чтения с экрана и пользователей без JavaScript.

Взгляните на два примера здесь: http://attardi.org/labels/

Я обычно использую второй метод (label2) в моих формах.

4 голосов
/ 23 апреля 2009

Общий подход состоит в том, чтобы использовать значение по умолчанию в качестве метки, а затем удалить его, когда поле получает фокус.

Мне действительно не нравится этот подход, так как он имеет доступность и удобство использования.

Вместо этого я бы начал использовать стандартный элемент рядом с полем.

Затем, если JavaScript активен, установите класс для элемента-предка, который заставляет некоторые новые стили применять это:

  • Относительно расположите div, который содержит ввод и метку
  • Абсолютно позиционируйте этикетку
  • Абсолютно расположите вход сверху метки
  • Удалите границы ввода и установите его цвет фона на прозрачный

Затем, а также всякий раз, когда вход теряет фокус, я проверяю, имеет ли вход значение. Если это так, убедитесь, что у родительского элемента есть класс (например, «hide-label»), в противном случае убедитесь, что у него нет этого класса.

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

Таблица стилей будет использовать это имя класса в селекторе, чтобы скрыть метку (с помощью text-indent: -9999px; обычно).

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

2 голосов
/ 14 сентября 2011

Я собрал решения, предложенные @ Кори Уокер с расширениями от @Rafael и одна форма @Tex ведьма была немного сложна для меня и придумал решение, которое, надо надеяться,

защита от ошибок с отключенным JavaScript и CSS.

Управляет цветом фона поля формы, чтобы показать / скрыть метку. 

<head>

<style type="text/css">
<!--
    input {position:relative;background:transparent;} 
-->
</style>

<script>
    function labelPosition() {
        document.getElementById("name").style.position="absolute"; 
            // label is moved behind the textfield using the script, 
            // so it doesnt apply when javascript disabled
    }
</script>

</head>
<body onload="labelPosition()">

<form>
        <label id="name">Your name</label>
        <input type="text" onblur="if(this.value==''){this.style.background='transparent';}" onfocus="this.style.background='white'">
</form>

</body>

Просмотр сценария в действии: http://mattr.co.uk/work/form_label.html

1 голос
/ 27 июня 2016

Один совет о свойстве HTML заполнитель и тег textarea , убедитесь, что между <textarea> и </textarea> нет пробела, в противном случае заполнитель не работает, например: 

<textarea id="inputJSON" spellcheck="false" placeholder="JSON response string" style="flex: 1;"> </textarea>

Это не сработает, потому что между ...

есть пробел
1 голос
/ 12 декабря 2013

Пожалуйста, используйте PlaceHolder.JS, он работает во всех браузерах и очень прост для браузеров, не поддерживающих html5 http://jamesallardice.github.io/Placeholders.js/

1 голос
/ 05 ноября 2012

Когда вы начнете печатать, он исчезнет. Если он пуст, он снова появится. 

        <%= f.text_field :user_email,:value=>"",:placeholder => "Eg:abc@gmail.com"%>

Самый простой способ ...

1 голос
/ 04 апреля 2011 
<input name="searchbox" onfocus="if (this.value=='search') this.value = ''" onblur="if (this.value=='') this.value = 'search'" type="text" value="search">

Добавить событие onblur тоже.

0 голосов
/ 01 января 2019

Я думаю, что хорошо хранить метку и не использовать заполнитель, как указано выше. Это хорошо для UX, как объяснить здесь: https://www.smashingmagazine.com/2018/03/ux-contact-forms-essentials-conversions/

Вот пример с меткой внутри полей ввода: codepen.io/jdax/pen/mEBJNa

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

Похожие темы

...