Page Menu
Home
c4science
Search
Configure Global Search
Log In
Files
F61721142
index.html
No One
Temporary
Actions
Download File
Edit File
Delete File
View Transforms
Subscribe
Mute Notifications
Award Token
Subscribers
None
File Metadata
Details
File Info
Storage
Attached
Created
Wed, May 8, 13:32
Size
1 KB
Mime Type
text/html
Expires
Fri, May 10, 13:32 (2 d)
Engine
blob
Format
Raw Data
Handle
17549550
Attached To
rCOSTCALC Cost Calculator Source code
index.html
View Options
---
layout: examples
title: Floating labels example
extra_css: "floating-labels.css"
include_js: false
---
<form class="form-signin">
<div class="text-center mb-4">
<img class="mb-4" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/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-{{ site.time | date: "%Y" }}</p>
</form>
Event Timeline
Log In to Comment