how to align html form : html form alignment in (2021) ComputerScience

yo guys what's up welcome to computer science knowledge and this is our and this tutorial you guys gonna learn how to align html form elements so let's dive right into that first of all i have to open my text editor and in this case i used sublime text so this is an empty file first of all we have to save it go to file save and let's save it on desktop and name it form.html save so let's get started from typing html and let's give it a title of form climate scandal the body now here uh let's uh let's place our farm in a dev so let's define a dev first with an id id of form close the dev and inside the dev we need to place our farm so farm and in here let's first let's first add a label let's name this label name and after this label let's uh let's place an input for that level so input the type of this input have to be text and the name have to be easily now let's copy and paste this a couple times this have to be your father name father name input and this have to be our phone number okay here the type of the input half of the text and this would have to be file name and here the input type have to be number we want to take the input from the user as a number so number and the name of the would have to be phone or phone number okay something wrong here we just mistyped the phone so let's save this changes and come to the browser here we have it but we don't want to be like that we wanted the form elements to place right and underneath of each other so let's just add a vr tags here we are tag here be our tag here and as well here you are android less canvas browser and there we have it now what are we going to do is we will align these labels like the second level takes more players than the first level or the second level takes more plus than the third one we want them to be just placed right in the same line under each other so how we can do that let's add some css for that style okay let's first target our labels now let's give it a width of for example 100 pixels and the labels have to be displayed in inline block let's see that all right that's pretty nice so let's give our farm a tile h2 and they this have to be login form and let's give it a submit button as well sorry and put the typo to be submit and the name have to be what submit as well ctrl s so let's give our farm a background of block to look like really nice so we placed our farming dev and that dev idea is far so let's select or target that form and let's give it a border radius of 10 pixels a background of black and new color of white so we can see that the labels which is right there that's pretty much but it takes all the whole depth let's give our div some width so that we can see only the background or form is black so width of let's give it 290 pixels might be good or enough yeah that's nice now let's give our farmer a little bit padding so we see a little bit uh extra space between the labels and the farm border again arm every padding of 5 pixels before pixels is right now let's target our forms title to be placed in the middle of the farm so that is an h2 let's target the h2 in our css form let's give it a text line of center let's check that's good and now let's give our inputs a little bit margin to find a little space between each other so again in level let's give it margin of 4 pixels let's check that if it is good okay that's pretty much nice now let's give it our supplement button to take the whole depth this whole definitely be taken by submit button okay let's give our submit button an ide first submit target that let's give it a width that's pretty nice now let's say let's give our submit button a little bit uh margin so we can see a little space between the input and our segment button give it a little margin of maybe 10 pixels check that that's pretty nice so as we go our summing button margin and the lift margin is 10 pixels so it's cam comes out of the dev so what we can do here let's just give it a margin top of 10 pixels they're gonna be nice okay that's pretty much nice okay that was everything about html formalite you can add any any other styles to farm as you can wish and thank you very much for watching and guys if you like this video please give it a thumbs up and please subscribe to my youtube channel because it's his support from you guys but i need your support indeed and of course if you want to see more of my videos in the future so then subscribe it of course subscribe to my channel so that you won't miss any of our upcoming videos thank you very much

Channel: ComputerScience

Views: 16,029

Rating: 4.825397 out of 5

Keywords: html form, html form alignment, html form elements alignment, align html form, php tutoria;, html form tutorial, css tutorial, computer science, computer basic, html coding, programing, html programing

Id: PkOinLG8878

Length: 10min 25sec (625 seconds)

Published: Sat Jan 30 2021