Web-Grower.ru http://web-grower.ru Бесплатные инструменты для выращивания вашего сайта! Wed, 01 Feb 2012 16:51:31 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 PHP — работаем с HTML-формами http://feedproxy.google.com/~r/web-growerru/~3/Mrk7_780AYM/ http://web-grower.ru/html-forms-in-php/#comments Wed, 01 Feb 2012 16:51:31 +0000 Иван Хромов http://webgrower.defite.ru/?p=2079 Итак, сегодня я хочу затронуть именно ту самую тему — как работать с формами в PHP. Как выполнять их проверку, и многое-многое другое.Мы даже вместе сделаем проверку формы для отправки e-mail. Для начала, нам нужен редактор кода, локальный веб-сервер, и знания PHP на начальном уровне.

В начале была форма...

Для начала вспомним наш великий и могучий HTML. И теги:<form></form>, <input>. Пока-что нам понадобятся только они. Сейчас мы должны выучить несколько функций языка PHP: isset (), empty (), strlen (). И теперь приступим к практике. Для начала, создаем простую HTML форму.

<form action="index.php?method=send" method="post">
<input type="text" name="field1" value="" />
<input type="submit" name="go" value="Поехали!" />
</form>

Получится что-то вроде:

Включаем PHP!

Для начала, обратим внимание на метод для отправки формы — post. В PHP существует глобальная переменная-массив $_POST. А теперь давайте прочтем имя поля, это будет выгляедть так: $_POST['field1']соответственно этот элемент суперглобального массива будет иметь значение, которое у нас введено на форме в браузере. Итак, вот как мы напишем:

<form action="index.php?method=send" method="post">
<input type="text" name="field1" value="" />
<input type="submit" name="go" value="Поехали!" />
</form>
<?php  echo "Привет, ".$_POST['field1']  ?>

Но теперь посмотрите на результат:

Нам ведь не надо, чтобы слово «Привет» выводилось всегда? Исправляем эту проблему при помощи функции isset ():

<form action="index.php?method=send" method="post">
<input type="text" name="field1" value="" />
<input type="submit" name="go" value="Поехали!" />
</form>
<?php
if(isset($_POST['go'])) {
echo "Привет, ".$_POST['field1'];
}
?>

Функция isset () проверяет, появилась ли переменная $_POST['go'], и если это так, выполняем действие вывода. Теперь вначале видна только форма, а после нажатия на кнопку выводится нужное нам сообщение:

Работа с HTML формами в PHP

Да отправится e-mail!

Теперь давайте создадим более сложную форму — форму отправки письма, например. Для начала разберемся, какие поля нам нужны. Нам нужны данные: имя, тема, обратный адрес, сообщение. Но стоит проверить — не бот ли это? Для начала создадим форму с элементами управления: 3 поля ввода текста, 1 область текста, 1 флажок и кнопка отправки. Пишем:

<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
<p>
<label for="name">Your name:</label><br />
<input name="name" id="name" type="text" value="">
</p>
<p>
<label for="from_mail">Your e-mail:</label><br />
<input name="email" id="from_mail" type="text" value="">
</p>
<p>
<label for="subject">Subject of letter:</label><br />
<input name="subject" id="subject" type="text" value="">
</p>
<p>
<label for="message">Message for me:</label><br />
<textarea name="message" id="message" rows=5 cols=20 wrap="off"></textarea>
</p>
<p>
<input name="not_bot" id="not_bot" type="checkbox" value="NO">
<label for="not_bot">My name is not WALL-E</label>
and I want <input type="submit" value="Send it now" name="sendit">
</p>
</form>

Эта форма будет хорошо выглядеть, если добавить следующие css свойства в тег <style>:

input[type='text'] {
	width: 340px;
	padding: 5px;
}
textarea {
	width: 340px;
	height: 150px;
	padding: 5px;
}

А если в первой строке документа написать:

<!DOCTYPE html>

То далее можно изменить поля ввода так:

<p>
<label for="name">Your name:</label><br />
<input name="name" id="name" placeholder="Enter your real name, please =)" type="text" value="">
</p>
<p>
<label for="from_mail">Your e-mail:</label><br />
<input name="email" placeholder="your_name@example.com" id="from_mail" type="text" value="">
</p>
<p>
<label for="subject">Subject of letter:</label><br />
<input name="subject" placeholder="What's up?" id="subject" type="text" value="">
</p>

