Синдикация
Украшаем формы с помощью CSS и jQuery - часть 1
Сегодня урок будет коротким, но полезным:) Почему полезным? Ну хотя бы потому, что мало кто уделяет достаточно внимания оформлению форм. И, кстати, зря.
Все большое состоит из маленького, и, дорабатывая именно это маленькое, мы в итоге получаем “конфетку”. Так что рекомендую не брезговать оформление чекбоксов, полей, выпадающих списков и прочих элементов. Времени потратите не много, а результат будет ощутимым.
Помним основное правило - посетитель должен чувствовать себя на сайте комфортно. Поэтому приготовились: ближайшие 5 минут будем внимать новый материал, а потом будем думать, как его использовать.
Сегодня нам понадобится:
- jQuery
- jNice plugin
- CSS
*все есть в архиве урока
Теперь между <head> и </head> пишем следующий код:
<LINK href="images/style.css" type=text/css rel=stylesheet> <SCRIPT src="images/jquery.js" type=text/javascript></SCRIPT> <SCRIPT src="images/jquery.jNice.js" type=text/javascript></SCRIPT>
Теперь присваиваем класс jNice
<form class=”jNice”> элементы формы </form>
Наша таблица выглядит следующим образом
<TABLE cellSpacing=0 cellPadding=3 width=400 border=0> <TBODY> <TR> <TD align=right width=100><strong>Текст</strong>:</TD> <TD><INPUT id=textfield size=30 name=textfield></TD></TR> <TR> <TD align=right><strong>Пароль</strong>:</TD> <TD><INPUT id=textfield2 type=password size=10 name=textfield2> </TD></TR> <TR> <TD align=right><strong>Список</strong>:</TD> <TD><SELECT id=select name=select> <OPTION value="" selected>Выберите</OPTION> <OPTION value=1>Значение 1</OPTION> <OPTION value=2>Значение 2</OPTION> <OPTION value=3>Значение 3</OPTION> <OPTION value=4>Значение 4</OPTION> <OPTION value=5>Значение 5</OPTION> <OPTION value=6>Значение 6</OPTION> <OPTION value=7>Значение 7</OPTION> <OPTION value=8>Значение 8</OPTION> <OPTION value=9>Значение 9, делаем длинное описание для проверки </OPTION> <OPTION value=10>Значение 10</OPTION></SELECT> </TD></TR> <TR><TD align=right><strong>Переключатель</strong>:</TD> <TD> <TABLE cellSpacing=0 cellPadding=0 border=0> <TBODY> <TR><TD><LABEL><INPUT id=radio_0 type=radio value=1 name=radio> Да</LABEL></TD></TR> <TR><TD><LABEL><INPUT id=radio_1 type=radio value=0 name=radio> Нет</LABEL></TD></TR> <TR><TD><LABEL><INPUT id=radio_2 type=radio value=-1 name=radio> Не знаю </LABEL></TD></TR> </TBODY></TABLE> </TD></TR> <TR> <TD align=right><strong>Чекбокс</strong>:</TD> <TD><INPUT id=checkbox type=checkbox name=checkbox></TD></TR> <TD align=right><strong>Кнопки</strong>:</TD> <TD><INPUT id=Submit type=submit value=готово name=Submit> <INPUT type=reset value=сброс></TD></TR></TBODY></TABLE>
Вот собственно и все:) Качайте урок и практикуйтесь!
16 октября 2009 в 16:10
Хорошая и полезная статья! Как раз ищу как оформлять формы.
А нельзя ли добавить ссылки на следующие части и поправить текст “Там что рекомендую”?
[Ответить]
ArtShok:
октября 16, 2009 в 22:23
Спасибо за добрые слова и указания на опечатку:)
[Ответить]
6 ноября 2009 в 15:44
Хочу сказать спасибо, автору. Всем понятно что тема не нова, НО форма изложения меня приятно порадовала. Так что получите от меня заслуженный +! Зачет!
[Ответить]
12 января 2010 в 18:39
Честно сказать вообще ничего не понял… или я тупой… или может поподробнее? или пойду-ка я учить языки(программирования)
[Ответить]
12 февраля 2010 в 15:43
в селекте не показывается картинка /select_right.gif. Т.е. картинка, на которую надо ткнуть, чтобы открылось меню. Почему?
[Ответить]
22 февраля 2010 в 10:37
Для того кто уже шарит …все понятно …,но кто первый раз с этим сталкивается…-это как филькина грамота…
Мне кажется нужно было показать весь код страницы как он получился…
и скрин на то что в оконцвке получается или ссылку на действующую форму…
Я просто еще ничего не знаю об этом…
[Ответить]