В последние месяцы я уже посвятил несколько постов о дизайне форм и удобстве использования. В этом посте я хочу поделиться некоторыми простыми советами, полезными для обогащения ваших форм различными элементами, такими как подсказка
сообщений ,
функция автозаполнения вместо тега <select>,
простая проверка при вводе данных и способы отображения скрытых полей при выборе опции радиоэлемента.
Предложить сообщения
Из этих советов полезно отображать дополнительную информацию, когда вы выбираете поле с помощью курсора: затем справа от поля появляется сообщение с кратким описанием поля «свойства»:
[Img_assist | NID = 4589 | название = | убывание = | ссылка = нет | Align = нет | ширина = 440 | Высота = 158]
Я использовал этот HTML-код:
<label for="email" >Email</label>
<input type="text" id="email" onFocus="javascript:toggleMsg('msg-1')" onBlur="javascript:toggleMsg('msg-1')" maxlength="20"/>
<span id="msg-1" class="msg" style="visibility:hidden;">Required to log-in</span>
<label for="psw">Password</label>
<input type="text" id="psw" onFocus="javascript:toggleMsg('msg-2')" onBlur="javascript:toggleMsg('msg-2')" maxlength="20"/>
<span id="msg-2" class="msg" style="visibility:hidden;">Use a min 6 chars long password!</span>
… и эта простая функция JavaScript, которая устанавливает свойство видимости CSS для тега span, содержащего сообщение ( msg-1 и msg-2 ), видимым или скрытым :
<script type="text/javascript">
function toggleMsg(idElement){
element = document.getElementById(idElement);
if(element.style.visibility!='hidden'){
element.style.visibility='hidden';
} else {
element.style.visibility='visible';
}
}
</script>
Для исходного кода , посмотрите на ссылку wollowing:
Если вы хотите добавить некоторый хороший эффект , который вы можете использовать рамки JavaScript , таких как MooTools или Scriptaculous , чтобы добавить нарастающий в и исчезать из эффектов , чтобы показать / скрыть форму сообщения , Посмотрите на эту ссылку для сообщения на эту тему: Улучшение удобства использования формы с авто сообщениями .
Если вам нужно некоторое вдохновение о том, как создавать подобные сообщения с помощью CSS, я предлагаю вам взглянуть на этот другой пост, который я опубликовал о коллекции окон сообщений Css, чтобы найти некоторые идеи.
Автозаполнение вместо списка (тег <select>)
Я большой поклонник эффекта самовнушения . Это действительно просто реализовать, используя разные способы (фреймворки JavaScript или просто несколько строк рукописного кода). Вы можете использовать его вместо тега <list> в своей форме, например, в поле, которое пользователи могут использовать для вставки своей страны:
[Img_assist | NID = 4590 | название = | убывание = | ссылка = нет | Align = нет | ширина = 358 | высота = 267]
Когда пользователь начинает вводить название своей страны, под полем ввода появится слой с некоторыми предложениями, относящимися к вставленной строке. В прошлом месяце я добавил пост о том, как реализовать простую функцию автозаполнения с использованием PHP и Coldfusion. Я также подготовил простой PHP-компонент автозаполнения, который вы можете повторно использовать в своем проекте, просто изменив некоторые свойства для реализации этого учебника:
Компоненты PHP: Автоматический
поиск с функцией автозаполнения (PHP)
Поиск с функцией автозаполнения (Coldfusion)
Простая проверка при вводе данных
Простым примером может служить счетчик символов в стиле Twitter, который уменьшается от максимального числа символов в поле до нуля, пока вы вводите что-то в поле ввода. В этом примере я установил максимальное число символов в 20 :
[Img_assist | NID = 4591 | название = | убывание = | ссылка = нет | Align = нет | ширина = 330 | высота = 174]
… на рисунке aboe 20-5 равно max chars (20) — текущая длина строки (woork = 5).
Я написал этот простой HTML-код:
<label for="text">Write something here</label>
<input type="input" id="text" onKeyUp="javascript:countChars('counter_number')"/> <spam id="counter_number">20</spam>
… и я реализовал функцию counter, используя несколько строк кода JavaScript:
<script type="text/javascript">
function countChars(idElement){
max_chars = 20;
counter = document.getElementById(idElement);
field = document.getElementById('text').value;
field_length = field.length;
// Calculate remaining chars
remaining_chars = max_chars-field_length;
// Update the counter on the page
counter.innerHTML = remaining_chars;
}
</script>
Вы также можете изменить цвет шрифта счетчика на красный, когда счетчик близок к нулю (например, когда осталось менее пяти символов), просто добавив эту строку кода после var_позрения оставшихся_чаров предыдущего кода:
if(remaining_chars<=5){
counter.style.color="#CC0000";
}
… и результат:
[Img_assist | нидь = 4592 | название = | убывание = | ссылка = нет | Align = нет | ширина = 375 | высота = 174]
Отображение скрытых полей при выборе опции радиоэлемента
Это очень простые советы. Вы можете использовать его для отображения скрытых полей, когда пользователь нажимает кнопку радио / кнопки проверки, которая требует дополнительной информации. В этом примере я использовал радиогруппу с двумя опциями с просьбой подписаться на список рассылки:
[Img_assist | NID = 4593 | название = | убывание = | ссылка = нет | Align = нет | ширина = 285 | Высота = 92]
… поэтому, когда пользователь выбирает «да», появляется следующее поле ввода для добавления электронного письма:
[Img_assist | NID = 4594 | название = | убывание = | ссылка = нет | Align = нет | ширина = 367 | Высота = 153]
HTML-код:
<!-- Radio elements -->
<input type="radio" name="newsletter" value="1" id="newsletter-1" onclick="javascript:toggle(1)" /><label for="newsletter-1">Yes</label>
<input type="radio" name="newsletter" value="1" id="newsletter-0" onclick="javascript:toggle(0)" /><label for="newsletter-2">No</label>
<!-- Hidden layer -->
<div id="email-field" style="display:none;">
<input type="text" id="email" />
Add your Email
</div>
… и простая функция JavaScript для показа / скрытия скрытого слоя может быть написана следующим образом:
<script type="text/javascript">
function toggle(status){
idStatus = status;
element =document.getElementById('email-field');
if(idStatus==0){
element.style.display='none';
} else {
element.style.display='block';
}
}
</script>
Это все! Я надеюсь, что вы сможете найти все эти простые советы интересными и найти новое вдохновение для своих веб-проектов.