Наша веб-форма приобретет вот такой вот красивый вид(все объяснения что и как и зачем даны):

Итак. У нас все готово в плане проектирования формы! Теперь можете выдохнуть оставшийся O2 и читать дальше!
Теперь самая важная часть — программная. Если здесь допустить ошибку или неточность -пиши «пропало»! Мы неточностей и тем более, ошибок, допускать не собираемся. Вверху файла мы будем писать наш PHP код, чтобы не создавать кучу файлов. Если вы будете использовать данные материалы как опору на создание рабочей формы отправки(которая отправлять письмо будет) то лучше создайте отдельный файл с функциями, которые мы создадим и подключите его в файл с формой. А там в файле используйте. Да поможет вам require_once();!
Пишем вот такие вот не простые функции:

<?php
// обеспечение безопасности. все что вводит
// пользователь пропускайте через эту функцию!
function safe_post($input) {
	if(!empty($input)) {
		return htmlspecialchars(stripslashes(trim($input)));
	} else {
		return false;
	}
}
function valid_form_now() {
	// form data
	// собираем данные из формы.
	$name = safe_post($_POST['name']); // имя
	$email = safe_post($_POST['email']); // почта
	$subject = safe_post($_POST['subject']); // тема
	$message = safe_post(nl2br($_POST['message'])); // сообщение
	$robot = safe_post($_POST['not_bot']); // робот!
	// /vars
	$error = array(); // преопределим тип переменной как массив
	// start validate the form:
	if(empty($name) or strlen($name) < 10) { // проверим ка имя
		$error['name'] = "Sorry, you entered not valid name";
	}
	// регулярное выражение для проверки адреса почты
	$mail_regex = "/^([a-z0-9\+_\-]+)(\.[a-z0-9\+_\-]+)*@([a-z0-9\-]+\.)+[a-z]{2,6}$/ix";
	// проверим ка введенную почту!
	if(empty($email) or !preg_match($mail_regex, $email)) {
		$error['email'] = "You entered a <i>non valid email</i>, sorry!";
	}
	// а теперь тему письма
	if(empty($subject) or strlen($subject) < 15) {
		$error['subject'] = "Please, fill the <i>subject</i> field.
		This field must contain more than 15 chars!";
	}
	// ну и само сообщение, конечно!
	if(empty($message) or strlen($message) < 240) {
		$error['message'] = "Please, write a <i>long letter</i> to me!
		This field must contain more than 240 chars!";
	}
	// если значение чекбокса не NO то пишем ошибку
	if($robot != "NO") {
		$error['robot'] = "Hello, WALL-E! How are you?";
	}

	// start output of errors if have any
	// так как $errors - массив, проходимся по нему
	// и выведем все ошибки, которые у нас возникли.
	if(is_array($error) and !empty($error)) {
		foreach($error as $key=>$val) {
			echo "<p><b style='color: #D80A33;'>".$val."</b></p>";
		}
	} else { // тут впишите отправку почты, ну и сообщения для юзера.
		// do another
		echo "<b style='color: #008000;'>Form is valid!</b>";
	}
}
?>

Все объяснения даны в коде. Надеюсь, вам пригодится все, что здесь написано.
Ну и напоследок: пример работы | скачать исходники

]]> http://web-grower.ru/html-forms-in-php/feed/ 0 http://web-grower.ru/html-forms-in-php/ Slides http://feedproxy.google.com/~r/web-growerru/~3/z9UN8wOzTCw/ http://web-grower.ru/slides/#comments Tue, 31 Jan 2012 13:02:27 +0000 Maniac http://web-grower.ru/?p=2378 Slides

Еще один плагин для слайдшоу с послайдовой навигацией и навигацией по стрелкам. Довольно симпатичное решение, которое легко установить и использовать. Для его работы понадобится jQuery и собственно сам плагин слайдшоу.

Установка

1. Подключаем необходимые библиотеки

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/slides.min.jquery.js"></script>

2. Базовое оформление

.slides_container {
    width:470px;
    height:170px;
  }
  .slides_container div {
    width:470px;
    height:170px;
    display:block;
  }

3. Базовая разметка

<div id="slides">
  <div class="slides_container">
    <div>
      <h1>Slide 1</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div>
      <h1>Slide 2</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div>
      <h1>Slide 3</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div>
      <h1>Slide 4</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  </div>
