Готовые примеры /

Пример формы обратной связи

В этом примере создадим обычную форму обратной связи. Исходные данные:

  • Поле «Имя» — обязательное для заполнения.
  • Поле «Эл. почта» — необязательное, но, в случае заполнения, должно проверяться на валидность.
  • Поля «Тема» и «Текст сообщения» — одно из этих полей обязательное к заполнению (любое).
  • Кнопка отправка формы доступна только при соблюдении всех вышеперечисленных условий.
 Представтесь, пожалуйста
 Адрес для обратной связи с вами

Код формы обратной связи (HTML, JavaScript)

<form class="zf">
	<dl>
		<dt><label for="input-name-feedback">Ваше имя</label></dt>
		<dd><input class="zf" id="input-name-feedback" name="name" type="text" size="30" onclick="return { oRequired : {} }" /></dd>
		<dd class="zf-hint"><i class="zf-arrow"></i>Представтесь, пожалуйста</dd>
	</dl>
	<dl>
		<dt><label for="input-email-feedback">Эл. почта</label></dt>
		<dd><input class="zf" id="input-email-feedback" name="email" type="text" size="30" onclick="return { oValid : { sType : 'email' } }" /></dd>
		<dd class="zf-hint"><i class="zf-arrow"></i>Адрес для обратной связи с&#160;вами</dd>
	</dl>
	<dl>
		<dt><label for="input-subject-feedback">Тема</label></dt>
		<dd><input class="zf" id="input-subject-feedback" name="subject" type="text" size="30" onclick="return { oRequired : { sLogic : 'or', aFrom : [{ sName : 'body'}] } }" /></dd>
	</dl>
	<dl>
		<dt><label for="input-body-feedback">Текст<br />сообщения</label></dt>
		<dd><textarea class="zf" id="input-body-feedback" name="body" cols="27" rows="5" onclick="return { oRequired : { sLogic : 'or', aFrom : [{ sName : 'subject'}] } }"></textarea></dd>
	</dl>
	<div class="zf-buttons"><input class="zf zf-submit" value="Отправить" type="submit" /></div>
</form>