Форма входа

Форма входа
Вот что задумывалось сделать. Нужно было при нажатии на форму «Логин» слово исчезало и можно было вписывать все что хочешь. А потом, если поле осталось пустым, при нажатии курсора в другом месте страницы, опять появлялось слова.
Вообщем я не могу похвастаться тем, что хорошо объясняю. Поэтому приведу пример:

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

Для начала создадим саму форму ввода. Это не составит труда:

<input type="text">

type — это обязательный параметр, который показывает на тип содержания и визуализация кнопок.

  1. тип кнопки=SUBMIT — рисует кнопку с надписью «надпись» — обработчик checkbox
  2. тип кнопки=RADIO — рисует круглую кнопку — обработчик onclick
    • параметр CHECKED — обозначает, что кнопка помечена
    • параметр VALUE — определяет имя, присвоенное переменной
  3. тип кнопки=CHECKBOX — рисует квадрат, в котором можно сделать пометку — обработчик onclick
    • параметр CHECKED — обозначает, что кнопка помечена
    • параметр VALUE — определяет имя, присвоенное переменной
  4. тип кнопки=BUTTON — рисует кнопку с надписью надпись — обработчик onclick
  5. тип=HIDDEN — определяет скрытый элемент данных
    • параметр NAME — определяет переменную
    • параметр VALUE — определяет имя, присвоенное переменной
  6. тип кнопки=TEXT — ввод текста в окно
    • параметр VALUE — текст по умолчанию
    • параметр SIZE — ширина окна в символах
  7. тип кнопки=PASSWORD — окно для ввода пароля
    • параметр VALUE — пароль по умолчанию
    • параметр SIZE — ширина окна в символах
    • параметр MAXLENGTH — допустимая длина пароля
  8. тип кнопки NUM — ввод числа в окно
    • параметр VALUE — число по умолчанию
  9. тип кнопки RESET — сброс данных формы

Сейчас мы имеем только тип нашей кнопки «text». Как видим выше к этому типу есть два параметра «value» и «size». Мы введем только валуе, например «Логин».

<input type="text" value="Логин">

В принципе, большинство новичков оставляют и так. Но это вовсе не удобно. Нужно вручную убирать символы... Я же предлагаю воспользоваться функцией «onFocus».

Событие onFocus возникает при получении объектом фокуса при переходе по клику мыши или с помощью клавиатуры.

Теперь выведем пустое поле в форме с помощью этой функции:

<input type="text" value="Логин" onFocus='this.value="";'>

Хм... Уже что-то. Но здесь значение будет онуляться всегда, что бы не вводили. Я предлагаю онулять значение только тогда, когда введено стандартное. В нашем случае это «Логин», поэтому прописываем функцию:

<input type="text" value="Логин" onFocus='if(this.value=="Логин")this.value="";'>

Если у вас стандартное значение (value) другое, то в onFocus введите свое.

Ну вот в принципе большая часть работы сделана. Осталось сделать так, чтобы при нулевом значении выводилось стандартное. Здесь нам поможет функция «onBlur».

Событие onBlur возникает при потере объектом фокуса при переходе по клику мыши или с помощью клавиатуры.

И аналогично как с onFocus, так и с onBlur, выводим стандартное значение:

<amp;lt;input type=&amp;quot;text&amp;quot; value=&amp;quot;Логин&amp;quot; onFocus='if(this.value==&amp;quot;Логин&amp;quot;)this.value=&amp;quot;&amp;quot;;' onBlur='if(this.value==&amp;quot;&amp;quot;)this.value=&amp;quot;Логин&amp;quot;;'&amp;amp;amp;>

Ну вот и все. Если возникнут вопросы, спрашивайте.

Эксклюзивная аренда элитной недвижимости в Москве — только пристижные районы.

С уважением, Vasilenko Ivan!

Комментарии — 6 комментариев

  1. #90 Aleks в 17:05, 5 ноября 2008:

    Ответить | Цитировать

    Прикольно, надо себе такое поставить будет.

  2. #93 Сергей М. в 10:53, 8 ноября 2008:

    Ответить | Цитировать

    Хех, я буквально недели две назад матерился у себя по этому же поводу — у нас «программер» всегда делал косяки в этом. Я для него специально такой же пост написал :)

    Плюс добавлю — чтобы HTML проходил валидацию, надо писать onfocus и onblur — без прописных, в общем. Хотя работать и так будет.

  3. #12645 Сергей в 10:29, 1 декабря 2011: (подписался)

    Ответить | Цитировать

    У меня в поле для ввода пароля значение value сразу заменяется звездочками. Т.е. он не пишет заданное мной «Пароль», а пишет «******». Можно это как-то исправить?

  4. #12684 vanoID в 15:32, 20 декабря 2011:

    Ответить | Цитировать

    >Сергей, какая кодировка стоит файла?

  5. #12689 Сергей в 11:16, 21 декабря 2011: (подписался)

    Ответить | Цитировать

    Кодировка utf8, слово Логин полем выше отображается нормально.

  6. #12690 vanoID в 11:31, 21 декабря 2011:

    Ответить | Цитировать

    >Сергей, попробуйте написать так:

    <input type="text" value="Пароль" onFocus='if(this.value=="Пароль")this.value="";'>

Добавить комментарий

имя:

e-mail:

сайт:

текст:

Subscribe without commenting