</div>

4. Запуск!

<script>
  $(function(){
    $("#slides").slides();
  });
</script>

Демо

]]> http://web-grower.ru/slides/feed/ 0 http://web-grower.ru/slides/ Про substr (), utf8 и кириллицу http://feedproxy.google.com/~r/web-growerru/~3/NkqSYvG7W6Q/ http://web-grower.ru/pro-substr-utf8-i-kirillicu/#comments Thu, 26 Jan 2012 23:42:32 +0000 Maniac http://webgrower.defite.ru/?p=2375 Всем известно, что функция substr () некорректно работает с кириллическим текстом в кодировке utf8, выдавая абракадабру на конце. Это объясняется тем, что один символ в кодировке cp-1251 весит один байт, а в utf8 — 2 или 3, а так как обрезание текста идет не по символам, а по байтам, то и появляется подобного рода ошибка. Однако она достаточно просто решается. Смотрим под кат.

function myutf8_substr2($str,$from,$len){
# utf8 substr
return preg_replace('#^(?:[\x00-\x7F]|[\xC0-\xFF][\x80-\xBF]+){0,'.$from.'}'.
'((?:[\x00-\x7F]|[\xC0-\xFF][\x80-\xBF]+){0,'.$len.'}).*#s',
'$1',$str);
}

и применяем ее:

$introtext_max = myutf8_substr2($item->introtext, 0, 100);
]]> http://web-grower.ru/pro-substr-utf8-i-kirillicu/feed/ 0 http://web-grower.ru/pro-substr-utf8-i-kirillicu/ CSS Refresh http://feedproxy.google.com/~r/web-growerru/~3/63vHcpg8y28/ http://web-grower.ru/css-refresh/#comments Sun, 15 Jan 2012 11:44:10 +0000 Maniac http://webgrower.defite.ru/?p=2369 css refreshCSS Refresh — инструмент, необходимый для удобной работы верстальщика. Позволяет сократить время разработки в разы за счет того, что все изменения css применяются автоматически, без перезагрузки браузера. Таким образом процесс отладки странички сводится к сохранению css-файла и мгновенному созерцанию результата в браузере.

Как это работает?

Для работы нужно скачать CSS Refresh и подключить:

<link rel="stylesheet" type="text/css" href="css/site.css" />
<script type="text/javascript" src="js/cssrefresh.js"></script>

Внимание, автоматически обновляться будут только те таблицы стилей, которые были подключены до CSS Refresh. Также, автор обращает внимание на то, что работа скрипта осуществляется с помощью XMLHttpRequest для модификации css-файлов, т.е. поработать со скриптом удастся только на стороне сервера.

]]> http://web-grower.ru/css-refresh/feed/ 0 http://web-grower.ru/css-refresh/ Добавляем произвольные поля в Joomla! http://feedproxy.google.com/~r/web-growerru/~3/xeqklThJU7o/ http://web-grower.ru/dobavlyaem-proizvolnye-polya-v-joomla/#comments Wed, 04 Jan 2012 12:05:37 +0000 Иван Хромов http://webgrower.defite.ru/?p=2347 logo joomlaПривет всем кто сейчас читает эту запись. На позапрошлой неделе я решил сделать сайт колледжа, в котором учусь. Естественно мой выбор пал на Joomla!, и я с выбором метался не долго. Эта система отлично подходит для реализации информационного сайта. Но вот парадокс: компонент com_user в Joomla был недосягаем для плагинов и прочего администраторского. Решил немного покопать сам компонент, выяснилось что добавить новые поля в профиль и поля при регистрации не такая уж сложная задача, а прокомментированность кода в Joomla еще больше упростила мне задачу, главное знать английский(помните, без этого у вас не получится разрабатывать хорошие сайты, так как половина информации в WWW написана на английском языке). Давайте я вам покажу как добавить то или иное поле, не используя компонентов. Необходимо чтобы вы знали HTML и PHP хотя бы на уровне новичка. Jeronimo!

Итак, откройте сейчас phpMyAdmin и базу данных в которую установлена Joomla. И давайте добавим 2 новых поля в таблицу jos_users: website (website VARCHAR (255) not null) и gender (gender VARCHAR (3) not null) ну или выполните такой запрос в поле SQL запроса:

