If you are a new HTML user and have doubt about the forms in it then you are on right place.
This blog explains the hierarchy of the html forms in very simple words.
Let’s start reading….
As we all know that Html is a hyper text markup language thus we use it for designing pages of the websites. We can use any text editor to write html codes. There are three important parts of HTML code: tags, elements and attributes. These are important one and you should learn them all during you training at HTML5 & CSS3 training institute in Delhi.
Its very easy language to learn. We write html code in tags.
There are two types of tags for example first is Container tag and second is empty tag.
Container tags consists so many tags like < html >, < head >, < title >, < meta >, < body > on the other hand empty tags contain < hr >, < br > tags.
Container tags have starting as well as ending tags but empty tags dont have any closing tag.
For better understanding see the example given below:
< html >
< head >
< title > Here is the main title of the page < /title >
< meta >Include the list of meta tags in this area < /meta >
< link / >
< script > You can add JavaScript code here < /script >
< style > We can write Css here < /style >
< /head >
< body >
For heading we use heading tags.
There are 6 heading tags are available in html.
< h1 >Main Heading like HTML Forms< h1 >
< h2 > Second Heading like Types of HTML Forms < /h2 >
< h3 > Third Heading like how to make HTML form< /h3 >
< h4 > Forth level heading< /h4 >
< h5 > We also have a fifth level heading< /h5 >
< h6 > The last one is 6th level heading< /h6 >
< p > Add the explainer content and points under this tag< /p >
< hr > <! hr is a empty tag. We use this horizonal ruler —>
< br > < !— br is also a empty tag. — >
</ body >
</ html >
There are other tags like
< table > , < form >, < frame >, < div >, < span >, < !DOCTYPE > , < a >, < address >, < article >, < aside >, < audio >, < b >, < blockquote >, < button >, < canvas >, < caption >, < cite >, < col > < colgroup >, < details >, < dl >, < dt >, < fieldset >, < fieldset >, < figure>, < footer >, < header >, < img >, < main >, < map >, < mark >, < meter >, < nav >, < ol >, < section >, < strong >, < summary >, < sup >, < svg >, < tfoot >, < th >, < thead >, < time >, < ul >, < var >, < video >, < wbr > etc.
We can add images, video, audio and form in our web page by using all these tags.
There are many features or we can say elements available in Html.
In this blog we are going to describe about most important element which is “Form element”.
Now u think, why form?? I’ll tell u why.
By using FORM in html we can communicate with our customers & take feedback. Any person can connect with us by filling form. Now u can understand its extremely powerful attribute.
There are many elements in its controls are like the < input >, < select >, < textarea >, < fieldset >, < button > for performing a click action, and < label > for describing other. With the help of these element we create beautiful form.
Now I am going to show you how to use form tag for our web pages. This will be useful for you in speeding up your learning during web design courses in Delhi.
So, how do we start?
We need to write code by using form tags. Please see below form details.
< div class=“wrapper” >
< h1 >Contact Form< /h1 >
< form action="" method=“post” id=“contact-form” >
< ul >
< li >
< label for="" >Name< /label >
< input type=“text” name = “name” placeholder=“name” >
< /li >
< li >
< label for="" >Email< /label >
< input type=“email” name = “email” placeholder=“Email” >
< /li >
< li >
< label for="" >Password< /label >
< input type=“password” name=“password” >
< /li >
< li >
< label for="" >Phone< /label >
< input type=“tel” name = “phone” >
< /li >
< li >
< label for="" >Gender< /label >
Male: < input type=“radio” name = “male” >
Female: < input type=“radio” name = “female” >
< /li >
< li >
< label for="" >Date of Birth< /label >
< select name=“dob” >
< option >Date< /option >
< option >01< /option >
< option >02< /option >
< option >03< /option >
< option >04< /option >
< option >05< /option >
< /select >
< select name=“dob” >
< option >Month< /option >
< option >January< /option >
< option >Feb< /option >
< option >March< /option >
< option >April< /option >
< /select >
< select name=“dob” >
< option >year< /option >
< option >1998< /option >
< option >1999< /option >
< option >2000< /option >
< /select >
< /li >
< li >
< label for="" >Hobbies< /label >
Cricket: < input type=“checkbox” name=“cricket” >
Badminton: < input type=“checkbox” name=“badminton” >
Hockey: < input type=“checkbox” name=“hockey” >
Ludo: < input type=“checkbox” name=“ludo” >
< /li >
< li >
< input type=“submit” value=“submit” name=“submit” >
< input type=“reset” value=“reset” name=“reset” >
< /li >
< /ul >
< /form >
< /div >
After coding save your file with .txt extension. I hope now you learn how to add form in our webpage. If you are very fresher and want to learn everything from beginning then you should join web development institute where experts provide training of popular programming languages.
It is also recommended to join a complete full-stack web design course in Delhi as well as web development course in Delhi to learn both front-end and development-course process.
