HomeОбразованиеRelated VideosMore From: Online Tutorials

Transparent Login Form with floating Placeholder Text - Pure CSS Label Slide Up on Focus - No jQuery

4942 ratings | 199084 views
Please LIKE our NEW Facebook page for daily updates... https://www.facebook.com/Online-Tutorial-Html-Css-JQuery-Photoshop-1807958766120070/
Html code for embedding videos on your blog
Text Comments (211)
Online Tutorials (5 months ago)
please like and share this video... and also SUBSCRIBE my channel for daily new video...and don't forget to press the bell icon for daily notification
Usha Rani (8 days ago)
Give me coding
Nice video, i dont get why transform -50% works to center instead of back to initial position. Thank you if u can answer
Aryan Jaiswal (2 months ago)
Will you please share the code
Khalidh Sd (5 months ago)
Can u send me the code repo please.. it is very helpful to understand.
Poging Asado (5 months ago)
but sir how to link the Submit text into another html?
Kaushik Pal (5 days ago)
awesome tutorial man
Unnati Solanki (10 days ago)
Sir how to connect database connectivity
THE GREAT PUNISHER (13 days ago)
It sucks
THE GREAT PUNISHER (13 days ago)
You didn't show how it work at the end
Tech Market (14 days ago)
Nice ,great video. l loved it For technical video click below #Lntechmarket
Ayesha Qamar (14 days ago)
Sir voice he nei ha ise to
Rajesh Chowdhury (17 days ago)
link to download
Ferenc Cziryek (21 days ago)
hi I made my experiment conform your presentation. if I would like the gliphicon to stay, what should I do? here is my code. also I found textarea difficult on clicking. by the way, I copied the form from w3school, bs3. thank you, frank <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> <style> .inputbox{ position:relative; } .inputbox label{ position:absolute; top:8px; left:12px; transition:0.5s; } .inputbox input:focus~label{ top:-12px; left:0; background-color:white; color:#03a9f4; } .inputbox textarea:focus~label{ top:-12px; left:0; background-color:white; color:#03a9f4; } </style> </head> <body> <div class="container"> <h2>Vertical (basic) form</h2> <form action="/action_page.php"> <div class="form-group inputbox"> <input type="email" class="form-control" id="email" placeholder="" name="email"> <label for="email"> <span class="glyphicon glyphicon-envelope"></span> Enter Email: </label> </div> <div class="form-group inputbox"> <input type="password" class="form-control" id="pwd" placeholder="" name="pwd"> <label for="pwd"> <span class="glyphicon glyphicon-lock"></span> Enter Password: </label> </div> <div class="form-group inputbox"> <textarea class="form-control" rows="4" cols="50" name="comment" form="usrform" placeholder="" name="pwd"></textarea> <label for=""> <span class="glyphicon glyphicon-pencil"></span> Enter Message: </label> </div> <div class="checkbox"> <label><input type="checkbox" name="remember"> Remember me</label> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </div> </body> </html>
tôi is feeder (1 month ago)
how to load photo.i no search photo this link
D Diana (1 month ago)
song: Crypttic Sorrow-Meditation & Relaxation & Healing Music
Salmi Bilal (1 month ago)
it was very wonderful , keep going ,thank you
Duc Pham (1 month ago)
sorry, but i don't understand why you code border:0; border: ...;. so what does first code mean? thanks!
Hannabery HVAC (1 month ago)
The beginning of video shows the bottom border turning blue on focus, but not at the end, and its not shown in your code!
ZBIGNIEW OCHNICKI (1 month ago)
could I get site with a code?
sujon plus 360 (1 month ago)
Nice
Gamers NL (1 month ago)
Can u also do this on notepad++?
Andris Paralax (1 month ago)
How can I add the same effect to an input with no required attribute since not all my fields are required in the same form I submit? Thanks! EDIT: I solved it with a weird javascript trick. I used onkeyup="this.setAttribute('value', this.value);" in the input and then in the css I set it up input[type=password]:not([value=""]). This is a very specific case, so for more generic cases, it should be some other identifier set up for the input, such as a class, etc.
ognimo xela (1 day ago)
Andris Paralax https://youtu.be/vFKHPHQ__5Q
Thank you, bro! Do you think this code will work perfectly in responsible web sites?
Usman Ashraf (1 month ago)
you are awesome buddy thanks alot to secure my grade
Nikola Matic (2 months ago)
I am missing background file! <!doctype html> <html> <head> <meta charset="utf-8"> <title>Input Form UI Design</title> </head> <body> <style> body { margin: 0; padding: 0; font-family: sans-serif; background: url(bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .box { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 400px; padding: 40px; background: rgba(0,0,0,.8); box-sizing: border-box; box-shadow: 0 15px 25px rgba(0,0,0,.5); border-radius: 10px; } .box h2 { margin: 0 0 30px; padding: 0; color: #fff; text-align: center; } .box .inputBox { position: relative; } .box .inputBox input { width: 100%; padding: 10px 0; font-size: 16px; color: #fff; letter-spacing: 1px; margin-bottom: 30px; border: none; border-bottom: 1px solid #fff; outline: none; background: transparent; } .box .inputBox label { position: absolute; top: 0; left: 0; letter-spacing: 1px; padding: 10px 0; font-size: 16px; color: #fff; pointer-events: none; transition: .5s; } .box .inputBox input:focus ~ label, .box .inputBox input:valid ~ label { top: -18px; left: 0; color: #03a9f4; font-size: 12px; } .box input[type="submit"] { background: transparent; border: none; outline: none; color: #fff; background: #03a9f4; padding: 10px 20px; cursor: pointer; border-radius: 5px; } </style> <div class="box"> <h2>Login</h2> <form> <div class="inputBox"> <input type="text" name="" required=""> <label>Username</label> </div> <div class="inputBox"> <input type="password" name="" required=""> <label>Password</label> </div> <input type="submit" name="" value="Submit"> </form> </div> </body> </html>
Alex Sandro (2 months ago)
Muito obrigado, aprendi mais uma agora. Ótimo para usar esses efeitos.
Ansari Shaukat (2 months ago)
Pura nhu ban paya sir to plz reply me sri
Ansari Shaukat (2 months ago)
Sir iska image ke remark me kya likhna hai mai banaya hu sam to but kuch nhi aya hau mera glat ho gya hau..
roseRose (2 months ago)
Nice song hahahahaha
Abi bubi (2 months ago)
Superb video...tq so much its vry useful to execute tq once again
Lawakesh Patel (2 months ago)
nice
Mr. Jr. (2 months ago)
Thank you very much bro! I´m from Brazil...
jemal mieso (2 months ago)
I want the most impressing php,css,js,html project!!
rishabh rawat (2 months ago)
Thanks for making the video!
kiruba karan (2 months ago)
Brother thank you so much you are training use full thank you so much
suriya (2 months ago)
*How to keep submit button in center*
mc160401621 Sumera (13 days ago)
text-align: center;
Heedo Park (2 months ago)
very nice, thanks
Hamza el bouti (2 months ago)
thinks a lot , i mad this form with flask and cefpython it looks solid rocks
sanket dhumal (2 months ago)
mera background image nhi hoo rha upload aur submit button pr 'hand' jaisa pointer bhi nhi aa rha.... kya kru... plz batao na...
Roctiv Tech (3 months ago)
Nice job bro!!!
xSuhlly (3 months ago)
can someone help me im trying to link to the sumbit buttom to a page but its not working
Anil Kumar Singh (3 months ago)
Sir iske Coding send kar dijiye
Drupal Dev (3 months ago)
I liked very much as a refresher. The Best and so is the Music
saulo souza (3 months ago)
That works perfectly. Thanks from Brazil.
Online Tutorials (3 months ago)
Welcome bro
Ng Jo-Yi (3 months ago)
tq.its helpful
Gin Michael Likan Somni (3 months ago)
Background image con cover 100% ancho y alto... un div con bg negro con transparencia y centrado con margin auto o flex y dentro sus respectivos hs y input... ????
TRA PARFAIT JAURES TIZIE (3 months ago)
Thanks you
tasya Revantara (3 months ago)
Mau download
Vitalis Mutovo (3 months ago)
add source coden pliz
Shekh Saifuddin (3 months ago)
I think u deserve more subscriber, keep it up bro....👌👌👌
Mohammed Hussien (3 months ago)
Thanks from Iraq
Mohideen Asraf (3 months ago)
Hi Bro, I have One doubt kindly clarify that. when input tag is focused i want give transition to input and the transition start from its center like google email login text box . can you please tell how to achieve this ?
Online Tutorials (3 months ago)
https://www.youtube.com/watch?v=BKhoo6RSEDU u get answer with this...
Nitesh Khatri (3 months ago)
Superb tutorial.
sasikala tholisam (4 months ago)
input type email its not floating text why?
Rafy sanchez (4 months ago)
Great job !
Rafy sanchez (4 months ago)
Github ?
Kaushik Bhowmick (4 months ago)
You are the best...
Kaushik Bhowmick (4 months ago)
I just love it...
Mac McCarthy (4 months ago)
Great form and "Happy Diwali" to you and yours.
Seneza Vedaste (4 months ago)
look great!!!
Sanjar Shaikh (4 months ago)
Hello Online Tutorials please yahi same aspx page k liye muje pata nahi chala to plz uski 1 video bana sakte hai
Rachana Prakash (4 months ago)
very helpful
Shreya Ulligeri (4 months ago)
Plz provide with the code
Dream Floaty (4 months ago)
Userame... nice tutorial!
Raymond (4 months ago)
Oww. :valid smart
darshan hegde (4 months ago)
Bro use placeholders
Nabuko donozor (4 months ago)
How do i center the submit?
Aarr Ridho (4 months ago)
align:center; on your submit?
Purple Code (4 months ago)
You the best
Vijay Gaur (4 months ago)
nice
shahinraj raj (4 months ago)
nice...
VMAJSTER (4 months ago)
*nice*
AA A (4 months ago)
As soon as I saw tthis I figured out how to do it within seconds, but I can never pull out such a beautiful design and colors! Good at programming != good at design That's just beautiful mate, nice work!
REDOUAN EL HAMMOUTI (5 months ago)
thanks
Pointer-events: none; not working and my first text box text trasnsition continues. What I do
Mazhar Nazar (5 months ago)
share your background pic in link..?
Chapapa picarra (5 months ago)
my css for .box { } is not working weird
Silvia David (5 months ago)
This soundtrack made me watch the entire tutorial ;) loved it .
Anthony Kuci (5 months ago)
can I have the soundtrack please?
abhinesh nangla (5 months ago)
Beautiful
Jaime Ursua Jr.II (5 months ago)
Can I have your CSS?
Ryan Matos (5 months ago)
i've seen your videos, you're so good hahahah! sometimes i increase some of your codes on my website. It's on building, but its getting being great thanks you
Cristian Flores (5 months ago)
👏👏👏👏👏👏👏👏👏👏
Mühendis Matematik (5 months ago)
thank you man
Philippe Anglade (5 months ago)
Well, it's just playing around with a bunch of ccs attributes, until you get the result you want. Nothing interesting in this.
Maciej Wiśniewski (5 months ago)
Beautiful, but this music is so sad ;)
Isaac Fernandes (5 months ago)
anyone help please . input and text are getting merged example if i put username it is mixing with the text "USERNAME" and same happening with password
Muhammad-Zahid Ali (5 months ago)
Is it responsive on mobo devices?
indhu mathi (5 months ago)
Please make registration forms like this
Эд Лесничий (5 months ago)
2х and still slow...
HK_KING (5 months ago)
Pls put the source codes
Oluwaseun (5 months ago)
Why do you have two border property?
Willy Kimura (5 months ago)
Hey, great tutorial there! For an easier workflow when creating your websites, try using Browser Refresh (https://deskjs.wordpress.com/browser-refresh). It will greatly simplify your design-work, letting you avoid the usual minimize-refresh design loop that web designers get into. Thanks!
Bhavani Sankar (5 months ago)
Is it responsive? ..
theu (15 days ago)
No
Tarun Thakur (5 months ago)
Bro I want cord of this fome
Rakibul Islam (5 months ago)
Thank you it's working.
RescovarS Production (5 months ago)
Thank You gusy.
giridharan k (5 months ago)
.box .inputBox input:focus ~ label, .box .inputBox input:valid ~ label not working give some soultion
Alexi Marchandise (5 months ago)
Thank you very much for your help i had the same problem
Dan Cristian (5 months ago)
~ selector matches the second element that is following, so you need to have input + label in your html in that order. Hope it helps
abhilash .r (6 months ago)
Bro do you have any idea on ripple effect on buttons. Pls share if you have that.
Tech Extra Dose (6 months ago)
Nice..
Mounir Ps (6 months ago)
Thanks, bro, but text file please?
ognimo xela (1 day ago)
Mounir Ps https://youtu.be/vFKHPHQ__5Q
Michael Tercias (6 months ago)
Can I have the source code? It would be a great help for my school project. Thanks in advance! <3 My Gmail is: [email protected]
Gurinder Singh (6 months ago)
to much good video
Aytekin Erlale (6 months ago)
You are amazing teaching. Thank you so much for everything
ANAMY GR (7 months ago)
Nice
Riza Aringga (7 months ago)
Soundtrack?

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.