Bootstrap - Formulários
Neste capítulo, estudaremos como criar formulários com facilidade usando o Bootstrap. O bootstrap torna isso fácil com a marcação HTML simples e classes estendidas para diferentes estilos de formulários. Neste capítulo, estudaremos como criar formulários com facilidade usando o Bootstrap.
Layout de formulário
O Bootstrap fornece os seguintes tipos de layouts de formulário -
- Forma vertical (padrão)
- Formulário em linha
- Forma horizontal
Forma vertical ou básica
A estrutura básica do formulário vem com o Bootstrap; controles de formulário individuais recebem automaticamente algum estilo global. Para criar um formulário básico, faça o seguinte -
Adicione um formulário de função ao elemento pai <form>.
Envolva rótulos e controles em um <div> com class .form-group . Isso é necessário para um espaçamento ideal.
Adicione uma classe de .form-control a todos os elementos textuais <input>, <textarea> e <select>.
<form role = "form">
<div class = "form-group">
<label for = "name">Name</label>
<input type = "text" class = "form-control" id = "name" placeholder = "Enter Name">
</div>
<div class = "form-group">
<label for = "inputfile">File input</label>
<input type = "file" id = "inputfile">
<p class = "help-block">Example block-level help text here.</p>
</div>
<div class = "checkbox">
<label><input type = "checkbox"> Check me out</label>
</div>
<button type = "submit" class = "btn btn-default">Submit</button>
</form>Formulário Inline
Para criar um formulário no qual todos os elementos estão embutidos, alinhados à esquerda e os rótulos ao lado, adicione a classe .form-embutido à tag <form>.
<form class = "form-inline" role = "form">
<div class = "form-group">
<label class = "sr-only" for = "name">Name</label>
<input type = "text" class = "form-control" id = "name" placeholder = "Enter Name">
</div>
<div class = "form-group">
<label class = "sr-only" for = "inputfile">File input</label>
<input type = "file" id = "inputfile">
</div>
<div class = "checkbox">
<label><input type = "checkbox"> Check me out</label>
</div>
<button type = "submit" class = "btn btn-default">Submit</button>
</form>Por padrão, as entradas, seleções e áreas de texto têm 100% de largura no Bootstrap. Você precisa definir uma largura nos controles do formulário ao usar o formulário embutido.
Usando a classe .sr-only, você pode ocultar os rótulos dos formulários embutidos.
Forma Horizontal
Os formulários horizontais se diferenciam dos outros não apenas na quantidade de marcação, mas também na apresentação do formulário. Para criar um formulário que usa o layout horizontal, faça o seguinte -
Adicione uma classe de .form-horizontal ao elemento pai <form>.
Envolva rótulos e controles em um <div> com class .form-group .
Adicione uma classe de .control-label aos rótulos.
<form class = "form-horizontal" role = "form">
<div class = "form-group">
<label for = "firstname" class = "col-sm-2 control-label">First Name</label>
<div class = "col-sm-10">
<input type = "text" class = "form-control" id = "firstname" placeholder = "Enter First Name">
</div>
</div>
<div class = "form-group">
<label for = "lastname" class = "col-sm-2 control-label">Last Name</label>
<div class = "col-sm-10">
<input type = "text" class = "form-control" id = "lastname" placeholder = "Enter Last Name">
</div>
</div>
<div class = "form-group">
<div class = "col-sm-offset-2 col-sm-10">
<div class = "checkbox">
<label><input type = "checkbox"> Remember me</label>
</div>
</div>
</div>
<div class = "form-group">
<div class = "col-sm-offset-2 col-sm-10">
<button type = "submit" class = "btn btn-default">Sign in</button>
</div>
</div>
</form>Controles de formulário suportados
O Bootstrap suporta nativamente os controles de formulário mais comuns, principalmente input, textarea, checkbox, radio e select.
Entradas
O campo de texto de formulário mais comum é o campo de entrada. É aqui que os usuários inserirão a maioria dos dados essenciais do formulário. Bootstrap oferece suporte para todos os tipos de entrada HTML5 nativos: texto, senha, data e hora, data e hora local, data, mês, hora, semana, número, e-mail, url, pesquisa, tel e cor . A declaração de tipo adequada é necessária para tornar as entradas totalmente estilizadas.
<form role = "form">
<div class = "form-group">
<label for = "name">Label</label>
<input type = "text" class = "form-control" placeholder = "Text input">
</div>
</form>Textarea
A textarea é usada quando você precisa de várias linhas de entrada. Altere o atributo de linhas conforme necessário (menos linhas = caixa menor, mais linhas = caixa maior).
<form role = "form">
<div class = "form-group">
<label for = "name">Text Area</label>
<textarea class = "form-control" rows = "3"></textarea>
</div>
</form>CheckBoxes e botões de rádio
Caixas de seleção e botões de opção são ótimos quando você deseja que os usuários escolham em uma lista de opções predefinidas.
Ao construir um formulário, use a caixa de seleção se quiser que o usuário selecione qualquer número de opções de uma lista. Use o rádio se quiser limitar o usuário a apenas uma seleção.
Use a classe .checkbox-inline ou .radio-inline para uma série de caixas de seleção ou rádios para que os controles apareçam na mesma linha.
O exemplo a seguir demonstra os dois tipos (padrão e embutido) -
<label for = "name">Example of Default Checkbox and radio button </label>
<div class = "checkbox">
<label>
<input type = "checkbox" value = "">Option 1
</label>
</div>
<div class = "checkbox">
<label>
<input type = "checkbox" value = "">Option 2
</label>
</div>
<div class = "radio">
<label>
<input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "option1" checked> Option 1
</label>
</div>
<div class = "radio">
<label>
<input type = "radio" name = "optionsRadios" id = "optionsRadios2" value = "option2">
Option 2 - selecting it will deselect option 1
</label>
</div>
<label for = "name">Example of Inline Checkbox and radio button </label>
<div>
<label class = "checkbox-inline">
<input type = "checkbox" id = "inlineCheckbox1" value = "option1"> Option 1
</label>
<label class = "checkbox-inline">
<input type = "checkbox" id = "inlineCheckbox2" value = "option2"> Option 2
</label>
<label class = "checkbox-inline">
<input type = "checkbox" id = "inlineCheckbox3" value = "option3"> Option 3
</label>
<label class = "checkbox-inline">
<input type = "radio" name = "optionsRadiosinline" id = "optionsRadios3" value = "option1" checked> Option 1
</label>
<label class = "checkbox-inline">
<input type = "radio" name = "optionsRadiosinline" id = "optionsRadios4" value = "option2"> Option 2
</label>
</div>Selecione% s
Uma seleção é usada quando você deseja permitir que o usuário escolha entre várias opções, mas, por padrão, só permite uma.
Use <select> para opções de lista com as quais o usuário está familiarizado, como estados ou números.
Use multiple = "multiple" para permitir que os usuários selecionem mais de uma opção.
O exemplo a seguir demonstra os dois tipos (selecionados e vários) -
<form role = "form">
<div class = "form-group">
<label for = "name">Select list</label>
<select class = "form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<label for = "name">Mutiple Select list</label>
<select multiple class = "form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</form>Controle Estático
Use a classe .form-control-static em um <p>, quando precisar colocar texto simples próximo a um rótulo de formulário em um formulário horizontal.
<form class = "form-horizontal" role = "form">
<div class = "form-group">
<label class = "col-sm-2 control-label">Email</label>
<div class = "col-sm-10">
<p class = "form-control-static">[email protected]</p>
</div>
</div>
<div class = "form-group">
<label for = "inputPassword" class = "col-sm-2 control-label">Password</label>
<div class = "col-sm-10">
<input type = "password" class = "form-control" id = "inputPassword" placeholder = "Password">
</div>
</div>
</form>Estados de controle do formulário
Além do estado : focus (ou seja, um usuário clica na entrada ou nas guias), o Bootstrap oferece estilo para entradas desabilitadas e classes para validação de formulário.
Foco de entrada
Quando uma entrada recebe : foco , o contorno da entrada é removido e uma sombra de caixa é aplicada.
Entradas desativadas
Se você precisar desativar uma entrada, simplesmente adicionar o atributo disabled não irá apenas desativá-lo; também mudará o estilo e o cursor do mouse quando o cursor passar sobre o elemento.
Conjuntos de campos desativados
Adicione o atributo disabled a um <fieldset> para desabilitar todos os controles dentro do <fieldset> de uma vez.
Estados de Validação
O bootstrap inclui estilos de validação para erros, avisos e mensagens de sucesso. Para usar, basta adicionar a classe apropriada ( .has-warning, .has-error ou .has-success ) ao elemento pai.
O exemplo a seguir demonstra todos os estados de controle do formulário -
<form class = "form-horizontal" role = "form">
<div class = "form-group">
<label class = "col-sm-2 control-label">Focused</label>
<div class = "col-sm-10">
<input class = "form-control" id = "focusedInput" type = "text" value = "This is focused...">
</div>
</div>
<div class = "form-group">
<label for = "inputPassword" class = "col-sm-2 control-label">
Disabled
</label>
<div class = "col-sm-10">
<input class = "form-control" id = "disabledInput" type = "text" placeholder = "Disabled input here..." disabled>
</div>
</div>
<fieldset disabled>
<div class = "form-group">
<label for = "disabledTextInput" class = "col-sm-2 control-label">
Disabled input (Fieldset disabled)
</label>
<div class = "col-sm-10">
<input type = "text" id = "disabledTextInput" class = "form-control" placeholder = "Disabled input">
</div>
</div>
<div class = "form-group">
<label for = "disabledSelect" class = "col-sm-2 control-label">
Disabled select menu (Fieldset disabled)
</label>
<div class = "col-sm-10">
<select id = "disabledSelect" class = "form-control">
<option>Disabled select</option>
</select>
</div>
</div>
</fieldset>
<div class = "form-group has-success">
<label class = "col-sm-2 control-label" for = "inputSuccess">
Input with success
</label>
<div class = "col-sm-10">
<input type = "text" class = "form-control" id = "inputSuccess">
</div>
</div>
<div class = "form-group has-warning">
<label class = "col-sm-2 control-label" for = "inputWarning">
Input with warning
</label>
<div class = "col-sm-10">
<input type = "text" class = "form-control" id = "inputWarning">
</div>
</div>
<div class = "form-group has-error">
<label class = "col-sm-2 control-label" for = "inputError">
Input with error
</label>
<div class = "col-sm-10">
<input type = "text" class = "form-control" id = "inputError">
</div>
</div>
</form>Dimensionamento de controle de formulário
Você pode definir alturas e larguras de formulários usando classes como .input-lg e .col-lg- * respectivamente. O exemplo a seguir demonstra isso -
<form role = "form">
<div class = "form-group">
<input class = "form-control input-lg" type = "text" placeholder =".input-lg">
</div>
<div class = "form-group">
<input class = "form-control" type = "text" placeholder = "Default input">
</div>
<div class = "form-group">
<input class = "form-control input-sm" type = "text" placeholder = ".input-sm">
</div>
<div class = "form-group"></div>
<div class = "form-group">
<select class = "form-control input-lg">
<option value = "">.input-lg</option>
</select>
</div>
<div class = "form-group">
<select class = "form-control">
<option value = "">Default select</option>
</select>
</div>
<div class = "form-group">
<select class = "form-control input-sm">
<option value = "">.input-sm</option>
</select>
</div>
<div class = "row">
<div class = "col-lg-2">
<input type = "text" class = "form-control" placeholder = ".col-lg-2">
</div>
<div class = "col-lg-3">
<input type = "text" class = "form-control" placeholder = ".col-lg-3">
</div>
<div class = "col-lg-4">
<input type = "text" class = "form-control" placeholder = ".col-lg-4">
</div>
</div>
</form>Texto de ajuda
Os controles de formulário de bootstrap podem ter um texto de ajuda em nível de bloco que flui com as entradas. Para adicionar um bloco de conteúdo de largura total, use o bloco .help após <input>. O exemplo a seguir demonstra isso -
<form role = "form">
<span>Example of Help Text</span>
<input class = "form-control" type = "text" placeholder = "">
<span class = "help-block">
A longer block of help text that breaks onto a new line and may extend beyond one line.
</span>
</form>