В сегоняшнем уроке я расскажу Вам о плагине, который способен сделать намного красивее любую форму.
Более того, у данного плагина есть множество скинов (вариантов оформления), что позволяет на лету менять внешний вид. В данном уроке мы рассмотрим подключения одного скина. В следующем уроке я предоставлю Вам все доступные скины на выбор.
В шапке документа проделываем обычную процедуру: подключаем таблицу стилей, фреймворк и вспомогательные скрипты:
<script type="text/javascript" src="js/mootools-yui-compressed.js"></script>
<script type="text/javascript" src="js/sexyforms.v1.1.mootools.min.js"></script>
<link type="text/css" rel="stylesheet" href="css/sexyforms-vista.css" media="all" id="theme" />
<script type="text/javascript">
window.addEvent('domready', function() {
$$(".sexyform input", ".sexyform select", ".sexyform textarea").each(function(el) {
el.DoSexy();
});
});
</script>
Далее представляю Вашему вниманию гигантскую форму с разными элементами в качестве примера. Для того, чтобы все работало достаточно в самом начале форме присвоить класс "sexyform". Также интересным трюком является добавление иконок в поля с помощью аттрибута icon.
<form action="" method="get" class="sexyform">
<table>
<tr>
<td>
<label for="nombre">Name:</label>
</td>
<td>
<input id="nombre" type="text" value="Your name here" size="35" icon="icons/user.png"/>
</td>
</tr>
<tr>
<td>
<label for="nombre">Password:</label>
</td>
<td>
<input id="password" type="password" value="Your name here" size="35" icon="icons/lock.png"/>
</td>
</tr>
<tr>
<td>
<label for="telefono">Disabled:</label>
</td>
<td>
<input id="telefono" type="text" value="(Disabled)" size="25" disabled="disabled" icon="icons/telephone.png"/>
</td>
</tr>
<tr>
<td colspan="2">
<p>Language:</p>
<select icon="icons/user_comment.png">
<option value="spanish">Spanish</option>
<option value="english">English</option>
<option value="french">French</option>
<option value="italian">Italian</option>
<option value="chinese" icon="icons/star.png">Chinese</option>
<option value="japanese">Japanese</option>
<option value="russian">Russian</option>
<option value="esperanto">Esperanto</option>
</select>
<select disabled="disabled">
<option value="disabled">Disabled</option>
</select>
</td>
</tr>
<tr>
<td colspan="2">
<p>Gender:</p>
</td>
</tr>
<tr>
<td colspan="2">
<input type="radio" id="radio_0" value="male" name="radio" />
<label for="radio_0" >Male</label>
<input type="radio" id="radio_1" value="female" name="radio" />
<label for="radio_1" >Female</label>
<input type="radio" value="disabled" name="radio2" disabled="disabled"/>
<label>Disabled</label>
</td>
</tr>
<tr>
<td colspan="2">
<p>Your favorite colours:</p>
</td>
</tr>
<tr>
<td colspan="2">
<input id="c1" type="checkbox" value="1" />
<label for="c1" >Green</label>
<input id="c2" type="checkbox" value="1" checked="checked" />
<label for="c2" >Yellow</label>
<input id="c3" type="checkbox" value="1" />
<label for="c3" >Red</label>
<input id="c4" type="checkbox" value="1" checked="checked" disabled="disabled" />
<label for="c4" >Blue</label>
<input type="checkbox" value="1" disabled="disabled"/>
<label>Disabled</label>
</td>
</tr>
<tr>
<td colspan="2">
<p>Button Icons:</p>
<p>
<input type="button" value="Submit"/> <input type="button" value="Button with Icon" icon="icons/exclamation.png"/>
</p>
<p>
<input type="button" value="Button Disabled" disabled="disabled"/>
</p>
</td>
</tr>
<tr>
<td colspan="2">
<p>Comments:</p>
<textarea rows="10">All you need is love...</textarea>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="Send" icon="icons/email_go.png"/>
</td>
</tr>
</table>
</form>
Можете выбрать только необходимые элементы и использовать их у себя.
Получилась очень красивая форма, которая станет украшением любого сайта.
В следующем уроке по формам выложу все возможные скины данного плагина, а также инструкцию по их смене.
Всем удачи!