Bootstrap - Exemplo de formulários

Bootstrap - Exemplo de formulário 1

Em todos os controles os labels foram exibidos como:
<label for="usuario">Usuário</label>

Caixas de texto

Caixa de Texto Comum

Usuário

Código controle acima :
<input class="form-control" type="text" id="usuario" placeholder="Digite seu usuário">

Caixa de Texto com formato pequeno(sm)

Código controle acima :
<input class="form-control form-control-sm" type="text" id="login" placeholder="Seu usuário no sistema">

Caixa de Texto com formato grande(lg)

Apelido(Grande)

Código controle acima :
<input class="form-control form-control-lg" type="text" id="apelido" placeholder="Seu apelido">

Caixa de Texto com formato email

Email Email será validado

Código controle acima :
<input class="form-control" type="email" id="email" placeholder="Digite seu email" readonly>

select

Estados
Código controle acima :
<select class="form-control" id="estados">
   <option>Acre</option>
   <option>Alagoas</option>
   <option>Amapá</option>
   <option>...</option>
</select>

textarea

Mensagem
Código controle acima :
<textarea class="form-control" id="mensagem" rows="3"></textarea>

file input

Arquivo
Código controle acima :
<input class="form-control-file" type="file" id="arquivo1">

custom file input

Selecione arquivo
Código controle acima :
<input class="custom-file-input" type="file" id="arquivo2">

range

Satisfação
Código controle acima :
<input class="custom-range" type="range" id="range" min="1" max="5">

button

Código controle acima :
<input class=" btn btn-primary" type="submit" value="Salvar">

Formulário inline muito usado para autenticar usuário no topo da página

Código controle acima :
    <input class="form-control mr-2" type="text" placeholder="Digite seu usuário">
    <input class="form-control mr-2" type="password" placeholder="Digite sua senha">
    <input class=" btn btn-primary" type="submit" value="Logar">

Validação de formulário

não vai validar - apenas mostrar as classes normalmente a validação é feito em javascript e até o momento no curso não chegamos lá Classes: is-valid, is-invalid, invalid-feedback

Email válido

Código controle acima :
     <input class="form-control is-valid" type="text" id="email-usuario" placeholder="Digite seu e-mail">
     <div class="valid-feedback">
         Email válido
     </div>

Senha

Senha inválida

Código controle acima :
    <div class="form-group">
        <label for="senha-usuario">Senha</label>
        <input class="form-control is-invalid" type="email" id="senha-usuario" placeholder="Digite sua senha">
        <div class="invalid-feedback">
            Senha inválida
        </div>
    </div>
    <input class="btn btn-primary" type="submit" value="Logar">