Formularios
Ejemplos y pautas de uso para estilos de control de formulario, opciones de diseño y componentes personalizados para crear una amplia variedad de formularios.
Visión general
Los controles de formulario de Bootstrap amplían nuestros estilos de formulario reiniciados con clases. Use estas clases para optar por sus pantallas personalizadas para una representación más consistente en todos los navegadores y dispositivos.
Asegúrese de utilizar un type
atributo adecuado en todas las entradas (p. ej., email
para la dirección de correo electrónico o number
para la información numérica) para aprovechar los controles de entrada más nuevos, como la verificación de correo electrónico, la selección de números y más.
Aquí hay un ejemplo rápido para demostrar los estilos de formulario de Bootstrap. Siga leyendo para obtener documentación sobre las clases requeridas, el diseño de formularios y más.
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Controles de formulario
Los controles de forma textual, como <input>
s, <select>
s y <textarea>
s, tienen estilo con la .form-control
clase. Se incluyen estilos para apariencia general, estado de enfoque, tamaño y más.
Asegúrese de explorar nuestros formularios personalizados para obtener más estilos <select>
.
<form>
<div class="form-group">
<label for="exampleFormControlInput1">Email address</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="[email protected]">
</div>
<div class="form-group">
<label for="exampleFormControlSelect1">Example select</label>
<select class="form-control" id="exampleFormControlSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlSelect2">Example multiple select</label>
<select multiple class="form-control" id="exampleFormControlSelect2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Example textarea</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
</form>
Para entradas de archivos, cambie el .form-control
por .form-control-file
.
<form>
<div class="form-group">
<label for="exampleFormControlFile1">Example file input</label>
<input type="file" class="form-control-file" id="exampleFormControlFile1">
</div>
</form>
Dimensionamiento
Establece alturas usando clases como .form-control-lg
y .form-control-sm
.
<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
<select class="form-control form-control-lg">
<option>Large select</option>
</select>
<select class="form-control">
<option>Default select</option>
</select>
<select class="form-control form-control-sm">
<option>Small select</option>
</select>
Solo lectura
Agregue el readonly
atributo booleano en una entrada para evitar la modificación del valor de la entrada. Las entradas de solo lectura aparecen más claras (al igual que las entradas deshabilitadas), pero conservan el cursor estándar.
<input class="form-control" type="text" placeholder="Readonly input here..." readonly>
Texto sin formato de solo lectura
Si desea tener <input readonly>
elementos en su formulario con estilo como texto sin formato, use la .form-control-plaintext
clase para eliminar el estilo de campo de formulario predeterminado y conservar el margen y el relleno correctos.
<form>
<div class="form-group row">
<label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="text" readonly class="form-control-plaintext" id="staticEmail" value="[email protected]">
</div>
</div>
<div class="form-group row">
<label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword">
</div>
</div>
</form>
<form class="form-inline">
<div class="form-group mb-2">
<label for="staticEmail2" class="sr-only">Email</label>
<input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="[email protected]">
</div>
<div class="form-group mx-sm-3 mb-2">
<label for="inputPassword2" class="sr-only">Password</label>
<input type="password" class="form-control" id="inputPassword2" placeholder="Password">
</div>
<button type="submit" class="btn btn-primary mb-2">Confirm identity</button>
</form>
Entradas de rango
Establezca entradas de rango desplazables horizontalmente usando .form-control-range
.
<form>
<div class="form-group">
<label for="formControlRange">Example Range input</label>
<input type="range" class="form-control-range" id="formControlRange">
</div>
</form>
Casillas de verificación y radios
Las casillas de verificación y los radios predeterminados se han mejorado con la ayuda de .form-check
una única clase para ambos tipos de entrada que mejora el diseño y el comportamiento de sus elementos HTML . Las casillas de verificación son para seleccionar una o varias opciones en una lista, mientras que las radios son para seleccionar una opción de muchas.
Se admiten casillas de verificación y radios deshabilitadas. El disabled
atributo aplicará un color más claro para ayudar a indicar el estado de la entrada.
Las casillas de verificación y los botones de opción admiten la validación de formularios basada en HTML y proporcionan etiquetas concisas y accesibles. Como tal, nuestros <input>
s y <label>
s son elementos hermanos a diferencia de an <input>
dentro de a <label>
. Esto es un poco más detallado ya que debe especificar id
y for
atributos para relacionar el <input>
y <label>
.
Predeterminado (apilado)
De forma predeterminada, cualquier cantidad de casillas de verificación y radios que sean hermanos inmediatos se apilarán verticalmente y se espaciarán adecuadamente con .form-check
.
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
Default checkbox
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
<label class="form-check-label" for="defaultCheck2">
Disabled checkbox
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
<label class="form-check-label" for="exampleRadios1">
Default radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
<label class="form-check-label" for="exampleRadios2">
Second default radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
<label class="form-check-label" for="exampleRadios3">
Disabled radio
</label>
</div>
En línea
Agrupe casillas de verificación o radios en la misma fila horizontal agregando .form-check-inline
a cualquier archivo .form-check
.
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
<label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
<label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
<label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
<label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
<label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
<label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>
sin etiquetas
Agregue .position-static
a las entradas dentro .form-check
que no tienen ningún texto de etiqueta. Recuerde proporcionar algún tipo de nombre accesible para las tecnologías de asistencia (por ejemplo, usando aria-label
).
<div class="form-check">
<input class="form-check-input position-static" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
</div>
<div class="form-check">
<input class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
</div>
Diseño
Dado que Bootstrap se aplica display: block
a width: 100%
casi todos nuestros controles de formulario, los formularios se apilarán verticalmente de forma predeterminada. Se pueden usar clases adicionales para variar este diseño según el formulario.
Formar grupos
La .form-group
clase es la forma más fácil de agregar algo de estructura a los formularios. Proporciona una clase flexible que fomenta la agrupación adecuada de etiquetas, controles, texto de ayuda opcional y mensajes de validación de formularios. De forma predeterminada, solo se aplica margin-bottom
, pero recoge estilos adicionales .form-inline
según sea necesario. Úselo con <fieldset>
s, <div>
s o casi cualquier otro elemento.
<form>
<div class="form-group">
<label for="formGroupExampleInput">Example label</label>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input placeholder">
</div>
<div class="form-group">
<label for="formGroupExampleInput2">Another label</label>
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input placeholder">
</div>
</form>
Cuadrícula de formulario
Se pueden construir formularios más complejos utilizando nuestras clases de cuadrícula. Utilícelos para diseños de formularios que requieran varias columnas, anchos variados y opciones de alineación adicionales.
<form>
<div class="row">
<div class="col">
<input type="text" class="form-control" placeholder="First name">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Last name">
</div>
</div>
</form>
Fila de formulario
También puede cambiar .row
por .form-row
, una variación de nuestra fila de cuadrícula estándar que anula los canales de columna predeterminados para diseños más ajustados y compactos.
<form>
<div class="form-row">
<div class="col">
<input type="text" class="form-control" placeholder="First name">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Last name">
</div>
</div>
</form>
También se pueden crear diseños más complejos con el sistema de cuadrícula.
<form>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">Email</label>
<input type="email" class="form-control" id="inputEmail4">
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">Password</label>
<input type="password" class="form-control" id="inputPassword4">
</div>
</div>
<div class="form-group">
<label for="inputAddress">Address</label>
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div>
<div class="form-group">
<label for="inputAddress2">Address 2</label>
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputCity">City</label>
<input type="text" class="form-control" id="inputCity">
</div>
<div class="form-group col-md-4">
<label for="inputState">State</label>
<select id="inputState" class="form-control">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="form-group col-md-2">
<label for="inputZip">Zip</label>
<input type="text" class="form-control" id="inputZip">
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck">
<label class="form-check-label" for="gridCheck">
Check me out
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
forma horizontal
Cree formularios horizontales con la cuadrícula agregando la .row
clase para formar grupos y usando las .col-*-*
clases para especificar el ancho de sus etiquetas y controles. Asegúrese de agregar también .col-form-label
a sus <label>
correos electrónicos para que estén centrados verticalmente con sus controles de formulario asociados.
A veces, es posible que necesite utilizar utilidades de margen o relleno para crear la alineación perfecta que necesita. Por ejemplo, hemos eliminado la padding-top
etiqueta de nuestras entradas de radio apiladas para alinear mejor la línea de base del texto.
<form>
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3">
</div>
</div>
<div class="form-group row">
<label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3">
</div>
</div>
<fieldset class="form-group row">
<legend class="col-form-label col-sm-2 float-sm-left pt-0">Radios</legend>
<div class="col-sm-10">
<div class="form-check">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
<label class="form-check-label" for="gridRadios1">
First radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
<label class="form-check-label" for="gridRadios2">
Second radio
</label>
</div>
<div class="form-check disabled">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
<label class="form-check-label" for="gridRadios3">
Third disabled radio
</label>
</div>
</div>
</fieldset>
<div class="form-group row">
<div class="col-sm-10 offset-sm-2">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck1">
<label class="form-check-label" for="gridCheck1">
Example checkbox
</label>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-sm-10">
<button type="submit" class="btn btn-primary">Sign in</button>
</div>
</div>
</form>
Tamaño de etiqueta de forma horizontal
Asegúrese de usar .col-form-label-sm
o .col-form-label-lg
hasta su <label>
s o <legend>
s para seguir correctamente el tamaño de .form-control-lg
y .form-control-sm
.
<form>
<div class="form-group row">
<label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
</div>
</div>
<div class="form-group row">
<label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">
</div>
</div>
<div class="form-group row">
<label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg">
</div>
</div>
</form>
Tamaño de columna
Como se muestra en los ejemplos anteriores, nuestro sistema de cuadrícula le permite colocar cualquier número de .col
s dentro de a .row
o .form-row
. Dividirán el ancho disponible en partes iguales entre ellos. También puede elegir un subconjunto de sus columnas para que ocupe más o menos espacio, mientras que los restantes .col
dividen el resto por igual, con clases de columnas específicas como .col-7
.
<form>
<div class="form-row">
<div class="col-7">
<input type="text" class="form-control" placeholder="City">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="State">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Zip">
</div>
</div>
</form>
Tamaño automático
El siguiente ejemplo usa una utilidad flexbox para centrar verticalmente el contenido y los cambios .col
para .col-auto
que sus columnas solo ocupen tanto espacio como sea necesario. Dicho de otra manera, la columna se dimensiona a sí misma en función del contenido.
<form>
<div class="form-row align-items-center">
<div class="col-auto">
<label class="sr-only" for="inlineFormInput">Name</label>
<input type="text" class="form-control mb-2" id="inlineFormInput" placeholder="Jane Doe">
</div>
<div class="col-auto">
<label class="sr-only" for="inlineFormInputGroup">Username</label>
<div class="input-group mb-2">
<div class="input-group-prepend">
<div class="input-group-text">@</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username">
</div>
</div>
<div class="col-auto">
<div class="form-check mb-2">
<input class="form-check-input" type="checkbox" id="autoSizingCheck">
<label class="form-check-label" for="autoSizingCheck">
Remember me
</label>
</div>
</div>
<div class="col-auto">
<button type="submit" class="btn btn-primary mb-2">Submit</button>
</div>
</div>
</form>
Luego puede mezclar eso una vez más con clases de columna de tamaño específico.
<form>
<div class="form-row align-items-center">
<div class="col-sm-3 my-1">
<label class="sr-only" for="inlineFormInputName">Name</label>
<input type="text" class="form-control" id="inlineFormInputName" placeholder="Jane Doe">
</div>
<div class="col-sm-3 my-1">
<label class="sr-only" for="inlineFormInputGroupUsername">Username</label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">@</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
</div>
</div>
<div class="col-auto my-1">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="autoSizingCheck2">
<label class="form-check-label" for="autoSizingCheck2">
Remember me
</label>
</div>
</div>
<div class="col-auto my-1">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
Y, por supuesto , se admiten controles de formulario personalizados .
<form>
<div class="form-row align-items-center">
<div class="col-auto my-1">
<label class="mr-sm-2 sr-only" for="inlineFormCustomSelect">Preference</label>
<select class="custom-select mr-sm-2" id="inlineFormCustomSelect">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="col-auto my-1">
<div class="custom-control custom-checkbox mr-sm-2">
<input type="checkbox" class="custom-control-input" id="customControlAutosizing">
<label class="custom-control-label" for="customControlAutosizing">Remember my preference</label>
</div>
</div>
<div class="col-auto my-1">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
Formularios en línea
Use la .form-inline
clase para mostrar una serie de etiquetas, controles de formulario y botones en una sola fila horizontal. Los controles de formulario dentro de los formularios en línea varían ligeramente de sus estados predeterminados.
- Los controles son
display: flex
, colapsan cualquier espacio en blanco HTML y le permiten proporcionar control de alineación con utilidades de espaciado y flexbox . - Los controles y los grupos de entrada reciben
width: auto
para anular el valor predeterminado de Bootstrapwidth: 100%
. - Los controles solo aparecen en línea en las ventanas gráficas que tienen al menos 576 px de ancho para tener en cuenta las ventanas estrechas en los dispositivos móviles.
Es posible que deba abordar manualmente el ancho y la alineación de los controles de formulario individuales con utilidades de espaciado (como se muestra a continuación). Por último, asegúrese de incluir siempre un <label>
con cada control de formulario, incluso si necesita ocultarlo de los visitantes que no son lectores de pantalla con .sr-only
.
<form class="form-inline">
<label class="sr-only" for="inlineFormInputName2">Name</label>
<input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">
<label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text">@</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
</div>
<div class="form-check mb-2 mr-sm-2">
<input class="form-check-input" type="checkbox" id="inlineFormCheck">
<label class="form-check-label" for="inlineFormCheck">
Remember me
</label>
</div>
<button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>
También se admiten selecciones y controles de formulario personalizados.
<form class="form-inline">
<label class="my-1 mr-2" for="inlineFormCustomSelectPref">Preference</label>
<select class="custom-select my-1 mr-sm-2" id="inlineFormCustomSelectPref">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<div class="custom-control custom-checkbox my-1 mr-sm-2">
<input type="checkbox" class="custom-control-input" id="customControlInline">
<label class="custom-control-label" for="customControlInline">Remember my preference</label>
</div>
<button type="submit" class="btn btn-primary my-1">Submit</button>
</form>
Alternativas a las etiquetas ocultas
Las tecnologías de asistencia, como los lectores de pantalla, tendrán problemas con sus formularios si no incluye una etiqueta para cada entrada. Para estos formularios en línea, puede ocultar las etiquetas usando la .sr-only
clase. Existen otros métodos alternativos para proporcionar una etiqueta para las tecnologías de asistencia, como el aria-label
atributo o aria-labelledby
. title
Si ninguno de estos está presente, las tecnologías de asistencia pueden recurrir al uso del placeholder
atributo, si está presente, pero tenga en cuenta que placeholder
no se recomienda el uso de como reemplazo de otros métodos de etiquetado.
Texto de ayuda
El texto de ayuda a nivel de bloque en los formularios se puede crear usando .form-text
(anteriormente conocido como .help-block
en v3). El texto de ayuda en línea se puede implementar de manera flexible utilizando cualquier elemento HTML en línea y clases de utilidad como .text-muted
.
Asociación de texto de ayuda con controles de formulario
El texto de ayuda debe asociarse explícitamente con el control de formulario con el que se relaciona el uso del aria-describedby
atributo. Esto asegurará que las tecnologías de asistencia, como los lectores de pantalla, anuncien este texto de ayuda cuando el usuario enfoca o ingresa el control.
El texto de ayuda debajo de las entradas se puede diseñar con .form-text
. Esta clase incluye display: block
y agrega un margen superior para facilitar el espaciado de las entradas anteriores.
<label for="inputPassword5">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<small id="passwordHelpBlock" class="form-text text-muted">
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</small>
El texto en línea puede usar cualquier elemento HTML en línea típico (ya sea un <small>
, <span>
o cualquier otro) con nada más que una clase de utilidad.
<form class="form-inline">
<div class="form-group">
<label for="inputPassword6">Password</label>
<input type="password" id="inputPassword6" class="form-control mx-sm-3" aria-describedby="passwordHelpInline">
<small id="passwordHelpInline" class="text-muted">
Must be 8-20 characters long.
</small>
</div>
</form>
formularios deshabilitados
Agregue el disabled
atributo booleano en una entrada para evitar las interacciones del usuario y hacer que parezca más claro.
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
Agregue el disabled
atributo a <fieldset>
para deshabilitar todos los controles dentro.
<form>
<fieldset disabled>
<legend>Disabled fieldset example</legend>
<div class="form-group">
<label for="disabledTextInput">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<div class="form-group">
<label for="disabledSelect">Disabled select menu</label>
<select id="disabledSelect" class="form-control">
<option>Disabled select</option>
</select>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
<label class="form-check-label" for="disabledFieldsetCheck">
Can't check this
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</fieldset>
</form>
Advertencia con anclas
Los navegadores tratan todos los controles de formulario nativos ( <input>
, <select>
y <button>
elementos) dentro de un <fieldset disabled>
como deshabilitados, lo que evita las interacciones del teclado y el mouse en ellos.
Sin embargo, si su formulario también incluye elementos personalizados similares a botones como <a ... class="btn btn-*">
, estos solo tendrán un estilo de pointer-events: none
. Como se indicó en la sección sobre el estado deshabilitado de los botones (y específicamente en la subsección de elementos de anclaje), esta propiedad CSS aún no está estandarizada y no es completamente compatible con Internet Explorer 10. Los controles basados en anclajes también seguirán siendo enfocable y operable usando el teclado. Debe modificar manualmente estos controles agregándolos tabindex="-1"
para evitar que reciban atención y aria-disabled="disabled"
señalar su estado a las tecnologías de asistencia.
Compatibilidad entre navegadores
Si bien Bootstrap aplicará estos estilos en todos los navegadores, Internet Explorer 11 y versiones anteriores no admiten completamente el disabled
atributo en un archivo <fieldset>
. Use JavaScript personalizado para deshabilitar el conjunto de campos en estos navegadores.
Validación
Proporcione comentarios valiosos y procesables a sus usuarios con la validación de formularios HTML5, disponible en todos nuestros navegadores compatibles . Elija entre los comentarios de validación predeterminados del navegador o implemente mensajes personalizados con nuestras clases integradas y JavaScript de inicio.
Cómo funciona
Así es como funciona la validación de formularios con Bootstrap:
- La validación de formularios HTML se aplica a través de dos pseudoclases de CSS
:invalid
y:valid
. Se aplica a los elementos<input>
,<select>
y<textarea>
. - Bootstrap aplica el ámbito
:invalid
y los:valid
estilos a la.was-validated
clase principal, que generalmente se aplica a<form>
. De lo contrario, cualquier campo obligatorio sin valor aparecerá como no válido al cargar la página. De esta forma, puede elegir cuándo activarlos (por lo general, después de intentar enviar el formulario). - Para restablecer la apariencia del formulario (por ejemplo, en el caso de envíos de formularios dinámicos mediante AJAX), elimine la
.was-validated
clase de<form>
nuevo después del envío. - Como respaldo,
.is-invalid
se.is-valid
pueden usar clases en lugar de las pseudoclases para la validación del lado del servidor . No requieren una.was-validated
clase principal. - Debido a las limitaciones en el funcionamiento de CSS, no podemos (en la actualidad) aplicar estilos a un
<label>
control de formulario anterior al DOM sin la ayuda de JavaScript personalizado. - Todos los navegadores modernos admiten la API de validación de restricciones , una serie de métodos de JavaScript para validar controles de formulario.
- Los mensajes de comentarios pueden utilizar los valores predeterminados del navegador (diferentes para cada navegador y sin estilo a través de CSS) o nuestros estilos de comentarios personalizados con HTML y CSS adicionales.
- Puede proporcionar mensajes de validez personalizados
setCustomValidity
en JavaScript.
Con eso en mente, considere las siguientes demostraciones para nuestros estilos de validación de formularios personalizados, clases opcionales del lado del servidor y valores predeterminados del navegador.
Estilos personalizados
Para los mensajes de validación de formulario Bootstrap personalizados, deberá agregar el novalidate
atributo booleano a su archivo <form>
. Esto deshabilita la información sobre herramientas de comentarios predeterminada del navegador, pero aún proporciona acceso a las API de validación de formularios en JavaScript. Intente enviar el siguiente formulario; nuestro JavaScript interceptará el botón de enviar y le transmitirá sus comentarios. Cuando intente enviar, verá los estilos :invalid
y :valid
aplicados a los controles de su formulario.
Los estilos de comentarios personalizados aplican colores, bordes, estilos de enfoque e iconos de fondo personalizados para comunicar mejor los comentarios. Los íconos de fondo para <select>
s solo están disponibles con .custom-select
, y no .form-control
.
<form class="needs-validation" novalidate>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationCustom01">First name</label>
<input type="text" class="form-control" id="validationCustom01" value="Mark" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-6 mb-3">
<label for="validationCustom02">Last name</label>
<input type="text" class="form-control" id="validationCustom02" value="Otto" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationCustom03">City</label>
<input type="text" class="form-control" id="validationCustom03" required>
<div class="invalid-feedback">
Please provide a valid city.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationCustom04">State</label>
<select class="custom-select" id="validationCustom04" required>
<option selected disabled value="">Choose...</option>
<option>...</option>
</select>
<div class="invalid-feedback">
Please select a valid state.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationCustom05">Zip</label>
<input type="text" class="form-control" id="validationCustom05" required>
<div class="invalid-feedback">
Please provide a valid zip.
</div>
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
<label class="form-check-label" for="invalidCheck">
Agree to terms and conditions
</label>
<div class="invalid-feedback">
You must agree before submitting.
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
</script>
Valores predeterminados del navegador
¿No le interesan los mensajes de comentarios de validación personalizados o escribir JavaScript para cambiar los comportamientos de los formularios? Todo bien, puedes usar los valores predeterminados del navegador. Intente enviar el formulario a continuación. Dependiendo de su navegador y sistema operativo, verá un estilo de retroalimentación ligeramente diferente.
Si bien estos estilos de comentarios no se pueden diseñar con CSS, aún puede personalizar el texto de comentarios a través de JavaScript.
<form>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationDefault01">First name</label>
<input type="text" class="form-control" id="validationDefault01" value="Mark" required>
</div>
<div class="col-md-6 mb-3">
<label for="validationDefault02">Last name</label>
<input type="text" class="form-control" id="validationDefault02" value="Otto" required>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationDefault03">City</label>
<input type="text" class="form-control" id="validationDefault03" required>
</div>
<div class="col-md-3 mb-3">
<label for="validationDefault04">State</label>
<select class="custom-select" id="validationDefault04" required>
<option selected disabled value="">Choose...</option>
<option>...</option>
</select>
</div>
<div class="col-md-3 mb-3">
<label for="validationDefault05">Zip</label>
<input type="text" class="form-control" id="validationDefault05" required>
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
<label class="form-check-label" for="invalidCheck2">
Agree to terms and conditions
</label>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
Lado del servidor
Recomendamos utilizar la validación del lado del cliente, pero en caso de que requiera la validación del lado del servidor, puede indicar campos de formulario válidos y no válidos con .is-invalid
y .is-valid
. Tenga en cuenta que .invalid-feedback
también es compatible con estas clases.
Para los campos no válidos, asegúrese de que el mensaje de error/retroalimentación no válido esté asociado con el campo de formulario relevante usando aria-describedby
. Este atributo permite id
hacer referencia a más de uno, en caso de que el campo ya apunte a texto de formulario adicional.
<form>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationServer01">First name</label>
<input type="text" class="form-control is-valid" id="validationServer01" value="Mark" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-6 mb-3">
<label for="validationServer02">Last name</label>
<input type="text" class="form-control is-valid" id="validationServer02" value="Otto" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationServer03">City</label>
<input type="text" class="form-control is-invalid" id="validationServer03" aria-describedby="validationServer03Feedback" required>
<div id="validationServer03Feedback" class="invalid-feedback">
Please provide a valid city.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationServer04">State</label>
<select class="custom-select is-invalid" id="validationServer04" aria-describedby="validationServer04Feedback" required>
<option selected disabled value="">Choose...</option>
<option>...</option>
</select>
<div id="validationServer04Feedback" class="invalid-feedback">
Please select a valid state.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationServer05">Zip</label>
<input type="text" class="form-control is-invalid" id="validationServer05" aria-describedby="validationServer05Feedback" required>
<div id="validationServer05Feedback" class="invalid-feedback">
Please provide a valid zip.
</div>
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" aria-describedby="invalidCheck3Feedback" required>
<label class="form-check-label" for="invalidCheck3">
Agree to terms and conditions
</label>
<div id="invalidCheck3Feedback" class="invalid-feedback">
You must agree before submitting.
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
Elementos compatibles
Los estilos de validación están disponibles para los siguientes controles y componentes de formulario:
<input>
s y<textarea>
s con.form-control
<select>
es con.form-control
o.custom-select
.form-check
s.custom-checkbox
s y.custom-radio
s.custom-file
<form class="was-validated">
<div class="mb-3">
<label for="validationTextarea">Textarea</label>
<textarea class="form-control is-invalid" id="validationTextarea" placeholder="Required example textarea" required></textarea>
<div class="invalid-feedback">
Please enter a message in the textarea.
</div>
</div>
<div class="custom-control custom-checkbox mb-3">
<input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
<label class="custom-control-label" for="customControlValidation1">Check this custom checkbox</label>
<div class="invalid-feedback">Example invalid feedback text</div>
</div>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="customControlValidation2" name="radio-stacked" required>
<label class="custom-control-label" for="customControlValidation2">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio mb-3">
<input type="radio" class="custom-control-input" id="customControlValidation3" name="radio-stacked" required>
<label class="custom-control-label" for="customControlValidation3">Or toggle this other custom radio</label>
<div class="invalid-feedback">More example invalid feedback text</div>
</div>
<div class="mb-3">
<select class="custom-select" required>
<option value="">Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<div class="invalid-feedback">Example invalid custom select feedback</div>
</div>
<div class="custom-file mb-3">
<input type="file" class="custom-file-input" id="validatedCustomFile" required>
<label class="custom-file-label" for="validatedCustomFile">Choose file...</label>
<div class="invalid-feedback">Example invalid custom file feedback</div>
</div>
<div class="mb-3">
<div class="input-group is-invalid">
<div class="input-group-prepend">
<span class="input-group-text" id="validatedInputGroupPrepend">@</span>
</div>
<input type="text" class="form-control is-invalid" aria-describedby="validatedInputGroupPrepend" required>
</div>
<div class="invalid-feedback">
Example invalid input group feedback
</div>
</div>
<div class="mb-3">
<div class="input-group is-invalid">
<div class="input-group-prepend">
<label class="input-group-text" for="validatedInputGroupSelect">Options</label>
</div>
<select class="custom-select" id="validatedInputGroupSelect" required>
<option value="">Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="invalid-feedback">
Example invalid input group feedback
</div>
</div>
<div class="input-group is-invalid">
<div class="custom-file">
<input type="file" class="custom-file-input" id="validatedInputGroupCustomFile" required>
<label class="custom-file-label" for="validatedInputGroupCustomFile">Choose file...</label>
</div>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
</div>
<div class="invalid-feedback">
Example invalid input group feedback
</div>
</form>
Información sobre herramientas
Si el diseño de su formulario lo permite, puede cambiar las .{valid|invalid}-feedback
clases por .{valid|invalid}-tooltip
clases para mostrar comentarios de validación en una información sobre herramientas con estilo. Asegúrese de tener un padre con position: relative
él para el posicionamiento de la información sobre herramientas. En el siguiente ejemplo, nuestras clases de columnas ya tienen esto, pero su proyecto puede requerir una configuración alternativa.
<form class="needs-validation" novalidate>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationTooltip01">First name</label>
<input type="text" class="form-control" id="validationTooltip01" value="Mark" required>
<div class="valid-tooltip">
Looks good!
</div>
</div>
<div class="col-md-6 mb-3">
<label for="validationTooltip02">Last name</label>
<input type="text" class="form-control" id="validationTooltip02" value="Otto" required>
<div class="valid-tooltip">
Looks good!
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationTooltip03">City</label>
<input type="text" class="form-control" id="validationTooltip03" required>
<div class="invalid-tooltip">
Please provide a valid city.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationTooltip04">State</label>
<select class="custom-select" id="validationTooltip04" required>
<option selected disabled value="">Choose...</option>
<option>...</option>
</select>
<div class="invalid-tooltip">
Please select a valid state.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationTooltip05">Zip</label>
<input type="text" class="form-control" id="validationTooltip05" required>
<div class="invalid-tooltip">
Please provide a valid zip.
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
personalización
Los estados de validación se pueden personalizar a través de Sass con el $form-validation-states
mapa. Ubicado en nuestro _variables.scss
archivo, este mapa de Sass se repite para generar los estados predeterminados valid
/ de invalid
validación. Se incluye un mapa anidado para personalizar el color y el icono de cada estado. Si bien los navegadores no admiten otros estados, aquellos que usan estilos personalizados pueden agregar fácilmente comentarios de formularios más complejos.
Tenga en cuenta que no recomendamos personalizar estos valores sin modificar también el form-validation-state
mixin.
// Sass map from `_variables.scss`
// Override this and recompile your Sass to generate different states
$form-validation-states: map-merge(
(
"valid": (
"color": $form-feedback-valid-color,
"icon": $form-feedback-icon-valid
),
"invalid": (
"color": $form-feedback-invalid-color,
"icon": $form-feedback-icon-invalid
)
),
$form-validation-states
);
// Loop from `_forms.scss`
// Any modifications to the above Sass map will be reflected in your compiled
// CSS via this loop.
@each $state, $data in $form-validation-states {
@include form-validation-state($state, map-get($data, color), map-get($data, icon));
}
Validación del grupo de entrada
Para detectar qué elementos necesitan esquinas redondeadas dentro de un grupo de entrada con validación, un grupo de entrada requiere una .has-validation
clase adicional.
<div class="input-group has-validation">
<div class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="text" class="form-control" required>
<div class="invalid-feedback">
Please choose a username.
</div>
</div>
Formularios personalizados
Para una mayor personalización y coherencia entre navegadores, utilice nuestros elementos de formulario completamente personalizados para reemplazar los valores predeterminados del navegador. Están construidos sobre el marcado semántico y accesible, por lo que son reemplazos sólidos para cualquier control de formulario predeterminado.
Casillas de verificación y radios
Cada casilla de verificación y radio <input>
y <label>
emparejamiento está envuelto en un <div>
para crear nuestro control personalizado. Estructuralmente, este es el mismo enfoque que nuestro predeterminado .form-check
.
Usamos el selector de hermanos ( ~
) para todos nuestros <input>
estados, como, :checked
para diseñar correctamente nuestro indicador de formulario personalizado. Cuando se combina con la .custom-control-label
clase, también podemos diseñar el texto de cada elemento en función del <input>
estado de .
Ocultamos el valor predeterminado <input>
con opacity
y usamos .custom-control-label
para crear un nuevo indicador de formulario personalizado en su lugar con ::before
y ::after
. Desafortunadamente, no podemos crear uno personalizado solo <input>
porque el CSS content
no funciona en ese elemento.
En los estados marcados, usamos iconos SVG incrustados base64 de Open Iconic . Esto nos brinda el mejor control para diseñar y posicionar en todos los navegadores y dispositivos.
Casillas de verificación
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>
Las casillas de verificación personalizadas también pueden utilizar la :indeterminate
pseudoclase cuando se configuran manualmente a través de JavaScript (no hay un atributo HTML disponible para especificarlo).
Si está utilizando jQuery, algo como esto debería ser suficiente:
$('.your-checkbox').prop('indeterminate', true)
Radios
<div class="custom-control custom-radio">
<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
</div>
En línea
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="customRadioInline1" name="customRadioInline" class="custom-control-input">
<label class="custom-control-label" for="customRadioInline1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="customRadioInline2" name="customRadioInline" class="custom-control-input">
<label class="custom-control-label" for="customRadioInline2">Or toggle this other custom radio</label>
</div>
Desactivado
Las casillas de verificación y las radios personalizadas también se pueden desactivar. Agregue el disabled
atributo booleano a <input>
y el indicador personalizado y la descripción de la etiqueta se diseñarán automáticamente.
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheckDisabled1" disabled>
<label class="custom-control-label" for="customCheckDisabled1">Check this custom checkbox</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" name="radioDisabled" id="customRadioDisabled2" class="custom-control-input" disabled>
<label class="custom-control-label" for="customRadioDisabled2">Toggle this custom radio</label>
</div>
Interruptores
Un interruptor tiene el marcado de una casilla de verificación personalizada, pero usa la .custom-switch
clase para representar un interruptor de palanca. Los conmutadores también admiten el disabled
atributo.
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="customSwitch1">
<label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
</div>
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" disabled id="customSwitch2">
<label class="custom-control-label" for="customSwitch2">Disabled switch element</label>
</div>
Seleccione el menú
Los menús personalizados <select>
solo necesitan una clase personalizada .custom-select
para activar los estilos personalizados. Los estilos personalizados se limitan a la <select>
apariencia inicial del correo electrónico y no pueden modificar el correo <option>
electrónico debido a las limitaciones del navegador.
<select class="custom-select">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
También puede elegir entre selecciones personalizadas pequeñas y grandes para que coincidan con nuestras entradas de texto de tamaño similar.
<select class="custom-select custom-select-lg mb-3">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select class="custom-select custom-select-sm">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
El multiple
atributo también es compatible:
<select class="custom-select" multiple>
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
Como es el size
atributo:
<select class="custom-select" size="3">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
Rango
Cree <input type="range">
controles personalizados con .custom-range
. La pista (el fondo) y el pulgar (el valor) están diseñados para que aparezcan iguales en todos los navegadores. Como solo IE y Firefox admiten "llenar" su pista desde la izquierda o la derecha del pulgar como un medio para indicar visualmente el progreso, actualmente no lo admitimos.
<label for="customRange1">Example range</label>
<input type="range" class="custom-range" id="customRange1">
Las entradas de rango tienen valores implícitos para min
y max
— 0
y 100
, respectivamente. Puede especificar nuevos valores para aquellos que usan los atributos min
y .max
<label for="customRange2">Example range</label>
<input type="range" class="custom-range" min="0" max="5" id="customRange2">
De forma predeterminada, las entradas de rango se ajustan a valores enteros. Para cambiar esto, puede especificar un step
valor. En el siguiente ejemplo, duplicamos el número de pasos usando step="0.5"
.
<label for="customRange3">Example range</label>
<input type="range" class="custom-range" min="0" max="5" step="0.5" id="customRange3">
Explorador de archivos
La entrada de archivo es la más retorcida del grupo y requiere JavaScript adicional si desea conectarlos con Elegir archivo funcional... y texto de nombre de archivo seleccionado.
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFile">
<label class="custom-file-label" for="customFile">Choose file</label>
</div>
Ocultamos el archivo predeterminado <input>
a través de opacity
y, en su lugar, diseñamos el archivo <label>
. El botón se genera y posiciona con ::after
. Por último, declaramos a width
y height
en el <input>
espacio adecuado para el contenido circundante.
Traducir o personalizar las cadenas con SCSS
La :lang()
pseudoclase se utiliza para permitir la traducción del texto "Examinar" a otros idiomas. Anule o agregue entradas a la $custom-file-text
variable Sass con la etiqueta de idioma relevante y las cadenas localizadas. Las cadenas en inglés se pueden personalizar de la misma manera. Por ejemplo, así es como se podría agregar una traducción al español (el código de idioma del español es es
):
$custom-file-text: (
en: "Browse",
es: "Elegir"
);
Aquí está lang(es)
en acción la entrada del archivo personalizado para una traducción al español:
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFileLang" lang="es">
<label class="custom-file-label" for="customFileLang">Seleccionar Archivo</label>
</div>
Deberá configurar correctamente el idioma de su documento (o subárbol del mismo) para que se muestre el texto correcto. Esto se puede hacer usando el lang
atributo en el <html>
elemento o el Content-Language
encabezado HTTP , entre otros métodos.
Traducir o personalizar las cadenas con HTML
Bootstrap también proporciona una forma de traducir el texto "Examinar" en HTML con el data-browse
atributo que se puede agregar a la etiqueta de entrada personalizada (ejemplo en holandés):
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFileLangHTML">
<label class="custom-file-label" for="customFileLangHTML" data-browse="Bestand kiezen">Voeg je document toe</label>
</div>