Label no Bootstrap

Asked

Viewed 630 times

2

Ola Pessoal,

They have already helped me a lot, but now I have another problem... I want that when you press or pass the mouse in the inputs, appears on top the name...

I’ve made it work, but with bootstrap it’s hard

Other questions:

  • Because between the fields is so spacious in Bootstrap...???
  • How do I pull jsES.js to call the bugs already in Spanish??
  • Selects are 'success' or 'error' on top of the arrow, as I set this?

$(document).ready(function() {
  $('#se-form').bootstrapValidator({
    message: 'No es valido',
    framework: 'bootstrap',
    feedbackIcons: {
      valid: 'glyphicon glyphicon-ok',
      invalid: 'glyphicon glyphicon-remove',
      validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
      first_name: {
        validators: {
          notEmpty: {
            message: 'El nombre no puede estar vacío'
          }
        }
      }
    }
  }); // bootstrapValidator
}); // document.ready
/** LABEL **/
.form-group label {
  position: relative;   
  top: 0px;
  left: 0px;
  color: transparent;
  transition: font-size .5s, color .5s, left .5s, top .5s;
  z-index: 3; 
  visibility:hidden;
}


.form-group input:not(:placeholder-shown) + label, input:focus + label, input:hover + label {
  top: -38px;
  left: 10px;
  color: black;
  opacity: 0.5;
  z-index: 3;
  font-size: 10px;
}
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- bootstrap font-awesome -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<!-- bootstrap Validator css -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.2/css/bootstrapValidator.min.css" rel="stylesheet" />
<!-- bootstrap Validator JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.2/js/bootstrapValidator.min.js"></script>

<form action="index.php?page=equipInsert" method="post" id="se-form" data-toggle="validator">

  <div class="form-group">
    <label for="first_name">Primer Nombre</label>
    <div class="input-group">
      <span class="input-group-addon"><i class="fa fa-user se-icon-m"></i></span>
      <input name="first_name" id="first_name" type="text" placeholder="Primer Nombre" class="form-control" required>
      <div class="help-block with-errors se-text-p"></div>
    </div>
  </div>

  <div class="form-group">
    <label for="last_name">Apelido</label>
    <div class="input-group">
      <span class="input-group-addon"><i class="fa fa-user se-icon-m"></i></span>
      <input name="last_name" id="last_name" type="text" data-minlength="3" data-error="Minimo de 3 caracteres." placeholder="Apelido" class="form-control" required>
      <div class="help-block with-errors se-text-p"></div>
    </div>
  </div>

  <div class="form-group">
    <label for="email">Email</label>
    <div class="input-group">
      <span class="input-group-addon"><i class="fa fa-envelope-o se-icon-m"></i></span>
      <input name="email" id="email" type="email" data-minlength="4" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" data-error="Informe um e-mail correto." placeholder="Email" class="form-control" required>
      <div class="help-block with-errors se-text-p"></div>
    </div>
  </div>

  <div class="form-group">
    <label for="password">Contraseña</label>
    <div class="input-group">
      <span class="input-group-addon"><i class="fa fa-key se-icon-m"></i></span>
      <input name="password" id="password" type="password" data-minlength="6" data-error="Minimo de 6 caracteres." placeholder="Contraseña" class="form-control" required>
      <div class="help-block with-errors se-text-p"></div>
    </div>
  </div>

  <div class="form-group">
    <label for="password_reply">Contraseña Repetir</label>
    <div class="input-group">
      <span class="input-group-addon"><i class="fa fa-key se-icon-m"></i></span>
      <input name="password_reply" id="password_reply" type="password" data-minlength="6" data-match="#password" data-match-error="Atenção! As senhas não estão iguais." placeholder="Contraseña Repetir" class="form-control" required>
      <div class="help-block with-errors se-text-p"></div>
    </div>
  </div>

  <div class="form-group">
    <label for="gender">Gender</label>
    <div class="input-group">
      <span class="input-group-addon"><i class="fa fa-venus-mars se-icon-m"></i></span>
      <select name="gender" id="gender" class="form-control" required>
        <option value="" disabled selected>Seleccione su opción</option>
        <option value="1">Masculino</option>
        <option value="2">Femenino</option>
      </select>
      <div class="help-block with-errors se-text-p"></div>
    </div>
  </div>

  <div class="form-group">
    <label for="birth_date">Fecha de aniversário</label>
    <div class="input-group">
      <span class="input-group-addon"><i class="fa fa-birthday-cake se-icon-m"></i></span>
      <input name="birth_date" id="birth_date" type="date" class="form-control" required>
      <div class="help-block with-errors se-text-p"></div>
    </div>
  </div>

  <div class="form-group">
    <label for="telephone">Teléfono</label>
    <div class="input-group">
      <span class="input-group-addon"><i class="fa fa-phone se-icon-m"></i></span>
      <input name="telephone" id="telephone" type="tel" min="13" data-minlength="13" pattern="\([0-9]{2}\) [0-9]{4,6}-[0-9]{3,4}$" data-error="13 caracteres." placeholder="Teléfono" class="form-control" required>
      <div class="help-block with-errors se-text-p"></div>
    </div>
  </div>

  <div class="form-group">
    <label for="nivel">Nivel</label>
    <div class="input-group">
      <span class="input-group-addon"><i class="fa fa-users se-icon-m"></i></span>
      <select name="nivel" id="nivel" class="form-control" required>
        <option value="" disabled selected>Seleccione su opción</option>
        <option value="1">Admin</option>
        <option value="2">Usuario</option>
      </select>
      <div class="help-block with-errors se-text-p"></div>
    </div>
  </div>

  <p align="center">
    <button type="reset" title="Resetar" class="btn btn-warning" /> Resetar
    <i class="fa fa-eraser se-icon-p"></i></button> &nbsp;&nbsp;
    <button type="submit" name="insertEquip" title="Agregar..." class="btn btn-primary" />Agregar
    <i class="fa fa-save se-icon-p"></i></button>
  </p>
