hercioneto

Form com BootStrap

May 10th, 2023
1,151
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 4.34 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html lang="pt-br">
  3.    <head>
  4.       <meta charset="utf-8">
  5.       <meta name="viewport" content="width=device-width, initial-scale=1">
  6.       <title>Formulário de Cadastro</title>
  7.       <!-- Adiciona o CSS do Bootstrap -->
  8.       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  9.       <!-- Adiciona o jQuery e o JavaScript do Bootstrap -->
  10.       <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  11.       <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  12.       <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  13.    </head>
  14.    <body>
  15.       <nav class="navbar navbar-expand-lg navbar-light bg-light">
  16.          <a class="navbar-brand" href="#">Formulário de Cadastro</a>
  17.          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
  18.          <span class="navbar-toggler-icon"></span>
  19.          </button>
  20.          <div class="collapse navbar-collapse" id="navbarNav">
  21.             <ul class="navbar-nav">
  22.                <li class="nav-item active">
  23.                   <a class="nav-link" href="#">Home</a>
  24.                </li>
  25.                <li class="nav-item">
  26.                   <a class="nav-link" href="#">Listar Clientes</a>
  27.                </li>
  28.                <li class="nav-item">
  29.                   <a class="nav-link" href="#">Novo Cliente</a>
  30.                </li>
  31.             </ul>
  32.          </div>
  33.       </nav>
  34.       <div class="container mt-3">
  35.          <form>
  36.             <div class="form-group">
  37.                <label for="nome">Nome:</label>
  38.                <input type="text" class="form-control" id="nome" name="nome" required>
  39.             </div>
  40.             <div class="form-group">
  41.                <label for="endereco">Endereço:</label>
  42.                <input type="text" class="form-control" id="endereco" name="endereco" required>
  43.             </div>
  44.             <div class="form-row">
  45.                <div class="form-group col-md-6">
  46.                   <label for="cidade">Cidade:</label>
  47.                   <input type="text" class="form-control" id="cidade" name="cidade" required>
  48.                </div>
  49.                <div class="form-group col-md-6">
  50.                   <label for="estado">Estado:</label>
  51.                   <select id="estado" name="estado" class="form-control" required>
  52.                      <option value="" selected disabled>Selecione o Estado</option>
  53.                      <option value="AC">Acre</option>
  54.                      <option value="AL">Alagoas</option>
  55.                      <option value="AP">Amapá</option>
  56.                      <option value="AM">Amazonas</option>
  57.                      <option value="BA">Bahia</option>
  58.                      <option value="CE">Ceará</option>
  59.                      <option value="DF">Distrito Federal</option>
  60.                      <option value="ES">Espírito Santo</option>
  61.                      <option value="GO">Goiás</option>
  62.                      <option value="MA">Maranhão</option>
  63.                      <option value="MT">Mato Grosso</option>
  64.                      <option value="MS">Mato Grosso do Sul</option>
  65.                      <option value="MG">Minas Gerais</option>
  66.                      <option value="PA">Pará</option>
  67.                      <option value="PB">Paraíba</option>
  68.                      <option value="PR">Paraná</option>
  69.                      <option value="PE">Pernambuco</option>
  70.                      <option value="PI">Piauí</option>
  71.                      <option value="RJ">Rio de Janeiro</option>
  72.                      <option value="RN">Rio Grande do Norte</option>
  73.                      <option value="RS">Rio Grande do Sul</option>
  74.                      <option value="RO">Rondônia</option>
  75.                      <option value="RR">Roraima</option>
  76.                      <option value="SC">Santa Catarina</option>
  77.                      <option value="SP">São Paulo</option>
  78.                      <option value="SE">Sergipe</option>
  79.                      <option value="TO">Tocantins</option>
  80.                   </select>
  81.                </div>
  82.             </div>
  83.             <button type="submit" class="btn btn-primary">Cadastrar</button>
  84.          </form>
  85.       </div>
  86.    </body>
  87. </html>
Advertisement
Add Comment
Please, Sign In to add comment