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

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

5523 ratings | 225333 views
Our Android App for SOURCE CODE : https://play.google.com/store/apps/details?id=com.mtz.onlinetutorials ------------------------ 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 (227)
Online Tutorials (6 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
Pakistani Gamer (1 day ago)
Usha Rani (1 month 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 (3 months ago)
Will you please share the code
Khalidh Sd (6 months ago)
Can u send me the code repo please.. it is very helpful to understand.
Strahinja Nikolić (3 days ago)
How can i moving the submit box on the center?
Morris Ndegwa (13 days ago)
Thank you for sharing your knowledge
riekmaster (13 days ago)
how to go to home
sojoud jebreel (15 days ago)
love this
FaDe Rock YT (15 days ago)
How do you connect it to a data base
Zapocalypse (12 days ago)
For that you're going to learn PHP :)
Adrián Isaacs (16 days ago)
So sad music! XD Don't have the code in txt?!
Виталий (21 days ago)
Luca Poulsen (21 days ago)
I don't understand " input:focus ~ label "
Ram Chandran (23 days ago)
Is this responsive??
Bharath bhushan royal (25 days ago)
Where u write code i mean in which app
Bharath bhushan royal (21 days ago)
Thank u
Online Tutorials (25 days ago)
Sublime text
yazdan kundi (30 days ago)
you should have spoked your self in the video.explaining each step, this might have helped many in understanding this. by the good job Ma Sha Allah.
Kaushik Pal (1 month ago)
awesome tutorial man
Unnati Solanki (1 month ago)
Sir how to connect database connectivity
THE GREAT PUNISHER (1 month ago)
It sucks
THE GREAT PUNISHER (1 month ago)
You didn't show how it work at the end
Tech Market (1 month ago)
Nice ,great video. l loved it For technical video click below #Lntechmarket
Ayesha Qamar (1 month ago)
Sir voice he nei ha ise to
Rajesh Chowdhury (1 month ago)
link to download
Ferenc Cziryek (1 month 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 (2 months ago)
how to load photo.i no search photo this link
D Diana (2 months ago)
song: Crypttic Sorrow-Meditation & Relaxation & Healing Music
Salmi Bilal (2 months ago)
it was very wonderful , keep going ,thank you
Duc Pham (2 months ago)
sorry, but i don't understand why you code border:0; border: ...;. so what does first code mean? thanks!
Hannabery HVAC (2 months 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 (2 months ago)
could I get site with a code?
sujon plus 360 (2 months ago)
Gamers NL (2 months ago)
Can u also do this on notepad++?
Andris Paralax (2 months 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 month ago)
Andris Paralax https://youtu.be/vFKHPHQ__5Q
David Martinez da Silva (2 months ago)
Thank you, bro! Do you think this code will work perfectly in responsible web sites?
Usman Ashraf (2 months ago)
you are awesome buddy thanks alot to secure my grade
Nikola Matic (3 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 (3 months ago)
Muito obrigado, aprendi mais uma agora. Ótimo para usar esses efeitos.
Ansari Shaukat (3 months ago)
Pura nhu ban paya sir to plz reply me sri
Ansari Shaukat (3 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 (3 months ago)
Nice song hahahahaha
Abi bubi (3 months ago)
Superb video...tq so much its vry useful to execute tq once again
Lawakesh Patel (3 months ago)
Mr. Jr. (3 months ago)
Thank you very much bro! I´m from Brazil...
jemal mieso (3 months ago)
I want the most impressing php,css,js,html project!!
rishabh rawat (3 months ago)
Thanks for making the video!
kiruba karan (3 months ago)
Brother thank you so much you are training use full thank you so much
suriya (3 months ago)
*How to keep submit button in center*
mc160401621 Sumera (1 month ago)
text-align: center;
Heedo Park (3 months ago)
very nice, thanks
Hamza el bouti (3 months ago)
thinks a lot , i mad this form with flask and cefpython it looks solid rocks
sanket dhumal (4 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 (4 months ago)
Nice job bro!!!
xSuhlly (4 months ago)
can someone help me im trying to link to the sumbit buttom to a page but its not working
Anil Kumar Singh (4 months ago)
Sir iske Coding send kar dijiye
Drupal Dev (4 months ago)
I liked very much as a refresher. The Best and so is the Music
saulo souza (4 months ago)
That works perfectly. Thanks from Brazil.
Online Tutorials (4 months ago)
Welcome bro
Ng Jo-Yi (4 months ago)
tq.its helpful
Gin Michael Likan Somni (4 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... ????
Thanks you
tasya Revantara (4 months ago)
Mau download
Vitalis Mutovo (4 months ago)
add source coden pliz
Shekh Saifuddin (4 months ago)
I think u deserve more subscriber, keep it up bro....👌👌👌
Mohammed Hussein (4 months ago)
Thanks from Iraq
Mohideen Asraf (4 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 (4 months ago)
https://www.youtube.com/watch?v=BKhoo6RSEDU u get answer with this...
Nitesh Khatri (4 months ago)
Superb tutorial.
sasikala tholisam (5 months ago)
input type email its not floating text why?
Rafy sanchez (5 months ago)
Great job !
Rafy sanchez (5 months ago)
Github ?
Kaushik Bhowmick (5 months ago)
You are the best...
Kaushik Bhowmick (5 months ago)
I just love it...
Mac McCarthy (5 months ago)
Great form and "Happy Diwali" to you and yours.
Seneza Vedaste (5 months ago)
look great!!!
Sanjar Shaikh (5 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 (5 months ago)
very helpful
Shreya Ulligeri (5 months ago)
Plz provide with the code
Dream Floaty (5 months ago)
Userame... nice tutorial!
Raymond (5 months ago)
Oww. :valid smart
darshan hegde (5 months ago)
Bro use placeholders
Nabuko donozor (5 months ago)
How do i center the submit?
Aarr Ridho (5 months ago)
align:center; on your submit?
Bear Company (5 months ago)
You the best
Vijay Gaur (5 months ago)
shahinraj raj (5 months ago)
VMAJSTER (6 months ago)
AA A (6 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 (6 months ago)
Pointer-events: none; not working and my first text box text trasnsition continues. What I do
Mazhar Nazar (6 months ago)
share your background pic in link..?
Chapapa picarra (6 months ago)
my css for .box { } is not working weird
Silvia David (6 months ago)
This soundtrack made me watch the entire tutorial ;) loved it .
Anthony Kuci (6 months ago)
can I have the soundtrack please?
abhinesh nangla (6 months ago)
Jaime Ursua Jr.II (6 months ago)
Can I have your CSS?
Ryan Matos (6 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 (6 months ago)
Mühendis Matematik (6 months ago)
thank you man
Philippe Anglade (6 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 (6 months ago)
Beautiful, but this music is so sad ;)
Isaac Fernandes (6 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 (6 months ago)
Is it responsive on mobo devices?
indhu mathi (6 months ago)
Please make registration forms like this
Эд Лесничий (6 months ago)
2х and still slow...
HK_KING (6 months ago)
Pls put the source codes
Oluwaseun (6 months ago)
Why do you have two border property?
Willy Kimura (6 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 (6 months ago)
Is it responsive? ..
theu (1 month ago)
Rakibul Islam (7 months ago)
Thank you it's working.

Would you like to comment?

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