</form>

twitter-bootstrap bootstrap-3 label bootstrap-validator

  • Luccas I edited my answer to leave the Label as you wanted, take a look and see if that’s it. Qq thing comments there

1 answer

2


I believe that’s what you needed.

inserir a descrição da imagem aqui

I had to make some adaptations to your CSS and HTML as well. Because to use CSS that way <input> has to come first and then the <label>

Run the Snippet and see the code you will understand. (to leave to your taste you can work the values of Margins, Tops and Lefts. OBS: I removed for now the script validation, as it is only for you to check the input)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
    <!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- bootstrap font-awesome -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<!-- bootstrap Validator css -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.2/css/bootstrapValidator.min.css" rel="stylesheet" />
<!-- bootstrap Validator JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.2/js/bootstrapValidator.min.js"></script>

<style>
    /** LABEL **/
.form-group{
    margin-top: 26px;
}

.input-group label {
  position: absolute;   
  top: 0px;
  left: 45px;
  color: transparent;
  transition: all 0.5s linear;
  z-index: 3; 
  opacity: 0;
}
input:focus + label, input:hover + label, select:focus + label, select:hover + label  {
  top: -20px;
  left: 45px;
  color: black;
  opacity: 0.5;
  z-index: 3;
  font-size: 10px;
}
</style>
</head>
<body>
    
    <!-- jQuery -->

