2020-05-12 20:50:21 +03:00
<!doctype html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit=no" >
< meta name = "description" content = "" >
< meta name = "author" content = "Mark Otto, Jacob Thornton, and Bootstrap contributors" >
< meta name = "generator" content = "Jekyll v4.0.1" >
< title > Floating labels example · Bootstrap< / title >
< link rel = "canonical" href = "https://getbootstrap.com/docs/4.5/examples/floating-labels/" >
<!-- Bootstrap core CSS -->
2020-05-13 09:12:21 +03:00
< link href = "/docs/4.5/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin = "anonymous" >
2020-05-12 20:50:21 +03:00
<!-- Favicons -->
< link rel = "apple-touch-icon" href = "/docs/4.5/assets/img/favicons/apple-touch-icon.png" sizes = "180x180" >
< link rel = "icon" href = "/docs/4.5/assets/img/favicons/favicon-32x32.png" sizes = "32x32" type = "image/png" >
< link rel = "icon" href = "/docs/4.5/assets/img/favicons/favicon-16x16.png" sizes = "16x16" type = "image/png" >
< link rel = "manifest" href = "/docs/4.5/assets/img/favicons/manifest.json" >
< link rel = "mask-icon" href = "/docs/4.5/assets/img/favicons/safari-pinned-tab.svg" color = "#563d7c" >
< link rel = "icon" href = "/docs/4.5/assets/img/favicons/favicon.ico" >
< meta name = "msapplication-config" content = "/docs/4.5/assets/img/favicons/browserconfig.xml" >
< meta name = "theme-color" content = "#563d7c" >
< style >
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
< / style >
<!-- Custom styles for this template -->
< link href = "floating-labels.css" rel = "stylesheet" >
< / head >
< body >
< form class = "form-signin" >
< div class = "text-center mb-4" >
< img class = "mb-4" src = "/docs/4.5/assets/brand/bootstrap-solid.svg" alt = "" width = "72" height = "72" >
< h1 class = "h3 mb-3 font-weight-normal" > Floating labels< / h1 >
< p > Build form controls with floating labels via the < code > :placeholder-shown< / code > pseudo-element. < a href = "https://caniuse.com/#feat=css-placeholder-shown" > Works in latest Chrome, Safari, and Firefox.< / a > < / p >
< / div >
< div class = "form-label-group" >
< input type = "email" id = "inputEmail" class = "form-control" placeholder = "Email address" required autofocus >
< label for = "inputEmail" > Email address< / label >
< / div >
< div class = "form-label-group" >
< input type = "password" id = "inputPassword" class = "form-control" placeholder = "Password" required >
< label for = "inputPassword" > Password< / label >
< / div >
< div class = "checkbox mb-3" >
< label >
< input type = "checkbox" value = "remember-me" > Remember me
< / label >
< / div >
< button class = "btn btn-lg btn-primary btn-block" type = "submit" > Sign in< / button >
< p class = "mt-5 mb-3 text-muted text-center" > © 2017-2020< / p >
< / form >
< / body >
< / html >
