2
\$\begingroup\$

I have turned a "classic" Bootstrap form into a "floating labels" form.

For this purpose, I had to move the labels below the form controls.

.form-control:focus {
  box-shadow: none !important;
  border-color: #c4c4c4 !important;
}

.with-floating-label {
  position: relative;
}

.with-floating-label label {
  position: absolute;
  top: 10px;
  padding: 0 3px;
  background: #fff;
  left: 0.75rem;
  margin: 0 0 0 -2px;
  font-size: inherit;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.2s ease-in-out, top 0.3s ease-in-out;
}

.with-floating-label input:not(:-moz-placeholder-shown)+label,
.with-floating-label textarea:not(:-moz-placeholder-shown)+label {
  top: -6px;
  font-size: 12px;
  opacity: 1;
}

.with-floating-label input:not(:-ms-input-placeholder)+label,
.with-floating-label textarea:not(:-ms-input-placeholder)+label {
  top: -6px;
  font-size: 12px;
  opacity: 1;
}

.with-floating-label input:not(:placeholder-shown)+label,
.with-floating-label textarea:not(:placeholder-shown)+label {
  top: -6px;
  font-size: 12px;
  opacity: 1;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="card my-2">
    <div class="card-header">Register</div>
    <div class="card-body">
      <form method="POST" action="http://mysite.com/register" novalidate autocomplete="off">
      <input type="hidden" name="token" value="O4SZD63ujSDWUQNj6u2Q8LsC6HDQdhMZwjAW128x">
        <div class="form-group with-floating-label">
          <input id="username" type="text" placeholder="Username" class="form-control" name="username" value="">
          <label for="username" class="text-muted">Username</label>
        </div>
        <div class="form-group with-floating-label">
          <input id="first_name" type="text" placeholder="First name" class="form-control" name="first_name" value="">
          <label for="first_name" class="text-muted">First name</label>
        </div>
        <div class="form-group with-floating-label">
          <input id="last_name" type="text" placeholder="Last name" class="form-control" name="last_name" value="">
          <label for="last_name" class="text-muted">Last name</label>
        </div>
        <div class="form-group with-floating-label">
          <input id="email" type="email" placeholder="Email address" class="form-control" name="email" value="">
          <label for="email" class="text-muted">Email address</label>
        </div>
        <div class="form-group with-floating-label">
          <input id="password" placeholder="Password" type="password" class="form-control" name="password">
          <label for="password" class="text-muted">Password</label>
        </div>
        <div class="form-group with-floating-label">
          <input id="password-confirm" placeholder="Confirm Password" type="password" class="form-control" name="password_confirmation">
          <label for="password-confirm" class="text-muted">Confirm Password</label>
        </div>
        <div class="form-group mb-0">
          <button type="submit" class="btn btn-block btn-primary">Register</button>
        </div>
      </form>
    </div>
  </div>
</div>

Questions/concerns:

  1. Does this change affect security?
  2. Are there any usability issues?
  3. Are there any other ways it can be improved?
\$\endgroup\$

1 Answer 1

1
\$\begingroup\$
  1. I don't see anything worrying about security;
  2. Regarding usability it looks pretty good too;
  3. Since you are using placeholders instead of labels I would remove all labels and work only with inputs. Like this:

.form-control {
  margin-bottom: 1rem;
}

.form-control:focus {
  box-shadow: none !important;
  border-color: #c4c4c4 !important;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="card my-2">
    <div class="card-header">Register</div>
    <div class="card-body">
      <form method="POST" action="http://mysite.com/register" novalidate autocomplete="off">
        <input type="hidden" name="token" value="O4SZD63ujSDWUQNj6u2Q8LsC6HDQdhMZwjAW128x">
        <div class="form-group">
          <input id="username" type="text" placeholder="Username" class="form-control" name="username" value="">
          <input id="first_name" type="text" placeholder="First name" class="form-control" name="first_name" value="">
          <input id="last_name" type="text" placeholder="Last name" class="form-control" name="last_name" value="">
          <input id="email" type="email" placeholder="Email address" class="form-control" name="email" value="">
          <input id="password" placeholder="Password" type="password" class="form-control" name="password">
          <input id="password-confirm" placeholder="Confirm Password" type="password" class="form-control" name="password_confirmation">
          <button type="submit" class="btn btn-block btn-primary">Register</button>
        </div>
      </form>
    </div>
  </div>
</div>

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.