<form action="index.php?page=equipInsert" method="post" id="se-form" data-toggle="validator">

  <div class="form-group">
    <div class="input-group">
      <span class="input-group-addon"><i class="fa fa-user se-icon-m"></i></span>
      <input name="first_name" id="first_name" type="text" placeholder="Primer Nombre" class="form-control" required>
      <label for="first_name">Primer Nombre</label>
      <div class="help-block with-errors se-text-p"></div>
    </div>
  </div>

  <div class="form-group">
    <div class="input-group">
      <span class="input-group-addon"><i class="fa fa-user se-icon-m"></i></span>
      <input name="last_name" id="last_name" type="text" data-minlength="3" data-error="Minimo de 3 caracteres." placeholder="Apelido" class="form-control" required>
      <label for="last_name">Apelido</label>
      <div class="help-block with-errors se-text-p"></div>
    </div>
  </div>

  <div class="form-group">
    <div class="input-group">
      <span class="input-group-addon"><i class="fa fa-envelope-o se-icon-m"></i></span>
      <input name="email" id="email" type="email" data-minlength="4" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" data-error="Informe um e-mail correto." placeholder="Email" class="form-control" required>
      <label for="email">Email</label>
      <div class="help-block with-errors se-text-p"></div>
    </div>
  </div>

  <div class="form-group">
    <div class="input-group">
      <span class="input-group-addon"><i class="fa fa-key se-icon-m"></i></span>
      <input name="password" id="password" type="password" data-minlength="6" data-error="Minimo de 6 caracteres." placeholder="Contraseña" class="form-control" required>
      <label for="password">Contraseña</label>
      <div class="help-block with-errors se-text-p"></div>
    </div>
  </div>

  <div class="form-group">
    <div class="input-group">
      <span class="input-group-addon"><i class="fa fa-key se-icon-m"></i></span>
      <input name="password_reply" id="password_reply" type="password" data-minlength="6" data-match="#password" data-match-error="Atenção! As senhas não estão iguais." placeholder="Contraseña Repetir" class="form-control" required>
      <label for="password_reply">Contraseña Repetir</label>
      <div class="help-block with-errors se-text-p"></div>
    </div>
  </div>

  <div class="form-group">
    <div class="input-group">
      <span class="input-group-addon"><i class="fa fa-venus-mars se-icon-m"></i></span>
      <select name="gender" id="gender" class="form-control" required>
        <option value="" disabled selected>Seleccione su opción</option>
        <option value="1">Masculino</option>
        <option value="2">Femenino</option>
      </select>
      <label for="gender">Gender</label>
      <div class="help-block with-errors se-text-p"></div>
    </div>
  </div>

  <div class="form-group">
    <div class="input-group">
      <span class="input-group-addon"><i class="fa fa-birthday-cake se-icon-m"></i></span>
      <input name="birth_date" id="birth_date" type="date" class="form-control" required>
      <label for="birth_date">Fecha de aniversário</label>
      <div class="help-block with-errors se-text-p"></div>
    </div>
  </div>

  <div class="form-group">
    <div class="input-group">
      <span class="input-group-addon"><i class="fa fa-phone se-icon-m"></i></span>
      <input name="telephone" id="telephone" type="tel" min="13" data-minlength="13" pattern="\([0-9]{2}\) [0-9]{4,6}-[0-9]{3,4}$" data-error="13 caracteres." placeholder="Teléfono" class="form-control" required>
      <label for="telephone">Teléfono</label>
      <div class="help-block with-errors se-text-p"></div>
    </div>
  </div>

  <div class="form-group">
    <div class="input-group">
      <span class="input-group-addon"><i class="fa fa-users se-icon-m"></i></span>
      <select name="nivel" id="nivel" class="form-control" required>
        <option value="" disabled selected>Seleccione su opción</option>
        <option value="1">Admin</option>
        <option value="2">Usuario</option>
      </select>
      <label for="nivel">Nivel</label>
      <div class="help-block with-errors se-text-p"></div>
    </div>
  </div>

  <p align="center">
    <button type="reset" title="Resetar" class="btn btn-warning" /> Resetar
    <i class="fa fa-eraser se-icon-p"></i></button> &nbsp;&nbsp;
    <button type="submit" name="insertEquip" title="Agregar..." class="btn btn-primary" />Agregar
    <i class="fa fa-save se-icon-p"></i></button>
  </p>
</form>
    
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


</body>
</html>

The fields are spaced because the .form-group which is a native class of Bootstrap has a margin-bottom 15px, as you can see below. Then you’ll have to take this margin no hand making a override of the default class.

.form-group {
    margin-bottom: 15px; /* coloque 0 aqui se vc precisar */
}

.form-group + p{
    margin-top: 15px; /* separar botões no final para não colar nos inputs */
}

About the other questions I won’t be able to help you much...

  • Thank you for the answer, but I believe that someone can help me in the question of LABEL, because it is possible... When I put the label under the input it works, but so it defaults the form

  • @Luccasgaulia ok understand. But I’m telling you that in this case your code has a problem in HTML and CSS, because when you speak in CSS input:focus + label means that in HTML you must first come Input and then Label, and in your case first comes Label and then Input

  • Perfect, got it, it’s great

  • @Luccasgaulia how good it worked! If my answer was what you needed consider marking the Reply with "Accept" ✔

Browser other questions tagged twitter-bootstrap bootstrap-3 label bootstrap-validator

You are not signed in. Login or sign up in order to post.