ALTER TABLE  `jos_users` ADD  `website` VARCHAR( 255 ) NOT NULL ,
ADD  `gender` VARCHAR( 20 ) NOT NULL

Продолжим. Откройте в любом текстовом редакторе(кроме Блокнота) файл {папка joomla}/libraries/joomla/database/table/user.php и после строки:

var $params = null;

Вставляем:

/**
* Description
*
* @var string
*/
var $website		= null;
/**
* Description
*
* @var string
*/
var $gender			= null;

Таким образом мы сообщим jooml'е, что необходимо добавить значения полей в базу данных. Теперь находим файл {папка joomla}/components/com_user/views/register/tmpl/default.php (строка 74) и открываем его.
Здесь нам необходимо добавить 2 поля в форму регистрации. Мы назовем их так же, как и поля в базе данных. Сверстаем тем же способом что и остальные поля — таблицей, смотрим:

<tr>
	<td height="40">
		<label for="website"><?php echo JText::_( 'WEBSITE' ); ?></label>
	</td>
	<td>
		<input type="text" id="website" name="website" size="40" value="http://" />
	</td>
</tr>
<tr>
	<td height="40"><?php echo JText::_( 'GENDER' ); ?></td>
	<td>
		<input type="radio" id="g_m" checked="true" name="gender" value="m" />
		<label for="g_m"><?php echo JText::_( 'MALE' ); ?></label>
		<br />
		<input type="radio" id="g_f" name="gender" value="f" />
		<label for="g_f"><?php echo JText::_( 'FEMALE' ); ?></label>
	</td>
</tr>

Вот что получится у вас на данный момент:

Немного пояснений.
Дело в том, что в Joomla, как и во всех системах управления сайтом есть мощная система управления языками и куча фишек для управления ими. Но для программиста, пишущего свой код под CMS должно быть еще больше подобных возможностей. Класс JText в Joomla довольно прост в использовании.
Давайте добавим в языковые файлы 4 строчки: WEBSITE, GENDER, MALE, FEMALE. Но для каждого компонента есть свой языковой файл. Открываем {папка joomla}/language/ru-RU/ru-RU.com_user.ini в любом текстовом редакторе и пишем в конце файла:

WEBSITE=Веб-сайт
GENDER=Пол
MALE=Мужской
FEMALE=Женский

Теперь откройте снова, и вот что у вас должно получиться:

Думаю, все легко и просто, никаких дополнительных действий не требуется.
Но вот в чем еще казус — пользователь наверное захочет отредактировать свои данные если что. Поэтому откроем файл {папка joomla}/components/com_user/views/user/tmpl/form.php (строка 70) и вписываем чуть измененный код с формы регистрации(добавлено чтение из базы данных определенного параметра):

<tr>
	<td height="40">
		<label for="website"><?php echo JText::_( 'WEBSITE' ); ?></label>
	</td>
	<td>
		<input type="text" id="website" name="website" size="40" value="<?php echo $this->escape($this->user->get('website'));?>" />
	</td>
</tr>
<tr>
<?php
$gend = $this->escape($this->user->get('gender'));
?>
	<td height="40"><?php echo JText::_( 'GENDER' ); ?></td>
	<td>
		<input type="radio" id="g_m" <?php if($gend=="m" or $gend==""): ?> checked="true" <?php endif; ?> name="gender" value="m" />
		<label for="g_m"><?php echo JText::_( 'MALE' ); ?></label>
		<br />
		<input type="radio" id="g_f" <?php if($gend=="f"): ?> checked="true" <?php endif; ?> name="gender" value="f" />
		<label for="g_f"><?php echo JText::_( 'FEMALE' ); ?></label>
	</td>
</tr>

Все. Теперь пользователь сможет отредактировать данные о себе:

Но возможность редактирования данных о пользователе должен иметь и администратор сайта. Теперь добавим эти поля в форму редактирования пользовательских данных в админ-панели.
Откроем файл {папка joomla}/administrator/components/com_users/view/user/tmpl/form.php (строка 133) и добавим в соответствии со стилем формы новые поля:

	<td class="key">
		<label for="website"><?php echo JText::_( 'WEBSITE' ); ?></label>
	</td>
	<td>
		<input type="text" id="website" name="website" size="40" value="<?php echo $this->escape($this->user->get('website'));?>" />
	</td>
