Есть сайт, предназначенный для людей пожилого возраста. Оказалось, что обычная форма компонента регистрации не очень понятна для такого возраста. Хотел бы сделать так, чтобы рядышком с каждым полем появлялась информация о данном поле с примером заполнения его, и чтобы таковая подсказка активировалась (появлялась) при наведении курсора и при нажатии на это поле, включая переключение клавишей "Tab" и соответственно пропадала, если такового не происходит... Подскажите, как это сделать? Если можно, то покажите маленькие примеры...
Да, я знаю, но дополнительные компоненты не нужны. Я лучше переделаю оригинальную регистрацию ;-) только пока не могу сообразить как вообще такое сделать :-(
Меня тоже всегда этот вопрос мучает! На других сайтах есть - так классно! А еще как в форму регистрации и авторизации вставить картинку с контрольным числом (captcha) как на фронтэнде, так и на бэкэнде? Только чтобы через поля ввода взлом не делался никак
Ну если хотите сложностей и эксклюзива, то велкам: http://dzineblog.com/2009/11/18-impressive-web-form-validation-scripts-to-enhance-user-experience.html
Спасибо, за ссылку! Нашел то, что нужно: Код (PHP): <script type="text/javascript"> function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { oldonload(); func(); } } } function prepareInputsForHints() { var inputs = document.getElementsByTagName("input"); for (var i=0; i<inputs.length; i++){ inputs[i].onfocus = function () { this.parentNode.getElementsByTagName("span")[0].style.display = "inline"; } inputs[i].onblur = function () { this.parentNode.getElementsByTagName("span")[0].style.display = "none"; } } } addLoadEvent(prepareInputsForHints); </script> <form action="<?php echo JRoute::_( 'index.php?option=com_user' ); ?>" method="post" id="josForm" name="josForm" class="form-validate"> <fieldset> <legend><?php echo JText::_('Register'); ?></legend> <div> <label class="label-left" id="namemsg" for="name"> <?php echo JText::_( 'Name' ); ?>: </label> <input type="text" name="name" id="name" value="<?php echo $this->escape($this->user->get( 'name' ));?>" maxlength="50" /> * <span class="hint">Введите ваше настоящее имя или псевдоним для отображения на сайте.<br />[<i>Например, <b>Иванов Иван</b></i>]</span> </div> <div "тоже самое про логин" /> <div> <label class="label-left" id="emailmsg" for="email"> <?php echo JText::_( 'Email' ); ?>: </label> <input type="text" id="email" name="email" value="<?php echo $this->escape($this->user->get( 'email' ));?>" maxlength="100" /> * <span class="hint">Введите адрес вашей электронной почты. Если у вас нет эл. почты, то вы можете ее завести на любом почтовом сервисе, например <a href="https://www.google.com/accounts/NewAccount" target="_blank" onmousedown="window.open('https://www.google.com/accounts/NewAccount');return false">Google Mail</a>.<br />[<i>Например, <b>goldeagle@gmail.com</b></i>]</span> </div> <div "тоже самое про пароль" /> <div "тоже самое про повтор пароля" /> <div><?php echo JText::_( 'REGISTER_REQUIRED' ); ?></div> <div><button class="button validate" type="submit"><?php echo JText::_('Register'); ?></button></div> </fieldset> <input type="hidden" name="task" value="register_save" /> <input type="hidden" name="id" value="0" /> <input type="hidden" name="gid" value="0" /> <?php echo JHTML::_( 'form.token' ); ?> </form> единственный минус - при показе подсказки? при вводе E-mail? есть ссылка, которая не нажимается просто так, потому что скрывается данный <span />. Сделал событие на нажатие кнопкой мыши, но возникают трудности с блокировкой всплывающих окон во многих браузерах (( Может есть решения?