Formularios
Nos pusimos en marcha en la Foundation 3 para crear un fácil, potente y versátil sistema de diseño de formularios. Una combinación de estilos de formularios y la grid de Foundation en la que usted puede hacer básicamente cualquier cosa.
Los Fundamentos
Elementos del formulario en Foundation 3 son de estilo en función de su tipo de atributo en lugar de las clases .input-text, por lo que el SCSS / CSS es mucho más simple.
Los inputs en Foundation 3 tienen otro cambio importante - que son la anchura completa de forma predeterminada. Esto significa que los inputs se ejecutará tan amplios como la columna que los contiene. Sin embargo, usted tiene dos opciones que hacen que estas formas sean extremadamente versátiles:
- Puede utilizar las entradas de tamaño tamaño de las columnas, al igual que
.six. - Puede crear los elementos row dentro de su forma y usar las columnas del form con los inputs, labels y mucho más. Las filas dentro son una forma especial de heredar algo de relleno para igualar el espaciamiento de entrada.
Row Layouts
He aquí un ejemplo de un diseño de forma controlada con filas y columnas.
<form>
<label>This is a label.</label>
<input type="text" placeholder="Standard Input" />
<label>Address</label>
<input type="text" class="twelve" placeholder="Street" />
<div class="row" >
<div class="six columns" >
<input type="text" placeholder="City" />
</div>
<div class="three columns" >
<input type="text" placeholder="State" />
</div>
<div class="three columns" >
<input type="text" placeholder="ZIP" />
</div>
</div>
</form>
A veces quieres un formulario con las etiquetas a la izquierda de las entradas.
<form>
<div class="row" >
<div class="two mobile-one columns" >
<label class="right" > Address Name:</label>
</div>
<div class="ten mobile-three columns" >
<input type="text" placeholder="e.g. Home" class="eight" />
</div>
</div>
<div class="row" >
<div class="two mobile-one columns" >
<label class="right" > City:</label>
</div>
<div class="ten mobile-three columns" >
<input type="text" class="eight" />
</div>
</div>
<div class="row" >
<div class="two mobile-one columns" >
<label class="right" > ZIP:</label>
</div>
<div class="ten mobile-three columns" >
<input type="text" class="three" />
</div>
</div>
</form>
Fieldsets
Elementos simples que pueden contener la totalidad o parte de un formulario para crear una mejor división.
<fieldset>
<legend>Fieldset Name</legend>
<label>This is a label.</label>
<input type="text" placeholder="Standard Input" />
<label>Address</label>
<input type="text" />
<input type="text" class="six" />
</fieldset>
Labels and Actions with Collapsed Columns
(Las etiquetas y las acciones con columnas derrumbadas)
Foundation forma las acciones de apoyo vinculados a botones y etiquetas de prefijo/sufijo, a través de un enfoque versátil, utilizando las propiedades especiales de la cuadrícula. Esencialmente, usted puede utilizar una fila colapsada para crear la etiqueta/acción/entrada de combinaciones. Aquí hay algunos ejemplos.
<label>Input with a prefix character</label>
<div class="row" >
<div class="four columns" >
<div class="row collapse" >
<div class="two mobile-one columns" >
<span class="prefix" > #</span>
</div>
<div class="ten mobile-three columns" >
<input type="text" />
</div>
</div>
</div>
</div>
Nota: para estos prefijo y sufijo las etiquetas que estamos usando el tamaño de nuestras etiquetas se muestra correctamente en dispositivos pequeños usando la grid móvil.
<label>Input with a prefix character</label>
<div class="row" >
<div class="five columns" >
<div class="row collapse" >
<div class="eight mobile-three columns" >
<input type="text" />
</div>
<div class="four mobile-one columns" >
<a href="#" class="postfix button" > Search</a>
</div>
</div>
</div>
</div>
<label>Input with a prefix character</label>
<div class="row" >
<div class="five columns" >
<div class="row collapse" >
<div class="eight mobile-three columns" >
<input type="text" />
</div>
<div class="four mobile-one columns" >
<a href="#" class="postfix button" > Search</a>
</div>
</div>
</div>
</div>
Error States
Foundation incluye los estados de error para las labels, los inputs y los mensajes que usted puede tener en su aplicación que genera programáticamente. Puede adjuntar una clase de.errorcualquiera de los elementos individuales ( labels, inputs, small ) o a una columna de contenedor o div.<div class="row" ><div class="five columns" ><label class="error" > Field with Error</label><input type="text" class="error" /><small class="error" > Invalid entry</small></div><div class="five columns end error" ><label>Another Error</label><input type="text" /><small>Invalid entry</small></div></div>
<form>
<fieldset>
<legend>Large Form Example</legend>
<div class="row">
<div class="five columns">
<label>Name</label>
<input type="text" />
<label>Occupation</label>
<input type="text" />
<label>Twitter</label>
<div class="row collapse">
<div class="two columns">
<span class="prefix">@</span>
</div>
<div class="ten columns">
<input type="text" placeholder="foundationzurb" />
</div>
</div>
<label>URL</label>
<div class="row collapse">
<div class="nine columns">
<input type="text" placeholder="foundation.zurb" />
</div>
<div class="three columns">
<span class="postfix">.com</span>
</div>
</div>
</div>
</div>
<label>Address</label>
<input type="text" placeholder="Street (e.g. 123 Awesome St.)" />
<div class="row">
<div class="six columns">
<input type="text" placeholder="City" />
</div>
<div class="two columns" />
<select>
<option>CA</option>
</select>
</div>
<div class="four columns">
<input type="text" placeholder="ZIP" />
</div>
</div>
</fieldset>
</form>
Custom Inputs
Creación fácil de elementos de estilo de formulario personalizado es tan locamente fácil, es prácticamente un crimen. Sólo tiene que añadir una clase de "custom" a un formulario y, si lo desea, jquery.customforms.js hará todo lo posible para usted.
Foundation form js buscará cualquier botón de casilla de verificación de radio, o seleccionara el elemento y lo reemplazara con el formato personalizado que ya se ha labrado con forms.css.
<form class="custom" >
<label for="radio1" >
<input name="radio1" type="radio" id="radio1" > Radio Button 1
</label>
<label for="radio2" >
<input name="radio1" type="radio" id="radio2" disabled > Radio Button 3
</label>
</form>
Si usted quiere evitar un destello potencial (en espera de js para cargar y reemplazar los elementos por defecto) que puede suministrar el formato personalizado como parte de la página, y en el js simplemente asignar los elementos personalizados a las entradas.
Foundation formularios personalizados incluso se respeta y aplica correctamente los estados por defecto para los elementos de la radio, la casilla de verificación y de selección. Usted puede utilizar las propiedades "marcado" o "seleccionado" normalmente, y el JS serán aplicables tan pronto como se carga la página.
<label for="radio1">
<input name="radio1" type="radio" id="radio1" style="display:none;">
<span class="custom radio"></span> Radio Button 1
</label>
<label for="radio2">
<input name="radio1" type="radio" id="radio2" style="display:none;">
<span class="custom radio checked"></span> Radio Button 2
</label>
<label for="radio3">
<input name="radio1" type="radio" id="radio3" disabled style="display:none;">
<span class="custom radio"></span> Radio Button 3
</label>
<label for="checkbox1">
<input type="checkbox" id="checkbox1" style="display: none;">
<span class="custom checkbox"></span> Label for Checkbox
</label>
<label for="checkbox2">
<input type="checkbox" id="checkbox2" style="display: none;">
<span class="custom checkbox"></span> Label for Checkbox
</label>
<label for="checkbox3">
<input type="checkbox" id="checkbox3" style="display: none;">
<span class="custom checkbox"></span> Label for Checkbox
</label>
Dropdown / Select Elements
<label for="customDropdown" > Dropdown Label</label>
<select style="display:none;" id="customDropdown" >
<option SELECTED > This is a dropdown</option>
<option>This is another option</option>
<option>Look, a third option</option>
</select>
<div class="custom dropdown" >
<a href="#" class="current" > This is a dropdown</a>
<a href="#" class="selector"></a>
<ul>
<li>This is a dropdown</li>
<li>This is another option</li>
<li>Look, a third option</li>
</ul>
</div>
Adición de los formularios personalizados con JavaScript
Si va a crear estos formularios personalizados utilizando JavaScript (a través de AJAX, JavaScript plantillas o lo que sea), también tendrá que crear el formato personalizado que normalmente crea la Foundation para usted.
Foundation detecta los formularios personalizados cuando el documento se ha cargado y agrega el marcado personalizado necesario para que las formas bonitas.Sin embargo, si va a agregar estas formas después de que el documento se haya cargado, la Foundation no sabe para añadir este marcado.
Todos los eventos formularios personalizados se enlazan con el jQuery.fn.on (), por lo que no tiene que preocuparse por los controladores de eventos que no están consolidados a los nuevos elementos.
