Formularios
Exemplos e pautas de uso para estilos de control de formularios, opcións de deseño e compoñentes personalizados para crear unha gran variedade de formularios.
Visión xeral
Os controis de formulario de Bootstrap amplíanse nos nosos estilos de formulario reiniciados con clases. Use estas clases para optar polas súas pantallas personalizadas para obter unha representación máis consistente en navegadores e dispositivos.
Asegúrate de usar un type
atributo apropiado en todas as entradas (por exemplo, email
para o enderezo de correo electrónico ou number
para a información numérica) para aproveitar os controis de entrada máis novos como a verificación de correo electrónico, a selección de números e moito máis.
Aquí tes un exemplo rápido para demostrar os estilos de formulario de Bootstrap. Continúa lendo para obter documentación sobre as clases requiridas, o deseño do formulario e moito máis.
<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>
Controis de formularios
Os controis de formularios textuales, como <input>
s, <select>
s e <textarea>
s, están estilos coa .form-control
clase. Inclúense estilos para o aspecto xeral, o estado do foco, o tamaño e moito máis.
Asegúrate de explorar os nosos formularios personalizados para seguir 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 ficheiros, troca .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>
Talla
Establece alturas usando clases como .form-control-lg
e .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>
Só lectura
Engade o readonly
atributo booleano nunha entrada para evitar a modificación do valor da entrada. As entradas de só lectura parecen máis claras (igual que as entradas desactivadas), pero conservan o cursor estándar.
<input class="form-control" type="text" placeholder="Readonly input here..." readonly>
Texto simple só de lectura
Se queres que os <input readonly>
elementos do teu formulario teñan un estilo de texto simple, utiliza a .form-control-plaintext
clase para eliminar o estilo predeterminado do campo do formulario e conserva a marxe e o recheo 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
Establece entradas de intervalo de desprazamento horizontal 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>
Caixas de verificación e radios
As caixas de verificación e radios predeterminadas mellóranse coa axuda de .form-check
, unha única clase para ambos os tipos de entrada que mellora o deseño e o comportamento dos seus elementos HTML . As caixas de verificación son para seleccionar unha ou varias opcións nunha lista, mentres que as radios son para seleccionar unha opción de entre moitas.
Admítense as caixas de verificación e as radios desactivadas. O disabled
atributo aplicará unha cor máis clara para axudar a indicar o estado da entrada.
As caixas de verificación e os botóns de opción admiten a validación de formularios baseadas en HTML e proporcionan etiquetas concisas e accesibles. Polo tanto, os nosos <input>
s e <label>
s son elementos irmáns en oposición a un <input>
dentro dun <label>
. Isto é un pouco máis detallado xa que debes especificar id
e for
atributos para relacionar os <input>
e <label>
.
Predeterminado (apilado)
De forma predeterminada, calquera número de caixas de verificación e radios que sexan irmáns inmediatos apilaranse verticalmente e espaciaranse 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 liña
Agrupe caixas de verificación ou radios na mesma fila horizontal engadindo .form-check-inline
a calquera .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>
Sen etiquetas
Engadir .position-static
ás entradas .form-check
que non teñan ningún texto de etiqueta. Lembra aínda fornecer algún tipo de nome accesible para tecnoloxías de asistencia (por exemplo, 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>
Maquetación
Dado que se aplica Bootstrap display: block
e width: 100%
a case todos os nosos controis de formularios, os formularios apilaranse verticalmente por defecto. Pódense usar clases adicionais para variar este deseño por cada formulario.
Formar grupos
A .form-group
clase é a forma máis sinxela de engadir algunha estrutura aos formularios. Ofrece unha clase flexible que fomenta a agrupación adecuada de etiquetas, controis, texto de axuda opcional e mensaxes de validación de formularios. Por defecto só se aplica margin-bottom
, pero recolle estilos adicionais .form-inline
segundo sexa necesario. Utilízao con <fieldset>
s, <div>
s ou case calquera outro 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>
Forma cuadrícula
Pódense construír formularios máis complexos usando as nosas clases de cuadrícula. Utilízaos para deseños de formularios que requiren varias columnas, anchos variados e opcións de aliñamento adicionais.
<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>
Forma fila
Tamén podes trocar .row
por .form-row
, unha variación da nosa fila de grade estándar que anula os canales de columna predeterminados para deseños máis axustados e 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>
Tamén se poden crear esquemas máis complexos co 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
Crea formularios horizontais coa grella engadindo a .row
clase para formar grupos e usando as .col-*-*
clases para especificar o ancho das túas etiquetas e controis. Asegúrate de engadir tamén .col-form-label
ás túas <label>
s para que estean centradas verticalmente cos seus controis de formulario asociados.
Ás veces, quizais necesites usar utilidades de marxe ou recheo para crear o aliñamento perfecto que necesitas. Por exemplo, eliminamos a padding-top
etiqueta das nosas entradas de radio apiladas para aliñar mellor a liña de base do 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 da etiqueta de formulario horizontal
Asegúrate de usar .col-form-label-sm
ou .col-form-label-lg
a túa <label>
s ou <legend>
s para seguir correctamente o tamaño de .form-control-lg
e .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 da columna
Como se mostra nos exemplos anteriores, o noso sistema de cuadrícula permítelle colocar calquera número de .col
s dentro dun .row
ou .form-row
. Dividirán o ancho dispoñible equitativamente entre eles. Tamén podes escoller un subconxunto das túas columnas para que ocupe máis ou menos espazo, mentres que os .col
s restantes dividen por igual o resto, 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>
Auto-dimensionado
O seguinte exemplo usa unha utilidade flexbox para centrar verticalmente o contido e os cambios .col
para .col-auto
que as súas columnas só ocupen o espazo necesario. Dito doutro xeito, o tamaño da columna depende dos contidos.
<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>
Despois podes remesturar isto unha vez máis con clases de columnas específicas de tamaño.
<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>
E, por suposto , os controis de formulario personalizados son compatibles.
<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 liña
Use a .form-inline
clase para mostrar unha serie de etiquetas, controis de formulario e botóns nunha única fila horizontal. Os controis de formularios dentro dos formularios en liña varían lixeiramente dos seus estados predeterminados.
- Os controis son
display: flex
, que contraen calquera espazo en branco HTML e permítenche proporcionar control de aliñamento con utilidades de espazamento e caixa flexible . - Os controis e os grupos de entrada reciben
width: auto
para anular o valor predeterminado de Bootstrapwidth: 100%
. - Os controis só aparecen en liña nas vistas de polo menos 576 píxeles de ancho para ter en conta as ventás estreitas dos dispositivos móbiles.
Quizais necesites abordar manualmente o ancho e o aliñamento dos controis de formulario individuais con utilidades de espazamento (como se mostra a continuación). Por último, asegúrese de incluír sempre un <label>
con cada control de formulario, aínda que necesite ocultalo aos visitantes que non 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>
Tamén se admiten controis e seleccións de formularios 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 ás etiquetas ocultas
As tecnoloxías de apoio, como os lectores de pantalla, terán problemas cos teus formularios se non inclúes unha etiqueta para cada entrada. Para estes formularios en liña, pode ocultar as etiquetas usando a .sr-only
clase. Existen outros métodos alternativos para proporcionar unha etiqueta para tecnoloxías de asistencia, como o atributo aria-label
, aria-labelledby
ou . title
Se ningunha destas está presente, as tecnoloxías de asistencia poden recorrer ao uso do placeholder
atributo, se está presente, pero teña en conta que placeholder
non se recomenda o uso de como substituto doutros métodos de etiquetaxe.
Texto de axuda
Pódese crear texto de axuda a nivel de bloque en formularios usando .form-text
(anteriormente coñecido como .help-block
en v3). O texto de axuda en liña pódese implementar de forma flexible usando calquera elemento HTML en liña e clases de utilidade como .text-muted
.
Asociar texto de axuda con controis de formulario
O texto de axuda debe estar asociado explícitamente co control de formulario co que se relaciona usando o aria-describedby
atributo. Isto garantirá que as tecnoloxías de asistencia, como os lectores de pantalla, anunciarán este texto de axuda cando o usuario se concentre ou entre no control.
O texto de axuda debaixo das entradas pode ser estilo con .form-text
. Esta clase inclúe display: block
e engade algunha marxe superior para facilitar o espazo das 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>
O texto en liña pode usar calquera elemento HTML en liña típico (xa sexa un <small>
, <span>
ou outra cousa) sen máis que unha clase de utilidade.
<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 desactivados
Engade o disabled
atributo booleano nunha entrada para evitar as interaccións do usuario e facelo parecer máis claro.
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
Engade o disabled
atributo a <fieldset>
para desactivar todos os controis 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 áncoras
Os navegadores tratan todos os controis de formularios nativos ( <input>
, <select>
, e <button>
elementos) dentro dunha <fieldset disabled>
como desactivados, evitando interaccións tanto do teclado como do rato neles.
Non obstante, se o teu formulario tamén inclúe elementos personalizados parecidos a botóns como <a ... class="btn btn-*">
, só se lles dará un estilo de pointer-events: none
. Como se indicou na sección sobre o estado desactivado dos botóns (e concretamente na subsección dos elementos de áncora), esta propiedade CSS aínda non está estandarizada e non se admite totalmente en Internet Explorer 10. Os controis baseados en áncoras tamén seguirán estando enfocable e operable mediante o teclado. Debes modificar manualmente estes controis engadindo tabindex="-1"
para evitar que reciban o foco e aria-disabled="disabled"
para sinalar o seu estado ás tecnoloxías de asistencia.
Compatibilidade entre navegadores
Aínda que Bootstrap aplicará estes estilos en todos os navegadores, Internet Explorer 11 e anteriores non admiten totalmente o disabled
atributo nun ficheiro <fieldset>
. Use JavaScript personalizado para desactivar o conxunto de campos nestes navegadores.
Validación
Proporciona comentarios valiosos e prácticos aos teus usuarios coa validación de formularios HTML5, dispoñible en todos os nosos navegadores compatibles . Escolla entre os comentarios de validación predeterminados do navegador ou implemente mensaxes personalizadas coas nosas clases integradas e JavaScript inicial.
Cómo funciona
Así é como funciona a validación de formularios con Bootstrap:
- A validación do formulario HTML aplícase a través das dúas pseudoclases de CSS
:invalid
e:valid
. Aplícase a<input>
,<select>
, e<textarea>
elementos. - Bootstrap abarca os estilos
:invalid
e:valid
á clase pai.was-validated
, normalmente aplicada ao<form>
. En caso contrario, calquera campo obrigatorio sen valor aparece como non válido na carga da páxina. Deste xeito, pode escoller cando activalos (normalmente despois de tentar enviar o formulario). - Para restablecer a aparencia do formulario (por exemplo, no caso de envíos de formularios dinámicos mediante AJAX), elimine a
.was-validated
clase de<form>
novo despois do envío. - Como alternativa, pódense usar clases
.is-invalid
e en lugar das pseudoclases para a validación do lado do servidor . Non requiren unha clase de pais..is-valid
.was-validated
- Debido ás limitacións no funcionamento do CSS, non podemos (actualmente) aplicar estilos a un
<label>
control de formulario que está antes do DOM sen a axuda de JavaScript personalizado. - Todos os navegadores modernos admiten a API de validación de restricións , unha serie de métodos JavaScript para validar os controis de formularios.
- As mensaxes de comentarios poden utilizar os valores predeterminados do navegador (diferentes para cada navegador e sen estilo mediante CSS) ou os nosos estilos de comentarios personalizados con HTML e CSS adicionais.
- Podes proporcionar mensaxes de validez personalizadas
setCustomValidity
en JavaScript.
Tendo isto en conta, considere as seguintes demostracións para os nosos estilos de validación de formularios personalizados, as clases opcionais do lado do servidor e os valores predeterminados do navegador.
Estilos personalizados
Para as mensaxes de validación de formularios Bootstrap personalizadas, terás que engadir o novalidate
atributo booleano ao teu <form>
. Isto desactiva as ferramentas de comentarios predeterminadas do navegador, pero aínda así proporciona acceso ás API de validación de formularios en JavaScript. Tenta enviar o formulario a continuación; o noso JavaScript interceptará o botón de enviar e transmitiráche comentarios. Cando intentes enviar, verás os estilos :invalid
e :valid
aplicados aos teus controis de formulario.
Os estilos de comentarios personalizados aplican cores, bordos, estilos de enfoque e iconas de fondo personalizados para comunicar mellor os comentarios. As iconas de fondo para <select>
s só están dispoñibles con .custom-select
, e non .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 do navegador
Non che interesan mensaxes de comentarios de validación personalizadas ou escribir JavaScript para cambiar os comportamentos dos formularios? Todo ben, podes usar os valores predeterminados do navegador. Proba a enviar o seguinte formulario. Dependendo do teu navegador e do teu sistema operativo, verás un estilo de comentarios lixeiramente diferente.
Aínda que estes estilos de comentarios non se poden crear con CSS, aínda podes personalizar o 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 do servidor
Recomendamos utilizar a validación do lado do cliente, pero no caso de que necesite unha validación do servidor, pode indicar os campos de formulario non válidos e válidos con .is-invalid
e .is-valid
. Teña en conta que .invalid-feedback
tamén é compatible con estas clases.
Para campos non válidos, asegúrate de que a mensaxe de erro/retroalimentación non válida estea asociada co campo de formulario relevante mediante aria-describedby
. id
Este atributo permite facer referencia a máis dun , no caso de que o campo xa apunta a texto adicional do formulario.
<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 soportados
Os estilos de validación están dispoñibles para os seguintes controis e compoñentes de formulario:
<input>
s e<textarea>
s con.form-control
<select>
s con.form-control
ou.custom-select
.form-check
s.custom-checkbox
s e.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>
Suxestións sobre ferramentas
Se o deseño do teu formulario o permite, podes intercambiar as .{valid|invalid}-feedback
clases por .{valid|invalid}-tooltip
clases para mostrar comentarios de validación nunha información con estilo. Asegúrate de ter un pai con position: relative
el para colocar a información sobre ferramentas. No seguinte exemplo, as nosas clases de columnas xa teñen isto, pero o teu proxecto pode requirir unha 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
Os estados de validación pódense personalizar a través de Sass co $form-validation-states
mapa. Situado no noso _variables.scss
ficheiro, este mapa de Sass está en bucle para xerar os estados predeterminados valid
/ invalid
validación. Inclúese un mapa aniñado para personalizar a cor e a icona de cada estado. Aínda que os navegadores non admiten outros estados, aqueles que usan estilos personalizados poden engadir facilmente comentarios de formularios máis complexos.
Teña en conta que non recomendamos personalizar estes valores sen modificar tamén o 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 do grupo de entrada
Para detectar que elementos necesitan esquinas redondeadas dentro dun grupo de entrada con validación, un grupo de entrada require unha .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 obter aínda máis personalización e coherencia entre o navegador, utiliza os nosos elementos de formulario completamente personalizados para substituír os valores predeterminados do navegador. Están construídos sobre o marcado semántico e accesible, polo que son substitutos sólidos para calquera control de formulario predeterminado.
Caixas de verificación e radios
Cada caixa de verificación e radio <input>
e <label>
emparejamento envólvese nun <div>
para crear o noso control personalizado. Estruturalmente, este é o mesmo enfoque que o noso predeterminado .form-check
.
Usamos o selector de irmáns ( ~
) para todos os nosos <input>
estados, por exemplo, :checked
para diseñar correctamente o noso indicador de formulario personalizado. Cando se combina coa .custom-control-label
clase, tamén podemos estilizar o texto de cada elemento en función do <input>
estado de '.
Ocultamos o valor predeterminado <input>
con opacity
e usamos .custom-control-label
para crear un novo indicador de formulario personalizado no seu lugar con ::before
e ::after
. Desafortunadamente, non podemos crear un personalizado só <input>
porque os CSS content
non funcionan nese elemento.
Nos estados marcados, usamos iconas SVG incrustadas base64 de Open Iconic . Isto ofrécenos o mellor control para o estilo e o posicionamento en navegadores e 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>
As caixas de verificación personalizadas tamén poden utilizar a :indeterminate
pseudo-clase cando se definen manualmente mediante JavaScript (non hai ningún atributo HTML dispoñible para especificalo).
Se estás usando jQuery, algo como isto 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 liña
<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
Tamén se poden desactivar as caixas de verificación e as radios personalizadas. Engade o disabled
atributo booleano ao <input>
e o indicador personalizado e a descrición da etiqueta terán un estilo automaticamente.
<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 ten o marcado dunha caixa de verificación personalizada pero usa a .custom-switch
clase para renderizar un interruptor de alternancia. Os interruptores tamén admiten o 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 menú
Os menús personalizados <select>
só necesitan unha clase personalizada .custom-select
para activar os estilos personalizados. Os estilos personalizados limítanse á <select>
aparencia inicial do 's' e non se poden modificar <option>
debido ás limitacións do 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>
Tamén podes escoller entre pequenas e grandes seleccións personalizadas para que coincidan coas nosas 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>
multiple
Tamén se admite o atributo:
<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 é o 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
Crea <input type="range">
controis personalizados con .custom-range
. A pista (o fondo) e o polgar (o valor) teñen o mesmo estilo en todos os navegadores. Como só IE e Firefox admiten "encher" a súa pista dende a esquerda ou a dereita do polgar como un medio para indicar visualmente o progreso, actualmente non o admitimos.
<label for="customRange1">Example range</label>
<input type="range" class="custom-range" id="customRange1">
As entradas do intervalo teñen valores implícitos para min
e max
— 0
e 100
, respectivamente. Podes especificar novos valores para aqueles que utilicen os atributos min
e .max
<label for="customRange2">Example range</label>
<input type="range" class="custom-range" min="0" max="5" id="customRange2">
De xeito predeterminado, as entradas de intervalo "axustan" a valores enteiros. Para cambialo, pode especificar un step
valor. No seguinte exemplo, duplicamos o 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 ficheiros
A entrada de ficheiros é a máis retorcida do grupo e require JavaScript adicional se queres conectalos coa función Escolla ficheiro... e o texto do nome do ficheiro 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 o ficheiro predeterminado <input>
mediante opacity
e no seu lugar estilizamos o <label>
. O botón xérase e colócase con ::after
. Por último, declaramos a width
e height
sobre o <input>
para o espazo adecuado para o contido circundante.
Traducir ou personalizar as cadeas con SCSS
A :lang()
pseudo-clase úsase para permitir a tradución do texto "Examinar" a outros idiomas. Anular ou engadir entradas á $custom-file-text
variable Sass coa etiqueta de idioma relevante e cadeas localizadas. As cadeas inglesas pódense personalizar do mesmo xeito. Por exemplo, é como se pode engadir unha tradución ao español (o código do español é es
):
$custom-file-text: (
en: "Browse",
es: "Elegir"
);
Aquí está lang(es)
en acción sobre a entrada de ficheiro personalizado para unha tradución ao 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>
Necesitarás establecer o idioma do teu documento (ou a súa subárbore) correctamente para que se mostre o texto correcto. Isto pódese facer usando o lang
atributo do <html>
elemento ou a Content-Language
cabeceira HTTP , entre outros métodos.
Traducir ou personalizar as cadeas con HTML
Bootstrap tamén ofrece unha forma de traducir o texto "Examinar" en HTML co data-browse
atributo que se pode engadir á etiqueta de entrada personalizada (exemplo 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>