Украшаем формы с помощью 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
Для того кто уже шарит …все понятно …,но кто первый раз с этим сталкивается…-это как филькина грамота…
Мне кажется нужно было показать весь код страницы как он получился…
и скрин на то что в оконцвке получается или ссылку на действующую форму…
Я просто еще ничего не знаю об этом…
[Ответить]
23 августа 2010 в 14:00
Есть аналогичныи вариант с использованием javascript
Может кому интересно:
Хотя мне jQuery больше нравиться.
[Ответить]
23 сентября 2010 в 18:13
все из этого можно через CSS сделать, разве что длинный текст свернуть в select-box врядли получиться
[Ответить]
28 апреля 2011 в 13:02
Спасибо за статью, очень помогла в выполнение заказа по верстке, сейчас просты селекты не востребованы, а такие красочные вот это даааа.
[Ответить]