Lecaw

Учимся создавать Web-сайты

Foundation для начинающих: Пользовательские формы и переключатели

June 30, 2013
CSS
572hits

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

 

Серия статей Foundation для начинающих:

Формы, для меня всегда были головной болью, особенно когда нужно чтобы они вписывались в мои чрезмерно амбициозные проекты. Foundation делает весь этот процесс намного проще, благодаря JavaScript плагину. Этот плагин очень простой в настройке и дает вам возможность легко настраивать элементы формы при помощи CSS.

Плагин самостоятельно скрывает стандартные элементы формы, отображая уже настроенные вами элементы. Затем он взаимодействует со стандартными элементами, то есть форма-прежнему будет работать, но в другом виде. Давайте посмотрим, как это работает.

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

С точки зрения веб-сайтов наиболее распространенный тип формы, вероятно, всегда была форма обратной связи. Мы будем использовать стандартные поля ввода, плюс один или два необычных примера.

Начнем со стандартного тега form. Чтобы инициировать плагин, мы должны добавить класс “custom”. Теперь у нас есть пользовательская форма.

Создадим форму, в которой будет одна строка с двумя столбцами:

<form class="custom">
  <div class="row">
    <div class="large-6 columns">
    </div>
    <div class="large-6 columns">
    </div>
  </div>
</form>

Теперь перейдем к левой колонке; в примере я использовал выпадающий список, чтобы выбрать приветствие, сопровождаемое полем ввода имени, как на сайте - форекс для начинающих. Для этого используем стандартные теги с классом “collapse” в строке.

<div class="row collapse">
  <div class="large-3 small-3 columns">
    <select>
      <option>Mr.</option>
      <option>Mrs.</option>
      <option>Miss.</option>
      <option>Ms.</option>
      <option>Dr.</option>
    </select>
  </div>
  <div class="large-9 small-9 columns">
    <input type="text" placeholder="Name" />
  </div>
</div>
<input type="email" placeholder="Email" />
<select id="contactDropdown">
  <option DISABLED>How did you find us?</option>
  <option>Google</option>
  <option>A friend told me</option>
  <option>Not sure, where am I?</option>
</select>

Вы должны убедиться, что элемент выбора имеет уникальный идентификатор. Таким образом, чтобы объединить эту форму с кодом, нужно разместить её в первом контейнере с классом “large-6″.

Затем элементы для второго столбца. Они содержат текстовую область, флажок “спама” и переключатель, сопровождаемый кнопкой “Отправить”.

<textarea placeholder="Message"></textarea>
<div class="row">
  <div class="large-6 small-6 columns">
    <label>Send me spam  
      <input type="checkbox" CHECKED style="display:none" />
    </label>
  </div>
  <div class="large-3 small-3 columns">
    <label>CC me?</label>
  </div>
  <div class="large-3 small-3 columns end">
    <div class="switch tiny">
      <input id="x" name="switch-x" type="radio" checked>
      <label for="x">No</label>
      <input id="x1" name="switch-x" type="radio">
      <label for="x1">yes</label>
      <span></span>
    </div>
  </div>
</div>
<input class="button small large-12" type="submit" value="Send Message" />

Переключатели

Переключатели - отличный способ визуального переключения элементов ввода. Их структура содержит контейнер с классом “switch”, с выбранным вами размером - “tiny”, “small” и “large”. Вы можете также установить переключатели, которые будут круглыми, для этого служит класс “rounded”. У самой структуры есть два элемента ввода. У них есть собственные метки, которые Foundation использует для текста. Элементы ввода должны содержать уникальные идентификаторы, а метки - атрибут “for”.

<div class="switch tiny">
  <input id="x" name="switch-x" type="radio" checked>
  <label for="x">No</label>

Остальные элементы формы

Какие еще элементы формы обычно используют в веб-сайтах? Конечно радио кнопки, у каждой радио-кнопки должно быть одинаковое имя, а также свойство “display:none”.

<input name="radio1" type="radio" style="display:none;" CHECKED />
<input name="radio1" type="radio" style="display:none;" />
<input name="radio1" type="radio" disabled style="display:none;">

Одна из наиболее важных вещей в использовании пользовательских форм - возможность быстро создать любой элемент.

Ниже приведен пример, в котором я использовал элемент span с классом “prefix”. Вы все также должны разместить все элементы в отдельном столбце, поскольку классы “prefix" и “postfix” предотвращают разделение элементов. Вы можете также использовать класс “postfix” в любом объекте, например в поле поиска, у Вас будет свой текстовый элемент ввода, сопровождаемый кнопкой.

<div class="row collapse">
  <div class="large-9 small-9 columns">
    <span class="prefix">http://webdesign.tutsplus</span>
  </div>
  <div class="large-3 small-3 columns">
    <select>
      <option>.com</option>
      <option>.co</option>
      <option>.ca</option>
    </select>
  </div>
</div>

Сообщения об ошибке

У большинства форм есть по крайней мере одно обязательное поле. В Foundation учли ситуацию с проверкой заполнения обязательных полей, если одно из таких полей будет не заполнено, то появится сообщения об ошибке, для этого используется класс “error”. Просто добавьте его к любому элементу ввода, метке, небольшому тегу или столбцу.

<form>
  <div class="row">
    <div class="large-6 columns">
      <label class="error">Error</label>
      <input type="text" class="error" />
      <small class="error">Invalid entry</small>
    </div>
    <div class="large-6 columns error">
      <label>Another Error</label>
      <input type="text" />
      <small>Invalid entry</small>
    </div>
  </div>
  <textarea class="error" placeholder="Message..."></textarea>
  <small class="error">Invalid entry</small>
</form>

 

Дополнительная информация

Влерий Аликин - веб-разработчик & дизайнер. Соучредитель и член команды Lecaw.

Эл. почта
RATTING:
(1 Голосовать)

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