Loading





Форекс с Альпари

eTXT




Анкетка


Форма для обратной связи двухколоночная

Информация, представленная на этой странице ориентирована в первую очередь для начинающих web-мастеров.

Здесь представлена «чистая» форма для обратной связи на CSS. Она состоит из двух колонок, но может трансформироваться в одну колонку, когда размер окна составляет 480px или меньше. Двухколоночная конструкция и крупные элементы управления предназначены, чтобы сделать форму более привлекательной для понимания и заполнения. Для создания формы не используются фоновые изображения.

Демо-пример

Установка на сайт

1. Код в таблице внизу вставить в раздел head или файл стилей сайта:

Для выделения текста сделайте щелчок мышью.
Для увеличения окна, «подцепите» мышью правый нижний угол.


2. А этот код скопируйте и расположите в разделе body:


<form id="contactform">

<div class="formcolumn">

<label for="yourname">Ваше имя:</label>
<input type="text" id="yourname">

<label for="youremail">Ваш Email:</label>
<input type="email" id="youremail">

<fieldset>
<legend>Пол:</legend>
<ul>
<li>Мужчина: <input type="radio" id="male" name="sex"></li>
<li>Женщина: <input type="radio" id="female" name="sex"></li>
</ul>
</fieldset>

</div>

<div class="formcolumn">

<fieldset>
<legend>Навыки:</legend>
<ul>
<li>JavaScript: <input type="checkbox" id="javascript"></li>
<li>CSS: <input type="checkbox" id="css"></li>
<li>PHP: <input type="checkbox" id="php"></li>
<li>Photoshop: <input type="checkbox" id="ruby"></li>
<li>Реклама: <input type="checkbox" id="python"></li>
</ul>
</fieldset>

<label for="dept">Отдел:</label>
<select id="dept">
<option value="3">Разработчик</option>
<option value="2.1">Отдел кадров</option>
<option value="3">Продажи</option>
<option value="4.1">Обслуживание клиентов / Поддержка</option>
<option value="5.2">Учет</option>
</select>

<label for="feedback">Ваше сообщение:</label>
<textarea id="feedback"></textarea>

</div>

<div class="buttons">
<input class="button" type="submit" value="Отправить!">
</div>

</form>

<p style="text-align:center">

Copyright <? echo date("Y"); ?> <a href="#">ваш сайт.ru</a>. Все права защищены.

</p>

Спасибо за внимание. Посещайте мой сайт. Пока! L.M.


Работа в интернете с текстами




Ваш комментарий







  © 2015–2018  https://leonidmuzyka.com/  L.M. Служба поддержки RSS подписка подписка