<div class="container p-4">
  <div class="row">
    <div class="col-md-4 mx-auto">
      <div class="card text-center">
        <div class="card-header">
          <h3>Registro de Usuario</h3>
        </div>
        <div class="card-body">
          <form action="/signup" method="POST">
            <div class="form-group">
              <input type="type" name="nombre" placeholder="Nombre y Apellido" class="form-control" autofocus required>
            </div>

            <div class="form-group">
              <input type="email" name="email" placeholder="correo electronico" class="form-control" required>
            </div>

            
            <div class="form-group">
              <input type="text" name="username" placeholder="Username" class="form-control" required>
            </div>
            <div class="form-group">
              <input type="password" name="password" placeholder="Password" class="form-control" required>
            </div>
            
<label class="font-weight-bold" for="lbrol">Rol del Usuario</label>
<div class="form-check">
  <input class="form-check-input" type="radio" name="rol" id="rol1" value="0" checked>
  <label class="form-check-label" for="rol1">
    Supervisor
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="rol" id="rol2" value="1">
  <label class="form-check-label" for="rol2">
    Operador
  </label>
</div>

<label class="font-weight-bold" for="lbrol">             </label>

            <div class="form-group">
              <button class="btn btn-success btn-block">
                Registrar
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

<script>

(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>