How to make form in Tailwind css?

Welcome to our tutorial in this video we will guide you through the process of creating a responsive and modern form using the powerful utility first CSS framework the Tailwind CSS we will cover everything from setting up your project to styling from elements and adding interactivity so let's dive in and start building our form I already have set up and installed Tailwind CSS in my computer this is a basic setup that you can see with the empty index.html and if you want to learn how to set up Tailwind CSS I already have made a video about that in my playlist so you can just go there and watch and learn so once you have your project ready you can start from here so here you can see we have a package.json where we have the Run command you just need to run this and PM run run and this will basically run this command that is required to run the Tailwind csseli in the watch mode so it will continuously watching the changes in the input.css file and it will build in the distort this folder with the name output.css file other than we have the empty the basic default tailwind.config.js file and this is the empty input.css so let's begin so very first thing is that we have to start this website in the browser so I'm running it right now this is empty I will add the background color as the first step so BG Gray this okay the background color has been added after that we need to create a card for the login so let's do that so very first thing that I want is BG White that is a background white color and then I need rounded corners and also that I need shadow and I also need a width of maybe 400 pixels and height of 400 pixels okay you can see it is visible now I also need to bring it in the middle in vertically and horizontally for that I will add Flex to the parent that is body in our case uh justify Center and item Center and we also need to set the height for the body to H screen so it will take all of the height that that is equal to the screen all right maybe we need we should decrease the intensity of the gray okay now let's add the label that is username and also we need to add the input as this is a password so type should also be the password obviously okay this is how it looks like right now we have to improve it a lot so for that I first of all I need some padding in my parent of these inputs so for that I will add p six and then I will add a class here bold or font okay and we also need to add display block so that it could take all of the space in this in its row so for that add this block and now I need to add styles to the input but also we have to add the margin bottom below the label so we need to add rounded shape here and the Border should be solid and border color should be Gray foreign whatever suits better I also need to add the Box shadow so I think we should wrap it in another div so that it can stay in its own area here I will add class MB 5 okay perfect now I need to add some padding in the input so p x should be I guess five and P Y should be 3 R 2 okay and I want to set the width to 100 so for that I will use f w Dash full also we need to add the block property so that we could add the width otherwise width would not work and after that everything else I think is correct now we can simply copy paste this one so I will remove it and we will copy paste this so that we could reuse the same designs so okay the type should be password in this case like before all right after that we need to add the sign in button and BG so let's try this one and the text should be white and P X should be 4 mpy should be 3 I guess uh I think p y should be 2 and P X should be 5 and it should be rounded okay now we also have to add the hover effect so we need to change the background color if user hovers on this button okay and on the right side we need to add the forgot password link foreign and we need to push it to the right side for that I will add flex and just E5 between okay also I will change the colors for the link and maybe we need to make it bold also we should add some margin top other than that we need to decrease the height of the login form so earlier we gave it the fixed height so maybe we can try to give it the minimum height foreign and I guess we need to increase the padding now we will implement the validation with the help of JavaScript so JavaScript is not part of the this tutorial so but main focus is the design by using Tailwind CSS but I will really quickly try to add the validation so that we could display the color so for example I can design the error message and the color there should be a red border around the input if it is invalid so for example I can add border red and this way we can show this border and we will show the error message below it so let's do that and to make that possible I am just quickly going to create a script tag here and we will create a function submit so whenever somebody clicks on the submit function button then this function should be called and then we we will get the username property a username input for that I will use document dot get element by ID username and similarly we need to get the password input so I can create a separate function for validation for example function validate form and I can move all of this in this and here I can just call the function validate form so foreign check if username is not found or empty for example Dot value then return false okay if any value from any of these inputs is not found empty then we should written false so that we could use it here so if validation form is true then we will show an alert valid okay after that let me add it in a square bracket so that we could add further condition nested conditions in this for that I will use if not username dot value if user name is invalid then we need to show the border around that username input so let's do that class list dot add actually we need to remove the existing border color so for example so this is the existing border that we need to remove and instead of that we will add a different class username dot class list dot add and here I will add border red 700 maybe let's try this one first actually here let me add the reverse action as well so if everything is valid then I will simply add this border back and I will remove this powder so let's try it it is not working because we never add the submit function on the click event so on click let's try it now now you can see that this form input was invalid that's why now the border is being shown if I fill something and hit the sign in button again then it should remove the Border but it is still not removing so let's see what is wrong here so let me alert the value right now it is empty I click on that but okay so actually when it is valid then it will never come in this section I'm just trying to see if there is any error yes I can see there is an error so it is saying that password is not defined so why is that we have the password with the capital P that's why it was not working foreign we should do this thing for example if username is valid then we need to remove the error border and we need to add the normal border back okay and maybe we should use the 500 shade of red and we don't need the else here okay similarly I will copy paste this for the password as well and similarly I will remove the border for the password let's try you can see now it is showing the border on both of these inputs now I have added the data if you click on that it should remove the Border it did not remove for the password yet the reason is that I did not duplicate correctly now try it again uh uh sign in type something type something hit the submit button and the Border has been fixed other than that I also want to display the text message below the input so if there is something wrong then there should be a text that would indicate that what is wrong so for that here I will add another div and please or you can say username is invalid and here I can give it an ID user name error okay and now I need to add some classes to design it for example mt5 and text should be small or maybe extra small and the color should be red okay and the font should be bold foreign [Music] okay so similarly I need to add the same kind of element below the password so here I will add password by default we can display it none so for example invisible so by default this error would not be visible but it should be visible only if there is another there is an error okay now here if there is a username error then I want to actually let me copy paste this the username error password error okay so if there is a username error then I will simply use a username error and I will get the class list and I will remove the invisible class okay if I remove the invisible class then it will be then it will automatically show the element password error and actually we should add yeah so so we should add the invisible class again if error has been removed so I will use the add function here instead and here as well okay now let's try it again uh by the way I can still see some space so maybe we should not use the invisible because invisible just yeah we should we should be using the hidden instead of invisible otherwise it will be taking the white space so here as well okay now you can see spacing issues fixed now hit the sign in button you can see that we their error message is visible if I type something hit the silent button again it should remove it but it did not we should not return from here that's why it was not working correctly actually in the bottom we should check if so we can just return username dot value or and use a password Dot value so if both are valid then we should return true otherwise it will return the false so let's try it now if I fix it then the error should be gone and if I fix this one then it should show the valid message in the alert alright that's it I wanted to show in this video I hope that you found this tutorial helpful if you did then please don't forget to hit that like button and consider subscribing for more awesome web development content and if you have any questions or if you want to share your Creations then drop a comment down below and contact with me on my social media platforms until next time keep coding and stay curious

Channel: AyyazTech

Views: 1,436

Keywords: CSS Frameworks, Form Design, Frontend Development, Interactive Web Forms, JavaScript Form Styling, JavaScript Form Validation, Modern Web Development, Responsive Forms, Styling Forms, Tailwind CSS, Web Design Tutorial

Id: 9v2XetUoL4c

Length: 22min 9sec (1329 seconds)

Published: Sun Aug 20 2023