Formularios de Foundation
Los controles de formulario de Foundation se configuran automáticamente con estilos globales:
Todos los<textarea>,
<select>y<input>elementos tienen un ancho del 100%, y cuentan con márgenes exteriores, relleno, sombras y efectos al pasar el mouse.
Ejemplo
<form>
Input:
<input type="text" placeholder="Name">
Textarea:
<textarea rows="4" placeholder="Address"></textarea>
Select:
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</form>
Input:
<input type="text" placeholder="Name">
Textarea:
<textarea rows="4" placeholder="Address"></textarea>
Select:
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</form>
Pruébalo »
Etiquetas
En los formularios, use<label>elementos para establecer etiquetas. Las etiquetas pueden tener atributos for e id. Al hacer clic en la etiqueta o en el campo de entrada, el campo de entrada obtiene el foco:
Ejemplo
<form>
<label for="name">Input
<input type="text" placeholder="Name" id="name">
</label>
<label for="adr">Label
<textarea rows="4" placeholder="Address" id="adr"></textarea>
</label>
<label for="num">Select
<select id="num">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</label>
</form>
<label for="name">Input
<input type="text" placeholder="Name" id="name">
</label>
<label for="adr">Label
<textarea rows="4" placeholder="Address" id="adr"></textarea>
</label>
<label for="num">Select
<select id="num">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</label>
</form>
Pruébalo »
Si necesita alinear las etiquetas a la derecha, puede usar.rightla clase:
Fieldset
Foundation renderiza<fieldset>el estilo de los elementos de la siguiente manera:
Ejemplo
<form>
<fieldset>
<legend>Fieldset Legend</legend>
<label>Name
<input type="text" placeholder="First Name..">
</label>
<label>Email
<input type="text" placeholder="Enter email..">
</label>
</fieldset>
</form>
<fieldset>
<legend>Fieldset Legend</legend>
<label>Name
<input type="text" placeholder="First Name..">
</label>
<label>Email
<input type="text" placeholder="Enter email..">
</label>
</fieldset>
</form>
Pruébalo »
Estado de error
Utilice.errorla clase para establecer los estilos de error de etiquetas, campos de entrada y áreas de texto:
Ejemplo
<form>
<label class="error">Error
<input type="text" placeholder="Name..">
</label>
<small class="error">Wrong input</small>
<textarea rows="4" placeholder="Address"></textarea>
<small class="error">Wrong input</small>
</form>
<label class="error">Error
<input type="text" placeholder="Name..">
</label>
<small class="error">Wrong input</small>
<textarea rows="4" placeholder="Address"></textarea>
<small class="error">Wrong input</small>
</form>
Pruébalo »
 |
Necesita usar JavaScript para actualizar el estado de error de la entrada del usuario. |
|---|