Zurb Foundation 3 формы

Содержание

Формы В этом руководстве вы увидите, как создавать формы с помощью Zurb Foundation 3. Способ создания форм с помощью Foundation 3 является универсальным. Начнем с простого примера. Форма (макет строки) Код: Форма (макет строки) с Foundation 3

Просмотреть демонстрацию.

Теперь мы можем сделать следующие выводы из приведенного выше примера:

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

Метки рядом с вводом

Иногда вам может потребоваться держите ваши метки слева от поля ввода вашей формы . Вот пример:

Код:

      Метка формы слева с Foundation 3         Адрес:  
   
 
    Город:  
   
 
    ZIP:  
   
 


Посмотреть демонстрацию.


Итак, два  классы, которые следует запомнить из последнего примера. Один из них - '.right' и '.inline'.
Fieldset


Наборы полей содержат ряд связанных входных данных.  в примере показано, как использовать наборы полей:





Код:
 Наборы полей формы с Foundation 3       Имя и адрес   Полное имя    Адрес      
  
 


Просмотреть демонстрацию.
Ввод с помощью  символы префикса, постфикса и действия





Код:
 Префикс формы, постфикс и действие с Foundation 3        Ввод с префиксом       #  
   
 
 
  Ввод с меткой Postfix       
  . com  
 
 
 
  Ввод с помощью кнопки постфикса       
   Поиск  
 
 
 
 


Просмотреть демонстрацию.
Состояния ошибок


Автор  добавив CSS-класс '.error' к таким элементам, как label, input и small, или в столбец контейнера или div, вы можете включить состояния ошибки с помощью Foundation 3. Вот фрагмент кода:
   Поле с ошибкой     Недействительная запись  
Радиокнопка и флажки


Вы можете  создавайте интеллектуальные переключатели и флажки с помощью Foundation 3. Для этого вам нужно добавить в форму класс '.custom', а также добавить jquery.min.js и jquery.customforms.js на веб-страницу.  Вот пример.





Код:
 Формы переключателей и флажков с помощью Foundation 3        Переключатель 1    Radio Button 3      Ярлык для флажка      Ярлык для флажка 


Просмотреть демонстрацию.
Выпадающий список/выбор элементов


Вот пример того, как создавать элементы раскрывающегося списка и выбора с помощью Foundation 3.





Код:
 Выпадающее меню формы/выбор элементов с помощью Foundation 3       Выпадающее меню формы/выбор элементов с помощью Foundation 3 
   Выберите свой любимый язык    PHP   Ruby  ASP.NET 


Посмотреть демонстрацию.

Форма (макет строки)
Fieldset
Ввод с помощью символы префикса, постфикса и действия
Состояния ошибок
Радиокнопка и флажки
Выпадающий список/выбор элементов

Формы

В этом руководстве вы увидите, как создавать формы с помощью Zurb Foundation 3. Способ создания форм с помощью Foundation 3 является универсальным. Начнем с простого примера.

Форма (макет строки)

Код:

Форма (макет строки) с Foundation 3 Полное имя Address Город Состояние ZIP Просмотреть демонстрацию. Теперь мы можем сделать следующие выводы из приведенного выше примера: размер ввода можно определить с помощью размера столбца. строки могут быть созданы внутри элемента формы. Вы также можете определить в нем столбцы. Если строки создаются внутри from, они по умолчанию получают специальные отступы для интервала. Метки рядом с вводом Иногда вам может потребоваться держите ваши метки слева от поля ввода вашей формы . Вот пример: Код: Метка формы слева с Foundation 3 Адрес: Город: ZIP: Посмотреть демонстрацию. Итак, два классы, которые следует запомнить из последнего примера. Один из них - '.right' и '.inline'. Fieldset Наборы полей содержат ряд связанных входных данных. в примере показано, как использовать наборы полей: Код: Наборы полей формы с Foundation 3 Имя и адрес Полное имя Адрес Просмотреть демонстрацию. Ввод с помощью символы префикса, постфикса и действия Код: Префикс формы, постфикс и действие с Foundation 3 Ввод с префиксом # Ввод с меткой Postfix . com Ввод с помощью кнопки постфикса Поиск Просмотреть демонстрацию. Состояния ошибок Автор добавив CSS-класс '.error' к таким элементам, как label, input и small, или в столбец контейнера или div, вы можете включить состояния ошибки с помощью Foundation 3. Вот фрагмент кода: Поле с ошибкой Недействительная запись Радиокнопка и флажки Вы можете создавайте интеллектуальные переключатели и флажки с помощью Foundation 3. Для этого вам нужно добавить в форму класс '.custom', а также добавить jquery.min.js и jquery.customforms.js на веб-страницу. Вот пример. Код: Формы переключателей и флажков с помощью Foundation 3 Переключатель 1 Radio Button 3 Ярлык для флажка Ярлык для флажка Просмотреть демонстрацию. Выпадающий список/выбор элементов Вот пример того, как создавать элементы раскрывающегося списка и выбора с помощью Foundation 3. Код: Выпадающее меню формы/выбор элементов с помощью Foundation 3 Выпадающее меню формы/выбор элементов с помощью Foundation 3 Выберите свой любимый язык PHP Ruby ASP.NET Посмотреть демонстрацию.