</tr>
<tr>
<?php
$gend = $this->escape($this->user->get('gender'));
?>
	<td class="key"><?php echo JText::_( 'GENDER' ); ?></td>
	<td>
		<input type="radio" id="g_m" <?php if($gend=="m" or $gend==""): ?> checked="true" <?php endif; ?> name="gender" value="m" />
		<label for="g_m"><?php echo JText::_( 'MALE' ); ?></label>
		<br />
		<input type="radio" id="g_f" <?php if($gend=="f"): ?> checked="true" <?php endif; ?> name="gender" value="f" />
		<label for="g_f"><?php echo JText::_( 'FEMALE' ); ?></label>
	</td>
</tr>

Вот что у нас получилось:

Заключение

Я показал вам как можно добавить произвольные поля профиля для Joomla! Их можно использовать как в своих целях, так и выводить в публичный просмотр. Следующую статью напишу про это, а пока что запомните, что поля могут быть самые разные, главное чтобы совпадали имена переменных в самом первом файле и в базе данных. Имена полей в HTML документах должны соответствовать именам полей в базе данных. В этом и заключается весь фокус. Удачи вам во всем!

]]> http://web-grower.ru/dobavlyaem-proizvolnye-polya-v-joomla/feed/ 0 http://web-grower.ru/dobavlyaem-proizvolnye-polya-v-joomla/ Cuepoint.js http://feedproxy.google.com/~r/web-growerru/~3/cODTjjvBn_8/ http://web-grower.ru/cuepoint-js/#comments Thu, 29 Dec 2011 08:20:52 +0000 Maniac http://webgrower.defite.ru/?p=2340 Cuepoint.js
Библиотека позволяет создавать подписи и ссылки на определенные куски видео в html5-плеере.

Для инициализации скрипта нужно подключить библиотеку и вставить код:

$(document).ready(function(){
  var slides = {5:"Hello World"} // Число слайдов и подпись
  cuepoint.init(slides); //инит
  cuepoint.play(); //начинаем проигрывать видео
});

Для создания ссылки на определенный момент в видео нужно вызвать следующий метод:

$('a').click(function(){
  cuepoint.setTime(60); //время в секундах
});
]]> http://web-grower.ru/cuepoint-js/feed/ 0 http://web-grower.ru/cuepoint-js/ uLogin — виджет авторизации http://feedproxy.google.com/~r/web-growerru/~3/AawUnEtOGBs/ http://web-grower.ru/ulogin-vidzhet-avtorizacii/#comments Wed, 28 Dec 2011 22:11:30 +0000 Maniac http://webgrower.defite.ru/?p=2336 uloginЕще один Loginza-подобный сервис авторизации на сайте с помощью имеющихся у вас под рукой социальных сетей. Например, можно собрать свой виджет, исходя из набора вконтакте-одноклассники-facebook-twitter-mail.ru-google-яндекс-живой журнал-openid. Также приятно, что установить виджет можно абсолютно везде – существуют модули на Drupal, Joomla, WordPress, SMF и т.д. С точки зрения техники: можно получать такие поля как first_name — имя пользователя, last_name — фамилия, email — e-mail, nickname — псевдоним, bdate — дата рождения, sex — пол, photo — квадратная аватарка (до 100*100), photo_big — самая большая аватарка, которая выдаётся выбранной соц. сетью, city — город, country — страна.

uLogin являтся более простой в установке и использовании версией Loginza,  рекомендую к использованию.

]]> http://web-grower.ru/ulogin-vidzhet-avtorizacii/feed/ 0 http://web-grower.ru/ulogin-vidzhet-avtorizacii/ Создание веб-сайта http://feedproxy.google.com/~r/web-growerru/~3/5h65onIfUSo/ http://web-grower.ru/sozdanie-veb-sajta/#comments Sun, 18 Dec 2011 14:32:17 +0000 Иван Хромов http://webgrower.defite.ru/?p=2324 В продолжении темы про создание веб-сайтов, я записал еще одно видео, в котором рассказал все аспекты начала изучения HTML, и показал на примере создание веб страницы в редакторе Notepad++. Если раньше, начиная разработку сайта мы брались за мегабайты документации, то теперь, посмотрев видео вы сможете начать изучать язык HTML без особого труда. Я не стал разжевывать информацию и раскладывать по полочкам все от А до Я, вся необходимая информация теперь имеется в Рунете. Важность практического применения своих знаний велика, так как практикуясь вы закрепляете свои знания.
Под катом вы найдете видео и альтернативные способы его посмотреть, а так же код из урока.

