To anyone who still gets a border on the input element after setting border: 0; browers have a default outline value which highlights cells when tabbing through. You have to set outline: 0; on the form-inputs as well.
Hi Kevin! I didn't really watch this tutorial to learn as much as to do... I'm going to mix this with an mmtus tutorial on how to code the back-end. Once I have a functional form, I'm going to expand and begin messing with your form, so I think I'll keep your format until I add a lot more sections! Learning will happen once I start breaking down a lot of those pseudo elements :) I did not know about the initial value! That is what I learned, as well as great fallbacks such as "justify-content: center;" and lastly, I got a refresher on how to fill left and right flexes with "flex-direction: column". Thanks!
Hey there - rather than use (semantically empty) s to contain your inputs, why not wrap them in s? Better accessibility, no need for the ARIA attribute... Otherwise, all really nice.
Since I don't have any text for the labels, having a label in there wouldn't really be more semantic. It's good practice to have labels for sure, but many designs these days don't have them, so this is an alternative approach. If I did have a label, as you said, I wouldn't need the ARIA then. I could code it up so that the label replaces the placeholder (and not have a placeholder), but it would be a lot more coding and work without any real benefit (from my understanding).
funny that so much people don't know placeholder. Good to teach them ;) I was more intrigued by the flex-grow in a form item and maybe an idea of adding in the media 550px a right border to the first item to clarify that there are two items.
it's interesting to see HOW you get to the form, as much (or more) as the specific code you use to get there. Just to learn how you think as you design.
Hey. Odd question maybe, but what is your Prettier settings for formatting? Like, mine tends to put input on it's own line, followed by type="text" on it's own line, then id etc (basically every one of them) in their own line, as opposed to here in this video where input type and class are on the same line.
You're great Kevin. You always come up with new techniques to use. Special when it comes to css and how to code up different designs. Thanks, so much for your work. :D
*Css:* `.page-form input{ Border: 1px solid #eee; Border-left:10px solid; Border-radius:15px; Transition: border-color .5s ease-out; } .page-form input:optional{ Border-left-color: grey; } .page form Input:required{ /*changes color from red to green when form is written correctly */ border-left-color: green; } .page-form Input:invalid{ border-left-color: red; /*Can be any variation of color on all 3*/` If you're using something like bootstrap or materialize you might have to put !important on some of those rules A cool trick for forms is to take the Note my syntax might not be 100 because I'm writing on mobile instead of directly copying my working code, but . This trick below is pretty cool . /*makes forms rounded and makes shape at beginning of input that changes color , kind of like css drawing with borders*/ Edit : add transition on `.page-form input {}` ------------------------- *Css:* `.page-form input{ Border: 1px solid #eee; Border-left:10px solid; Border-radius:15px; Transition: border-color .5s ease-out; } .page-form input:optional{ Border-left-color: grey; } .page form Input:required{ /*changes color from red to green when form is written correctly */ border-left-color: green; } .page-form Input:invalid{ border-left-color: red; /*Can be any variation of color on all 3*/` If you're using something like bootstrap or materialize you might have to put !important on some of those rules
Have been trying to design the best sign up / login forms over the last week. Have some pretty great designs now it's onto validation then DB and back end parts Cool we are working on the same thing, might have to hop back in the discord
Kevin, in chrome the form-input:focus::placeholder{} creates a highlight box around first name and email unlike that in firefox. any suggestions on how to correct that? thank you and you are amazing at this.
Hi Kevin, I notice you use top and bottom padding on your buttons, which I used to do until I saw a talk on youtube about accessibility and the chap said to use line-height instead due to people bumping up the font size (ctrl +). Wish I could remember which talk to share it with you. Also, do you think a border on the input would work instead of having the extra html markup to support the pseudo element?
border could work, but gives us less control and is more linked in with the padding. I wouldn't mind seeing that talk, but if you set the padding in em, I don't see why it would be an issue as the padding would grow with the font size? I find using line-height is a bit more "hacky" because in any other situation it could fail, as if the text gets longer and falls on 2 lines you're in trouble. I realize this wouldn't happen in a form like this though.
@@KevinPowell Oh my goodness, it was quite a long time ago I saw that video and it must have been back when all we had to work with were pixels and percents. And yes, it was a hack to work around that fact. Thankyou for that wakeup call Kevin, with things changing over time, every now and then one has to reassess "why am I doing this this way again?"
Excellent video as always :) I like how you seem to design your code in the videos like everyone else, dynamically and making changes (and some misses) as you go :) Seems far less orchestrated in advance as many others out there. Question though, are you deliberately not using Live server in vscode so that we'll see more clearly each time you update the webpage, or do you rarely use it? As you know, using Live server, all you have to do is save the code and the webpage updates automatically.
I have live server, but I usually have BrowserSync running in the background and ran into an issue with it with this video and couldn't be bothered to figure it out, lol. I normally have live updates going :)
Thank you. Will there be a tutorial on how to make this form work? I mean - so that a user can enter his name and email and the admin would get it to his admin-owned email address?
Nope, I'm not much of a backend guy... I could look at integrating it with something like MailChimp or a similar service though. I personally use MailChimp, so that's the direction that I'd lean.
For reference to what I was posting alligator.io/css/styling-form-input-validity/ Drawing borders on the left side of form inputs and making them change color
Hi Kevin! We love your work. We are just curious how do we add/incorporate good Security practices/coding into our custom Signup and Contact Forms for our website vs generic forms. We are doing a new site update in-house, and our new forms are being custom built, and while we already have the validation and google invisible recaptcha being added, what additional methods would you recommend to avoid spam or re-submits by bots etc? Any tips on this subject would be greatly appreciated. We understand you're busy so no worries if you can't respond to this post. Keep up the great works! Always helpful and thank you! :-)
That was a really nice video to watch, thank you @Kevin Powell After I added some colour to my background in the body{}, I could see the background colour through the gaps that appeared in the form. So to fix this, I added a white background to the form{}. body { min-height: 100vh; display: grid; place-items: center; font-family: "PT Sans Narrow", sans-serif; background: linear-gradient(to left, #c2e59c, #64b3f4) } form{ display: flex; flex-direction: column; box-shadow: 0 0 30px rgba(0,0,0,0.2); border-radius: 20px; overflow: hidden; width: 80%; max-width: 300px; background: white; } I wonder if there was another way to fix this issue. Thank you for the great tutorial @Kevin
Just out of curiosity, since you are using VS Code why not use Live Server? It's much easier than having to refresh all the time. EDIT: Now that I look you have live server installed. I just don't know why are you refreshing all the time, shouldn't it do it automatically?
you should check all the pseudo elements in the mozilla website, you'd be surprised what there are. Apparently there's a pseudo element (or class ? forgot) to select the first letter.
@@soniablanche5672 : Until now; I am learning BackEnd Development, but I like to know about FrontEnd too. Anyways, Thanks for your comment Sonia, I'll check MDN, and thanks again. 😍
Experience is a big part of it. I still go back and forth from CSS to my HTML when I'm making big projects and changing my HTML, adding a div or changing the structure a little, but the more experience we have doing that, the more you anticipate what you'll need before you start on the CSS. I also do a rough build on videos like this so I have a better idea going in. I like keeping my longer builds more "rough", so if you watch my full page builds, you'll see a lot more back and forth. On short things with a single purpose I prefer to have them more polished so it doesn't drag on :)
hello Kevin, do you know if I can install Emmet extension in dreamweaver? Emmet is real so flow. Thanks. I installed vscode. makes me so happy work with it. Thanks.
@@KevinPowell Thank you Kevin, I tryed. it works. Since I start using VScode, no more time for dreamweaver. thank you for the info of extention live server. works so well. thanks alot.
I accidentally deleted it when I was getting thigns ready, which is also why my browserSync wasn't working! You don't actually need the head or body tags, the browser will put it in there automatically... Google's styleguide actually recommends this (and ommiting a lot of closing tags), as the browser will fix those when it renders the DOM. I'm not a fan of that myself htough.
Perhaps somebody can give me some advice here. I'm about to create a page for a journalistic project and I wonder how to include larger text phrases on it. Because until now for some precoded headlines or headlinestyles we can write it in html but imagine to have a whole report like about 20 pages... How to implement that without adding millions of subsequently... Thanks a lot.
I'm not 100% sure I understand the question. You can put space under any tag by using margin-bottom.... but I'm wondering if you're asking something different. It might be easier to have a conversation in the community, check the link for it in the description
@@KevinPowell Thanks for responsing. It's just about including text in elements. But when I have a report about 20 sites I don't think that we type all the text in the html site. Hence I ask for a solution to link a word data with the html file.
To anyone who still gets a border on the input element after setting border: 0; browers have a default outline value which highlights cells when tabbing through. You have to set outline: 0; on the form-inputs as well.
Kevin, you're an absolute legend! Thank you for consistently providing such great content. You have personally taught me so much!
Thank you teaching me the border red tip as a debugging tool.
Hearing from you every week is awsome. Thank you so much for sharing these stuff with us ,followers . Loves from Istanbul
Learned a few things that I was anticipating to research. Thanks!
I learned css for placeholder and last of type. Thanks for sharing knowledge. Waiting for next :)
Hi Kevin! I didn't really watch this tutorial to learn as much as to do... I'm going to mix this with an mmtus tutorial on how to code the back-end. Once I have a functional form, I'm going to expand and begin messing with your form, so I think I'll keep your format until I add a lot more sections! Learning will happen once I start breaking down a lot of those pseudo elements :)
I did not know about the initial value! That is what I learned, as well as great fallbacks such as "justify-content: center;" and lastly, I got a refresher on how to fill left and right flexes with "flex-direction: column". Thanks!
Thanks Kevin, always love watching your vids! I need to go watch your pseudo elements vids again :D
Hey there - rather than use (semantically empty) s to contain your inputs, why not wrap them in s? Better accessibility, no need for the ARIA attribute... Otherwise, all really nice.
Since I don't have any text for the labels, having a label in there wouldn't really be more semantic. It's good practice to have labels for sure, but many designs these days don't have them, so this is an alternative approach. If I did have a label, as you said, I wouldn't need the ARIA then.
I could code it up so that the label replaces the placeholder (and not have a placeholder), but it would be a lot more coding and work without any real benefit (from my understanding).
funny that so much people don't know placeholder. Good to teach them ;)
I was more intrigued by the flex-grow in a form item and maybe an idea of adding in the media 550px a right border to the first item to clarify that there are two items.
I definitely learned something Kevin! Thanks a bunch.
Great Video Kevin thanks! I am just learning flex and you explained what you are doing very well.
it's interesting to see HOW you get to the form, as much (or more) as the specific code you use to get there. Just to learn how you think as you design.
Hey. Odd question maybe, but what is your Prettier settings for formatting?
Like, mine tends to put input on it's own line, followed by type="text" on it's own line, then id etc (basically every one of them) in their own line, as opposed to here in this video where input type and class are on the same line.
Great video :) I did not know about the first-of-type and last-of-type selectors.
You're great Kevin. You always come up with new techniques to use. Special when it comes to css and how to code up different designs. Thanks, so much for your work. :D
Hey Kevin, as allways late in my viewing your vids; but allway enjoying them. Could you, please, make a video explaining the aria attributes.
I've got some things planned for that in the near-ish future :)
Super fun element. Great to see another video from you :-) I always seem to 1up my CSS game with you.
Please make a video on what's next. How to store those email addresses for the signup forms.
search php form tutorial
*Css:*
`.page-form input{
Border: 1px solid #eee;
Border-left:10px solid;
Border-radius:15px;
Transition: border-color .5s ease-out;
}
.page-form input:optional{
Border-left-color: grey;
}
.page form Input:required{
/*changes color from red to green when form is written correctly */
border-left-color: green;
}
.page-form Input:invalid{
border-left-color: red; /*Can be any variation of color on all 3*/`
If you're using something like bootstrap or materialize you might have to put !important on some of those rules
A cool trick for forms is to take the
Note my syntax might not be 100 because I'm writing on mobile instead of directly copying my working code, but .
This trick below is pretty cool .
/*makes forms rounded and makes shape at beginning of input that changes color , kind of like css drawing with borders*/
Edit : add transition on
`.page-form input {}`
-------------------------
*Css:*
`.page-form input{
Border: 1px solid #eee;
Border-left:10px solid;
Border-radius:15px;
Transition: border-color .5s ease-out;
}
.page-form input:optional{
Border-left-color: grey;
}
.page form Input:required{
/*changes color from red to green when form is written correctly */
border-left-color: green;
}
.page-form Input:invalid{
border-left-color: red; /*Can be any variation of color on all 3*/`
If you're using something like bootstrap or materialize you might have to put !important on some of those rules
Have been trying to design the best sign up / login forms over the last week.
Have some pretty great designs now it's onto validation then DB and back end parts
Cool we are working on the same thing, might have to hop back in the discord
that was a fun codealong, I wish I could better describe my learning, but it's so advanced for me it will take more time to settle.!!
Glad you enjoyed it :D
Kevin - whats your VScode setup? what plugins do you run??
I tried looking around but did not find a vid on it and went through some pages on your site, not find anything
Probably something I should do, maybe I'll put up an article this weekend for it, and eventually a more in-depth video later on.
@@bryphillips if you do alot of long javascript try bracket colorizer
Such a great teacher! Thanks for everything you do
try adding animation slide ...its cool
Kevin, in chrome the form-input:focus::placeholder{} creates a highlight box around first name and email unlike that in firefox. any suggestions on how to correct that? thank you and you are amazing at this.
You could style it... it's with "outline".
that did it. thanks!
Is it ok if you dont put classes or id's on semantic tags?
Great video. Can you please upload the code snippest?
css on the placeholders ???? I did not know that! #learnedsomethingagain
Remko Spaans #oneshot316
btw where did the tag go? lol
Hi Kevin, I notice you use top and bottom padding on your buttons, which I used to do until I saw a talk on youtube about accessibility and the chap said to use line-height instead due to people bumping up the font size (ctrl +). Wish I could remember which talk to share it with you.
Also, do you think a border on the input would work instead of having the extra html markup to support the pseudo element?
border could work, but gives us less control and is more linked in with the padding.
I wouldn't mind seeing that talk, but if you set the padding in em, I don't see why it would be an issue as the padding would grow with the font size? I find using line-height is a bit more "hacky" because in any other situation it could fail, as if the text gets longer and falls on 2 lines you're in trouble. I realize this wouldn't happen in a form like this though.
@@KevinPowell Oh my goodness, it was quite a long time ago I saw that video and it must have been back when all we had to work with were pixels and percents. And yes, it was a hack to work around that fact. Thankyou for that wakeup call Kevin, with things changing over time, every now and then one has to reassess "why am I doing this this way again?"
ooo very very good i always learn new things from you!!
Excellent video as always :)
I like how you seem to design your code in the videos like everyone else, dynamically and making changes (and some misses) as you go :)
Seems far less orchestrated in advance as many others out there.
Question though, are you deliberately not using Live server in vscode so that we'll see more clearly each time you update the webpage, or do you rarely use it?
As you know, using Live server, all you have to do is save the code and the webpage updates automatically.
I have live server, but I usually have BrowserSync running in the background and ran into an issue with it with this video and couldn't be bothered to figure it out, lol. I normally have live updates going :)
I learnt about the "first/last of type" bit :)
Awesome :)
Do you have this tutorial on codepen?
I learned so much!!!! THANK YOU VERY MUCH!!! :)
Thank you. Will there be a tutorial on how to make this form work? I mean - so that a user can enter his name and email and the admin would get it to his admin-owned email address?
Nope, I'm not much of a backend guy... I could look at integrating it with something like MailChimp or a similar service though. I personally use MailChimp, so that's the direction that I'd lean.
For reference to what I was posting
alligator.io/css/styling-form-input-validity/
Drawing borders on the left side of form inputs and making them change color
Oh I like that styling based on required and optional, and valid, super cool :)
Hi Kevin! We love your work. We are just curious how do we add/incorporate good Security practices/coding into our custom Signup and Contact Forms for our website vs generic forms. We are doing a new site update in-house, and our new forms are being custom built, and while we already have the validation and google invisible recaptcha being added, what additional methods would you recommend to avoid spam or re-submits by bots etc? Any tips on this subject would be greatly appreciated. We understand you're busy so no worries if you can't respond to this post. Keep up the great works! Always helpful and thank you! :-)
That was a really nice video to watch, thank you @Kevin Powell
After I added some colour to my background in the body{}, I could see the background colour through the gaps that appeared in the form.
So to fix this, I added a white background to the form{}.
body {
min-height: 100vh;
display: grid;
place-items: center;
font-family: "PT Sans Narrow", sans-serif;
background: linear-gradient(to left, #c2e59c, #64b3f4)
}
form{
display: flex;
flex-direction: column;
box-shadow: 0 0 30px rgba(0,0,0,0.2);
border-radius: 20px;
overflow: hidden;
width: 80%;
max-width: 300px;
background: white;
}
I wonder if there was another way to fix this issue. Thank you for the great tutorial @Kevin
I think that's the right solution in this case :)
Just out of curiosity, since you are using VS Code why not use Live Server? It's much easier than having to refresh all the time.
EDIT: Now that I look you have live server installed. I just don't know why are you refreshing all the time, shouldn't it do it automatically?
At 22:30 you can't just use
flex: 1 2;
Or flex: 1 3; ?
Amazing work Kevin, I love your videos!!
Even flex: 1 1; would work, since it would set the grow to 1 :)
It is my first time to hear about "placeholder" pseudo element. 😁
Keep going brother, You're Amazing. 👌
you should check all the pseudo elements in the mozilla website, you'd be surprised what there are. Apparently there's a pseudo element (or class ? forgot) to select the first letter.
@@soniablanche5672 : Until now; I am learning BackEnd Development, but I like to know about FrontEnd too.
Anyways, Thanks for your comment Sonia, I'll check MDN, and thanks again. 😍
Yup, we have a ::first-letter too :D
I should do a video on all the pseudo-elements. Also, MDN is the best :D
@@KevinPowell: This is for "Newsletter" like design, I heard about it before. 😂
Yes, do it pleases; It'll be Awesome as usual. ✌
How do you decide how many divs to make and where they go I can't get my head around it.
Experience is a big part of it. I still go back and forth from CSS to my HTML when I'm making big projects and changing my HTML, adding a div or changing the structure a little, but the more experience we have doing that, the more you anticipate what you'll need before you start on the CSS.
I also do a rough build on videos like this so I have a better idea going in. I like keeping my longer builds more "rough", so if you watch my full page builds, you'll see a lot more back and forth. On short things with a single purpose I prefer to have them more polished so it doesn't drag on :)
Awesome job Kevin
yep... the line doesn't show up for me . Can you please link your code ?
I'll try to remember to put it up, don't have it on me at the moment as I'm on mobile.
hello Kevin, do you know if I can install Emmet extension in dreamweaver? Emmet is real so flow. Thanks.
I installed vscode. makes me so happy work with it. Thanks.
If you're on Dreamweaver CC, Emmet comes installed.
@@KevinPowell Thank you Kevin, I tryed. it works. Since I start using VScode, no more time for dreamweaver. thank you for the info of extention live server. works so well.
thanks alot.
amazing amazing amazing !!! 🤩🤩🤩
Sir one video on bootstrap advance clases
I don't think I'll be jumping back into Bootstrap any time soon, sorry :\
what is the easiest way to remember the code???
Writing *a lot* of it :)
Wait... Where is body opening tag?
I accidentally deleted it when I was getting thigns ready, which is also why my browserSync wasn't working! You don't actually need the head or body tags, the browser will put it in there automatically... Google's styleguide actually recommends this (and ommiting a lot of closing tags), as the browser will fix those when it renders the DOM. I'm not a fan of that myself htough.
@@KevinPowell okay 👍
Very nice!
Superb
Perhaps somebody can give me some advice here. I'm about to create a page for a journalistic project and I wonder how to include larger text phrases on it. Because until now for some precoded headlines or headlinestyles we can write it in html but imagine to have a whole report like about 20 pages... How to implement that without adding millions of subsequently...
Thanks a lot.
I'm not 100% sure I understand the question. You can put space under any tag by using margin-bottom.... but I'm wondering if you're asking something different. It might be easier to have a conversation in the community, check the link for it in the description
@@KevinPowell Thanks for responsing. It's just about including text in elements. But when I have a report about 20 sites I don't think that we type all the text in the html site. Hence I ask for a solution to link a word data with the html file.
Nice video 😁
awesome
Hi love your videos, please come with complete website(like instagram.com/fb) building tutorial, with both front end (HTML,CSS, JS)and back end(PHP)
I don't do backend, so I won't be doing that any time soon :) - I'll do more front-end full builds though :D
😂