Формы в Foundation


Мы решили создать простую, мощную и универсальную систему компоновки форм. Сочетание стилей форм и сетки фундамента означает, что вы можете сделать почти все, что угодно.

Основы Форм в Foundation

Создание формы в Foundation спроектировано так, чтобы быть легким, но чрезвычайно гибким. Формы строятся с использованием комбинации стандартных элементов формы, а также строк и столбцов сетки или ячеек.

Ввод текста

Эти типы ввода создают текстовое поле: text, date, datetime, datetime-local, email, month, number, password, search, tel, time, url и week.


<form>
  <div class="grid-container">
    <div class="grid-x grid-padding-x">
      <div class="medium-6 cell">
        <label>Input Label
          <input type="text" placeholder=".medium-6.cell">
        </label>
      </div>
      <div class="medium-6 cell">
        <label>Input Label
          <input type="text" placeholder=".medium-6.cell">
        </label>
      </div>
    </div>
  </div>
</form>


Флажки и переключатели

Используйте группы флажков, когда пользователь может выбрать несколько вариантов из списка,и используйте переключатели, когда пользователь должен выбрать только один вариант.

Оберните группу флажков или переключателей в элемент

<fieldset>

 и дайте им общую метку с помощью элемента . Каждый отдельный элемент управления также должен иметь свою собственную метку, созданную с использованием типичного 

<label>

<div class="grid-x grid-padding-x">
  <fieldset class="large-5 cell">
    <legend>Choose Your Favorite</legend>
    <input type="radio" name="pokemon" value="Red" id="pokemonRed" required><label for="pokemonRed">Red</label>
    <input type="radio" name="pokemon" value="Blue" id="pokemonBlue"><label for="pokemonBlue">Blue</label>
    <input type="radio" name="pokemon" value="Yellow" id="pokemonYellow"><label for="pokemonYellow">Yellow</label>
  </fieldset>
  <fieldset class="large-7 cell">
    <legend>Check these out</legend>
    <input id="checkbox1" type="checkbox"><label for="checkbox1">Checkbox 1</label>
    <input id="checkbox2" type="checkbox"><label for="checkbox2">Checkbox 2</label>
    <input id="checkbox3" type="checkbox"><label for="checkbox3">Checkbox 3</label>
  </fieldset>
</div>

Choose Your Favorite
Check these out