Вопрос по html – Какой лучший способ для отображения текста по умолчанию в текстовых и текстовых областях

3

Форма на контактной странице моего сайта -us HTML имеет два поля

1) предмет

2) сообщение

Когда страница загружается в первый раз, я хочу, чтобы в этих двух полях отображались сообщения, подобные & quot;Enter subject here& Quot; и & quot;Enter Message here& Quot ;.

Я обнаружил, что мы можем сделать это, используя & quot; значение & quot; атрибут текстового поля, это лучший способ ?? .. Какие у меня есть альтернативы для достижения этой цели?

Ваш Ответ

2   ответа
2

Да, это лучший способ. Затем вы можете использовать JavaScript для очистки ввода текста / области, когда элемент получает фокус. Не забудьте подумать, как вы хотите обработать случай, когда пользователь отправляет текст по умолчанию. Т.е. это & quot; введите имя пользователя & quot; действительное имя пользователя или нет?

9

О, мне действительно нужно закончить писать мою статью на эту тему. Вот неполная версия:

Первый & # x2014; сообщение о том, что вводить в полеnot значение по умолчанию. Значения по умолчанию - это то, что может быть отправлено (например, страна, введенная на основе GeoIP, или адрес доставки из записей клиентов).

Второй & # x2014; использование значения по умолчанию в качестве фальшивой метки и последующее его стирание, когда пользователь фокусирует его (предположительно, вы не хотите, чтобы пользователь вручную удалял сообщение), вызывает проблемы с доступностью. Программы чтения с экрана считывают контент, на который направлен фокус, если вы удалите его, когда он станет сфокусированным, они не смогут получить информацию.

best вариант, на мой взгляд, это разместить<label> рядом с контролем. Веб-страницам обычно не хватает места & # x2014; полосы прокрутки не являются злом.

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

  1. Put the <label> and <input> in a <div>
  2. Set a class on that <div> using JavaScript (so you don't have a crap experience is JS isn't available)
  3. Apply CSS to set the <div> to position: relative and give it a size.
  4. Make the background of the <input> transparent and style it to fill the div
  5. Position the <label> under the <input>
  6. Write a function that checks to see if the value of the input is an empty string or not. Toggle a class on the div on and off depending on the answer.
  7. When that class is set on the div, set text-indent to a high negative length (such as -999em) so that the text is hidden off screen (but still available to screen readers)
Спасибо, ребята. Я пойду с Дэвидом. Таким образом, я избавляю вас от необходимости проверять inout, чтобы проверить, если пользователь отправил значение по умолчанию (как упомянуто машиной). Спасибо всем вам Annibigi
Я только что вспомнил, что есть пример этого в действии (моя первая реализация этого, я думаю) вplayfire.com (большая форма входа в систему в середине / справа от страницы)
+1. Инновационное, чистое и доступное решение! Хотя от разработчика требуется немного больше усилий (на самом деле это не критика, а просто наблюдение)

Похожие вопросы