Посмотреть на Vimeo →
Посмотреть оригинал →

Помощь

Посмотреть получившуюся страницу →

]]> http://web-grower.ru/sozdanie-veb-sajta/feed/ 0 http://web-grower.ru/sozdanie-veb-sajta/ Web-Grower @ Tactoom http://feedproxy.google.com/~r/web-growerru/~3/fLVhyzIv818/ http://web-grower.ru/web-grower-tactoom/#comments Tue, 08 Nov 2011 08:19:55 +0000 Maniac http://webgrower.defite.ru/?p=2317 TactoomTactoom.com — новая социалка от создателей Eventr.com, находящаяся сейчас в закрытой бете. Если вкратце — то это совокупность всех интересов пользователей, по которым можно получать новости. Таким образом, у каждого интереса есть своя страничка, которая может поддерживаться как одним, так и несколькими пользователями, указавшими конкретный интерес при написании новости.

Для тех, кто уже в сервисе — ссылка на страницу интереса Web-Grower. Кого там нет — не расстраивайтесь, у меня есть еще два инвайта, могу пригласить.

]]> http://web-grower.ru/web-grower-tactoom/feed/ 0 http://web-grower.ru/web-grower-tactoom/ IdealForms — очередная стилизация форм http://feedproxy.google.com/~r/web-growerru/~3/SeH6QPmPqB0/ http://web-grower.ru/idealforms-ocherednaya-stilizaciya-form/#comments Mon, 07 Nov 2011 13:19:19 +0000 Maniac http://webgrower.defite.ru/?p=2311 IdealFormsIdealForms — небольшой фреймворк для стилизации элементов форм. Еще до недавнего времени для стилизации <input> пользовался Niceforms, однако у него были свои недостатки. Например, для смены дизайна формы приходилось рисовать новый спрайт. В IdealForms стилизация привязана к css, без использования изображений.

Скрипт позволяет форме отлично себя чувствовать даже с отключенным JavaScript и поддерживается в IE 7+, Firefox 3+, Chrome 3+, Safari 3.1+ и Opera 11+.

Использование

1. Скачиваем, добавляем файлы в проект:
css/idealForms и js/idealForms.js

2. Загружаем стили:

<link href="css/reset.css" rel="stylesheet" type="text/css" media="screen"/>
<link href="css/idealForms/idealForms.css" rel="stylesheet" type="text/css" media="screen"/>
<link href="css/idealForms/idealForms-theme-sapphire.css" rel="stylesheet" type="text/css" media="screen"/>

Последний файл отвечает за цветовую тему элементов вашей формы. Можно выбрать одну из трех предложенных или на основе них создать свою.

3. Добавляем необходимые библиотеки

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-idealForms.js"></script>

4. Разметка будущей формы

<form>

    <!-- Section -->
    <div class="idealWrap"> 

        <label>Custom</label> 

        <!-- Insert element here --> 

    </div>
    <!-- End Section --> 
</form>

5. Разметка для элементов

Текст

<input type="text" id="One"/>
<input type="password" id="Two"/>
<textarea id="Three"></textarea>

Меню <select>

<select id="options" title="Select Option">
    <option>One</option>
    <option>Two</option>
    <option>Three </option>
    <option>Four</option>
</select>

Радио и чекбоксы

<p>
    <label><input type="checkbox" name="checks"/>Check 1</label><br/>
    <label><input type="checkbox" name="checks"/>Check 2</label><br/>
    <label><input type="checkbox" name="checks"/>Check 3</label>
</p>
<p>
    <label><input type="radio" name="radios"/>Radio 1</label><br/>
    <label><input type="radio" name="radios"/>Radio 2</label><br/>
    <label><input type="radio" name="radios"/>Radio 3</label>
</p>

Кнопки

<label>&nbsp;</label>
<input type="button" value="One"/>
<input type="button" value="Two"/>
<input type="submit" value="Submit"/>

Описание

<p>Description One</p>
<p>Description Two</p>

6. Последний штрих

Разумеется, не забываем инициализировать скрипт:

$('form');

Демонстрация формы

]]> http://web-grower.ru/idealforms-ocherednaya-stilizaciya-form/feed/ 0 http://web-grower.ru/idealforms-ocherednaya-stilizaciya-form/