Как разместить текст внутри формы

Опубликовано: 31 Август 2010Автор ratemir

Все, наверное, видели на различных сайтах, в полях ввода логина и пароля, внутри форм поиска и т.д. текст, который исчезает при нажатии в области ввода информации и вновь появляется если кликнуть за её границей. Данный приём применяется для обеспечения компактности форм(в случае, если надо сэкономить место), просто для удобства пользователей или в качестве дизайнерского решения. Такой текст может помочь неопытным читателям с большей легкостью определить область ввода информации.

Как разместить текст внутри формы

Теперь давайте разберемся, каким образом текст попадает в форму ввода данных. Первое, что нужно сделать, это найти сам код вывода нужной нам формы, на страницу Вашего сайта. На примере поиска, я объясню как это делается. В WordPress, как правило, Вы сможете найти его в файлах header.php или sidebar.php в зависимости от того, где окно поиска расположено. Ищите строки подобные этой:

<input type="text" name="s" id="s" size="20"/>

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

1) value="Поиск"
2) onfocus="if (this.value=='Поиск') this.value='';"
3) onblur="if (this.value=='') this.value='Поиск';"

Вместо слова «Поиск» Вы можете вписать любое другое слово или выражение. Например, «Искать здесь», «Искать в этом блоге» и т.п. Аргумент второй строки отвечает за исчезновение текста, как только пользователь нажимает на область ввода. Третья строка для того чтобы слово или выражение, снова появилось, если пользователь щелкает где-то еще.

В конечном итоге строка ввода будет выглядеть следующим образом:

<input type="text" name="s" id="s" value="Поиск" onfocus="if (this.value=='Поиск') this.value='';" onblur="if (this.value=='') this.value='Поиск';"/>

Метки: Рубрика: Дизайн


Опубликовать в twitter.comПоделиться ВКонтактеПоделиться в FacebookПоделиться В Моем МиреОпубликовать в своем блоге livejournal.com
Если Вам понравилась статья, Вы можете получать новые материалы Ratemir.ru по: RSS или можете просто получать обновления блога на e-mail:

5 комментариев к “Как разместить текст внутри формы”

  • Dugg
    1 Сентябрь, 2010, 11:18

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

  • argurn
    31 Октябрь, 2010, 22:24

    Познавательный пост! Больше таких надо! Буду с радостю читать вас ещё!

  • Cibblubobeced
    16 Декабрь, 2010, 2:46

    Поистине полезняк! А то сколько не лазишь по нету сплошное бла бла бла. Только не тут, и это радует!

  • Unebyanycle
    25 Декабрь, 2010, 20:56

    Знакомый посоветовал зайти на этот блог и явно не зря.

  • advanced
    27 Март, 2011, 12:54

    Спасибо. Помогите под ява код переделать... ато чёт туплю...

Оставить комментарий

Наверх