Опубликовано автор в категориях Верстальщику.

styling_forms
Недавно я описывал два различных способа оформления кнопок. Но, если вы оформили кнопки, то вам конечно захочется также оформить и другие элементы формы. Есть много способов сделать это, и много интересных постов по этой теме. Сегодня я расскажу о двух способах, о которых узнал вот из этой статьи How to skin HTML form elements in seconds Здесь предлагается использовать два различных скрипта, в зависимости от ваших потребностей.

Оба скрипта, очень полезны и просты в использовании. Если вы хотите использовать «standalone» скрипт, который не использует внешние JS-фреймворки (например, jQuery или MooTools) То вам может пригодиться скрипт NiceForms, если вы используете jQuery, то хорошая альтернатива jqTransform. Посмотрим, как они работают.

1. jqTransform

jqTransform является jQuery плагином, который позволяет быстро и просто оформлять элементы формы. Все, что нужно сделать, это добавить вызов JavaScript для этого плагина в верхней части веб-страницы, создать форму и добавите две строки JS-кода, чтобы применить оформление к вашей форме.

Используйте этот код, чтобы добавить вызов скрипта jqTransform:

<script type="text/javascript" src="jquery.jqtransform.min.js">
</script>

… Теперь создайте форму и добавьте к ней класс jqTransform:

<form class="jqTransform">
<!--Сюда идут элементы формы... -->
<form>

… а затем добавьте этот JS-код для применения оформления:

<script type="text/javascript">
$(function() {
$("form.jqtransform").jqTransform();
});
</script>

2. NiceForms

Niceforms это скрипт, который заменит наиболее часто используемые элементы формы на кастомизированные. Вы можете использовать стандартную тему скрипта, или же можете разработать свой собственный стиль оформления.

Чтобы применить оформление к элементам формы нужно добавить вызов скрипта NiceForms в веб-страницу, используя этот код:

<script type="text/javascript" src="niceforms.js">
</script>

… а затем создать форму с и присвоить ей класс niceform:

<form class="niceform">
<!-- Add form elements here... -->
<form>

Это все. Действительно просто и быстро!

P.S. Мысли о ценах…

В условиях зловещего кризиса цены ведут себя совершенно непредсказуемо, причем на любые товары, будь-то автомобили и цены на них или же цены на недвижимость. Все товары и услуги просто таки пугают своими ценами, одни потребителей а другие продавцов.

5 комментариев к записи “Простое и быстрое оформление элементов форм”

  1. Игорь

    упс.. прочитал нащет кросбраузерности..
    правда для ее обеспечения надо строго придерживаться их примерам.. шаг вправо шаг влево — растрел..

    Ответить

Оставить комментарий

  • (не будет показан)