Formularios

Ejecuta una acción al hacer clic o al pulsarlo. Define siempre type: dentro de un formulario, de forma predeterminada lo envía.

<button type="submit">Save</button>
<button type="button">Cancel</button>
<button type="button" disabled>Disabled</button>

Con estilos de elements/forms.css, sin clase. Un botón sin type, o con type="submit", es la acción principal; type="button" y type="reset" son la secundaria. Añade .luz-btn a un a que deba verse como botón, y para los papeles de peligro y fantasma y los tamaños.

Sugerencias que aparecen mientras se escribe en un campo input. Se puede escribir cualquier otro valor.

<label for="d-datalist">Browser</label>
<input id="d-datalist" list="d-browsers" placeholder="Start typing">
<datalist id="d-browsers">
  <option value="Chrome"></option>
  <option value="Firefox"></option>
  <option value="Safari"></option>
</datalist>

LUZ no añade estilos al datalist: el navegador dibuja las sugerencias. El campo toma el aspecto de un campo de texto sin clase, de elements/forms.css.

Agrupa controles relacionados, como los datos de una dirección o un conjunto de botones de opción. Un legend como primer elemento hijo da nombre al grupo.

<fieldset>
  <legend>Plan</legend>
  <label><input type="radio" name="d-plan" checked> Free</label>
  <label><input type="radio" name="d-plan"> Team</label>
</fieldset>

Con estilos de elements/forms.css, sin clase: una caja con la leyenda en su borde. Un label que contiene un botón de radio o una casilla la coloca junto al texto. Las clases del componente .luz-check-group y .luz-check-item dibujan ellas mismas la casilla y el punto.

Agrupa controles cuyos valores se envían juntos. El navegador comprueba los campos obligatorios y sus formatos antes de enviar nada.

<form action="#">
  <label for="d-form-name">Name</label>
  <input id="d-form-name" name="name" required>
  <button type="submit">Send</button>
</form>

Un form no tiene estilos propios: es estructura. Los controles que contiene llevan el aspecto, y el espacio entre ellos viene de sus propias reglas. Deja Nombre vacío y pulsa Enviar: el navegador detendrá el envío y explicará el motivo.

Un campo que rellena quien visita la página. El atributo type determina su tipo: text, email, number, range, color, date y muchos más.

<label for="d-input">Email</label>
<input id="d-input" type="email" placeholder="jane@example.com" autocomplete="off">

Con estilos de elements/forms.css, sin clase: los tipos de texto, correo, número, fecha y similares llenan su contenedor. Añade .luz-input a un campo de color o de archivo, y .luz-field a un label con texto de ayuda y error.

El nombre visible de un control. Relaciónalos mediante for e id: los lectores de pantalla lo anunciarán y, al hacer clic en él, se enfocará o cambiará el control.

<label for="d-label">Project name</label>
<input id="d-label" type="text">

Con estilos de elements/forms.css, sin clase: un bloque encima de su campo, o junto a la casilla o el botón de radio que contiene.

El nombre de un fieldset, que se anuncia al entrar en el grupo. Es el primer elemento hijo de fieldset.

<fieldset>
  <legend>Notifications</legend>
  <label><input type="checkbox" checked> Email</label>
  <label><input type="checkbox"> Push</label>
</fieldset>

Con estilos de elements/forms.css, sin clase: texto pequeño en mayúsculas y en el color secundario, en el borde del fieldset.

Muestra una medida en una escala conocida, como el espacio de almacenamiento usado o la puntuación de una contraseña. Para mostrar el progreso de una tarea, usa progress.

<label for="d-meter">Storage used, 6 of 10 GB</label>
<meter id="d-meter" min="0" max="10" low="3" high="8" optimum="2" value="6">6 of 10 GB</meter>

Con estilos de elements/forms.css, sin clase: el tamaño de la barra. El navegador dibuja sus colores; .luz-meter los dibuja en el color de marca.

Un conjunto etiquetado de opciones dentro de select, como ciudades agrupadas por país. La etiqueta del grupo no se puede elegir.

<label for="d-optgroup">Role</label>
<select id="d-optgroup">
  <optgroup label="Product">
    <option>Designer</option>
    <option>Product manager</option>
  </optgroup>
  <optgroup label="Engineering">
    <option>Developer</option>
  </optgroup>
</select>

LUZ no añade estilos al optgroup: el navegador dibuja la lista. La caja cerrada tiene el estilo del select.

Una opción de select o una sugerencia de datalist.

<label for="d-option">Role</label>
<select id="d-option">
  <option value="">Select a role</option>
  <option value="dev">Developer</option>
  <option value="design">Designer</option>
</select>

LUZ no añade estilos al option: el navegador dibuja la lista. La caja cerrada tiene el estilo del select.

Muestra el resultado de un cálculo o de una acción de quien visita la página. Los lectores de pantalla lo anuncian cuando cambia.

<label for="d-range">Volume <output id="d-range-out" for="d-range">50</output></label>
<input id="d-range" type="range" min="0" max="100" value="50" data-output="d-range-out">

Con estilos de elements/forms.css, sin clase.

Muestra cuánto ha avanzado una tarea, por ejemplo, una carga. Omite value cuando no se puede saber el progreso: la barra indicará actividad sin mostrar una cantidad.

<label for="d-progress">Uploading, 70%</label>
<progress id="d-progress" max="100" value="70">70%</progress>
<label for="d-progress-wait">Working</label>
<progress id="d-progress-wait">Working</progress>

Con estilos de elements/forms.css, sin clase: el tamaño de la barra y el color de marca de su relleno. .luz-progress dibuja ella misma la pista y el relleno.

Una lista de opciones fijas entre las que elegir. Si solo hay unas pocas y deben estar siempre a la vista, los botones de opción son más rápidos.

<label for="d-select">Role</label>
<select id="d-select">
  <option value="">Select a role</option>
  <option value="dev">Developer</option>
  <option value="design">Designer</option>
</select>

Con estilos de elements/forms.css, sin clase: la caja cerrada. La lista abierta es la del navegador. Añade .luz-select para dar estilo también a la lista abierta, donde el navegador pueda.

Repite la opción elegida dentro del botón de un select personalizable, para conservar sus iconos y formato. Es experimental: consulta la tabla de compatibilidad de MDN antes de depender de él.

Solo marcado: este elemento no se representa.

<select>
  <button>
    <selectedcontent></selectedcontent>
  </button>
  <option value="design">Design</option>
  <option value="build">Build</option>
</select>

LUZ no añade estilos: se mantiene el aspecto del navegador.

Un campo para texto de varias líneas, como un mensaje. LUZ solo permite que crezca en vertical.

<label for="d-textarea">Notes</label>
<textarea id="d-textarea" rows="3" placeholder="Anything else?"></textarea>

Con estilos de elements/forms.css, sin clase: el aspecto de un campo de texto, más alto, que crece solo en vertical. Las clases .luz-input y .luz-input--textarea dan el mismo aspecto dentro de un .luz-field.