Formularios

<< Desplegables Navs y tabs >>

A continuación, vamos a ver algunos de los tipos de elementos que podemos utilizar en los formularios, es importante tener en cuenta que todos los inputs deben tener el atributo type correspondiente.

<form>
   <div class="mb-3">
      <label for="exampleInputEmail1" class="form-label">Email address</label>
      <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
      <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
   </div>
   <div class="mb-3">
      <label for="exampleInputPassword1" class="form-label">Password</label>
      <input type="password" class="form-control" id="exampleInputPassword1">
   </div>
   <div class="mb-3">
      <label for="exampleColorInput" class="form-label">Color picker</label>
      <input type="color" class="form-control form-control-color" id="exampleColorInput" value="#563d7c" title="Choose your color">
   </div>
   <div class="mb-3">
      <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>
   </div>
   <div class="mb-3">
      <select class="form-select" multiple aria-label="multiple select example">
         <option selected>Open this select menu</option>
         <option value="1">One</option>
         <option value="2">Two</option>
         <option value="3">Three</option>
      </select>
   </div>
   <div class="mb-3">
      <label for="customRange3" class="form-label">Example range</label>
      <input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange3">
   </div>
   <div class="mb-3">
      <label for="exampleDataList" class="form-label">Datalist example</label>
      <input class="form-control" list="datalistOptions" id="exampleDataList" placeholder="Type to search...">
      <datalist id="datalistOptions">
         <option value="San Francisco">
         <option value="New York">
         <option value="Seattle">
         <option value="Los Angeles">
         <option value="Chicago">
      </datalist>
   </div>
   <button type="submit" class="btn btn-primary">Submit</button>
</form>

<< Desplegables Navs y tabs >>