 So, hey guys welcome to the course. In this video I will show you how you can set up your environment for html development. So, for writing html code you need two things. The first thing is the text editor where you will write all of your code and the second one is the browser where you will display your page. For the text editor I will use the vs code and for the browser I am gonna use the google chrome browser. I will give the link of both of the software in the description of the video as well as in the resources file after the video. After you have downloaded and installed the vs code just open it. Now if you open the vs code for the first time you are gonna see this window right here. Here you will see multiple options like creating a new file or opening a file or opening a folder. So I want to create a new project. Now for creating a new project I need to create a folder where we will be creating all of our files and folders regarding the project. So let's go and create my folder. I am gonna create it on my desktop. You can create wherever you want. Just double click on your pc and then new folder and in here you can give the name of your project. So I am gonna give it the new project, new project. See my project has been created. Now let's open up this in the vs code. Now for opening this folder in vs code you have multiple options here. You have the open folder option here also here and on the top right corner top left corner you can see I also have the open folder option but what you can also do is you can just drag and drop your folder in vs code to open it. Let me show you how you can do that like this and drop it over here. Just wait a bit and it will open up your folder in the vs code. Just make it larger. Now here you can see my project has been opened in the visual studio code. Also here you can see new project. So that indicates that my project has been opened. So how we can create a new file inside the vs code. Now you have several ways of doing this. You can create it from here or you can create it from here or you can also double click here to create a new file. So let's create our first file which will be the index.html. Now I named it index because this is gonna be our home page. So this is gonna be our main file. So our main file of the project of the HTML project will always be the index and we are creating the HTML file. So we must use the extension .html here. So congratulations you have created your first HTML file. Now I will see you guys in the next video. Hey guys in this video we will learn the introduction to the HTML. So what is HTML? HTML stands for hypertext markup language. HTML is the code that is used to structure a web page and its content. It is not used for designing the elements. It just provides a skeleton to the web page. For designing our web page we use the CSS which we will talk more about in the CSS module. So the HTML element consists of three elements which you can wrap your content to make it appear a certain way or do certain things. The main parts of the HTML is the opening tag, the content in between this tag and the closing tag. The opening tag consists of the name of the element and the opening and closing angle brackets. So these two brackets are called the angle brackets and you also have the closing tag. Closing tag is similar to the opening tag but it has the forward slash before the name of the element. Whatever you will write or type here will be shown in the browser and these tags won't be visible in the browser and you also have the attribute for your elements. The attributes contain extra information about the element that you don't want to show in the actual content. The attributes consist of three things the name of the attribute and the equal sign and the attribute value wrapped in opening and closing quotation marks. What you can also do with HTML is you can nest the element inside another element like this. I'm typing the span tag in the p tag. You can see write whatever you want and let's delete that. You can see I have nested the span tag inside my p tag. So this is called the nesting. So if you are wondering what is the meaning of these tags so just don't worry we will talk about them in details in the upcoming lectures. For now this is it for the video. I hope you guys learned a lot from this. See you guys in the next tutorial. So hey guys in this tutorial you are gonna learn about the complete structure of the HTML document. So the first thing we use when writing the HTML document is the dog type declaration. So how you can declare the dog type declaration. It is quite simple just hold the shift button on your keyboard and the opening angle bracket. You can see the visual studio code is giving me the suggestion just click on the suggestion and the visual studio code has inserted the dog type declaration for us. Now this declaration defines the instruction for the browser about what version of the HTML the page is written in. Dog type HTML means we are using the HTML5. So this is the first thing that you must declare in your document. There is nothing more special about this element so let's move on to our next element which is the HTML element. Now how you can type the HTML. It is quite simple just type the HTML and you can see the MF is giving me the suggestion just click on the suggestion and the MF has inserted the opening and closing tag for me. Now this element is known as the root element of all the elements in HTML and this is the parent of all the elements of HTML. That means all other elements you are gonna type will be the descendants of this element. The HTML tag tells the browser that this is the HTML document. The HTML element has two direct child elements. The first one is the head element. The head element acts as a container for all the stuff that you want to include in your web page but you don't want that stuff to be displayed on your web page. The head element contains machine readable information about the document for example the meta tag which provides the important information about the page for search engine optimization but the user of the page can't see that it is only for search engine. The permitted parent for the head element is the HTML element that means no other element is allowed to be the parent of the head element. Now we have several other HTML elements that are child of the head element. Now there are several child elements of the head tag. I will show you the usage of these elements later when you have good knowledge of HTML. These are not important for you to understand in the beginning but let's just talk about the element that is necessary for you as a beginner and that is the title element. Let's write the title. Now the title element sets the title of your page which is the title that appears in the browser's tab the page is loaded in. Now let's open the Google Chrome browser with the live server. Just click here on the go live button on your IDE. Now let's go to the browser. You can see my title is displayed here on the tab. Now let's move on to the second child of the HTML element which is the body element. Let's go to the visual studio code and create a body here body click on the suggestion. Now the body element contains all the content that you want to show to web users when they visit your page whether that's the text or images or videos audio etc. So let me show you the example with the paragraph. Let's create a paragraph now let's check in the browser you can see my paragraph is displayed on the page so that's pretty much it for the video. So hey guys in this video we are going to talk about headings the paragraphs and some other elements. So let's start off with the headings. First of all let's declare a proper html structure just hold just hold the shift and press the exclamation sign on your keyboard and you can see emet is giving me the suggestion and if I click on the suggestion it will give me the proper html structure I was looking for. Just don't worry about these meta tags because these are not necessary for you to understand in the beginning. So without wasting any more time let's start off with the headings. Heading elements allow you to specify that certain parts of your content are the headings or the subheadings just like in books you have the main headings or and the subheadings and we you have the paragraphs. Similarly in html you can have these two html contains six heading elements the first heading is the h1 which is the most important one and the last heading is the h6 which is the least important one. Now these headings are used to index the structure and the content of your web page you should use the headings as the main title of your page and then you should use the top level headings which is the h2 so the h1 is this is main heading and then we have the top level heading which is h2 and then we have the h3 which is the subheading and then you can also use the h4 h5 and lastly we have the h6 now let's go to the google chrome browser and check how these headings are displayed you can see i have already opened this page in my google chrome browser so let's go and check the and you can see this is the result of all our headings that we typed in our visual studio code like i said before we also have the paragraph elements in html document the paragraph elements starts with p tag so let's go to the visual studio code and then type p you can see amit is giving me the suggestion just click on the suggestion and type here something and now we have typed the paragraph element so let's check in the google chrome browser you can see my paragraph is displayed as a normal text in the browser now what if i add spaces in between the paragraph will these white spaces render in the browser the answer is no the reason why is because the html is white space collapsed it ignores all the white spaces and line breaks that you put inside all of the html element but if the white space is really needed for example if you want to show a poem in your html document then there is one element that can help you with this and this is the pre element so let's go to the visual studio code and type the pre element just type pre and you can see amit is giving me the suggestion click on the suggestion now the pre html element represents pre-formatted text which is to be presented exactly as written in the html file white space in this element is displayed as written it preserves both spaces and line breaks so let's type something random here with spaces and line breaks and see the result in the google chrome browser for typing something random we use the lorem l-o-r-e-m and type the five because we want five words and then press enter and just copy that five times or three times or four times white spaces white spaces and line breaks and white space here also here and let's check in the browser you can see my white spaces are rendered in the browser as well as my line breaks are rendered in the browser now what if i add the white spaces and line breaks in my other html elements like the headings elements and the paragraph elements what do you think the result will be so let's check in the visual studio code i am pasting the first line with the one element with the h2 element also h3 and paste all that in h4 also in the p element now let's delete this pre and check what will be the result you can see none of my white spaces nor the line breaks are rendered and there is also a way of doing this in the css which i will show you in the css lecture module but if you don't want to show the point or something like that and your objective is only to add a line break then you can use the br tag so let's go to the visual studio code and add a br tag let's delete that i'm creating the p element this is a paragraph with line breaks let's see so let's check the output in the browser you can see my paragraph is displayed without any line breaks so let's add line breaks in it i want to add a line break here so what i will do i will type br you can see it is giving me the suggestion yes br and i want another line break here br now let's check the result in the google browser you can see the line break is added here after the a element and also the after the paragraph element like we did here you can see i added the line break after the a tag and also after the paragraph tag and you might have noticed that i did not give the closing tag for the br the reason for this is because this is an empty element you don't need to give the ending tag for this so that's pretty much it for the video i hope you learned a lot from this video now see you in the next video so hey guys in this video we are going to talk about the display property of css so what is the display property the display property specifies how your element is displayed every html element has a default display value depending on what type of element it is even though we have so many display properties in html but we will cover them in the later videos but the default value for most of the elements is block or the inline so let's talk about the block level element first what is a block level element a block level element always starts on new wine and takes up the full width available it stretches out from the left to the right as far as it can okay let me show you the example of this individual studio code just create an h1 tag with some dummy text and also an h2 tag with some dummy text now open the page in google chrome browser by clicking the go light button and now go to the google chrome browser and here you can see even the text is not covering the whole page but it's still but it is still taking the full space from the left side to the right side and the text inside the h2 is not displaying in front of the h1 there is a lot of space left but still the h1 is covering the whole space that is available to it and adding a line break for the h2 element and the second level element we are going to talk about is the inline element an inline element does not start a new line and does not take full width available it only takes up as much width as necessary so let's take a look at the example of this individual studio code let me delete that and now create a small tag with the dummy text in it lower m 5 and also create a strong tag which is also an inline element and put some random tags here now let's open up the google chrome browser and see the results and here you can see my small tag didn't add a line break and didn't take any extra space instead they are displaying side by side in our hcml document let me add one more inline element for explanation but first let me clear one thing if you are wondering why i am not explaining all these tags i would say just don't worry because i will be explaining all these tags in the upcoming tutorials but for now just focus on the topic i am explaining so let's add an image using the img so let's go to the visual studio code create an image here using the img so let's specify the path of the image in the source tag i am a g image this is my image and also alternative text for my image this is image let's give the width and height to this image let's give it 300 pixels and also the height 300 pixels now let's just open up the google chrome web browser to check how it is displayed and here you can see my image is at the similar level as my text in the same line my text is not adding any kind of line breaks now let me explain you one more example with the combination of these inline and block elements so let's create a p tag which is a block level element and put some tags in it and also create an inline tag put some tags also here now in this example what i'm trying to say is that you can nest any inline element inside a block level element and that text will be displayed in the similar line because the inline element does not add a line break now let's check in the browser and here you can see this is my inline element and it is not adding any kind of line break in my block level element so i hope you understand that we can nest the inline element inside a block level element now let's nest the block level element inside the inline element just go to the text editor vscode and add the example here here you can see i have created an example with an inline element which has a block level element in it and let's now open the google chrome browser and check how it is displaying this you can see this is an inline element this is the line from the inline element and as soon as i added the p tag it automatically added the line break and here you can see my first line of the inline text is here and then you can see after the end i have specified the p tag and the p tag is starting a new line and covering all the available width on my webpage and then it is starting a new line for the existing inline text so that is it for the inline and block level elements see you guys in the next tutorial so hey guys in this video i'm gonna talk about four of the inline html formatting elements so the first one is the abbr so abbr defines an abbreviation abbreviation is basically the shortened version of something else like html usa or or eu abbreviation can give useful information to browser translating systems and search engines the title attribute is used with the abbr tag to show the description of the abbreviation when you hover over the abbr element so let's create a paragraph in which i will nest the abbr element create a p tag like this and type something here in this tutorial now let's wrap this html inside the abbr tag cut that abbr and here in the title attribute you can specify the full form of the abbreviation so let me type the full form of the html now let's go and check the output in the browser and here you can see it is showing me the shortened version of the html which i wrapped inside my abbr tag but when i hover over this you can see it is showing me the tooltip so this is the abbr element now moving on we have a b tag the b tag is used to draw reader's attention to the elements content this tag specifies bold text without any extra importance now let's create a b tag inside any bloke level element like in paragraph and enter some text like this is my blue car now let's wrap the word blue inside the b tag to make it bold and if i check this in the browser you can see my word blue is bold now if you want to show something important in your text it is recommended to use the strong tag let me show you both of these elements let's go to the visual studio code and type strong tag here type anything here like this now let's wrap the very in the strong tag and now let's check in the browser you can see they both look the same but the semantic meaning of these two tags is different from each other the strong element is for the content that is of great importance while b element is used to draw attention to text without indicating that it is more important over next element is the i tag so what is the usage of this i tag we use the i tag to write something that doesn't look the same as over other part of the paragraph such as some technical terms or a phrase from another language or a thought for example so let's go to the visual studio code and take a look at the example now i will wrap the i tag inside my paragraph so let's create that now let's wrap the homo sapien word inside my i tag if on the suggestion or enter and paste the text that you have copied here and now let's check in the google chrome browser you can see this shows the homo sapien part as italic text but you should use the css form style property if you want to style your paragraph as italic and the last element for today's tutorial is em the em element represents stress emphasis of its content that means when you want to emphasize something out of your sentence so let's go to the visual studio code create a paragraph you can see if i want to emphasize this now i should wrap this in my em tag now let's check the output in the google chrome web browser and you can see the output of this looks the same because they both are italicized but the meaning of using them is different so that is it for the video guys see you in the next one hey guys in this video we will talk about five more formatting tags of html so let's start with the video tag video stands for bidirectional override so it is used to change the current text direction of your content in the dir attribute you specify the direction of the text like rtl for right to left and ltr for left to right so let me specify the value for this as right to left rtl and now type some text here this is english text let's open this up in google chrome browser you can see it is written in the reverse form because we have changed the direction of the letters as well as the direction of the words you can see this is written in right to left direction and the words are also written in the right to left direction moving on we have the br tag so let's go to the video studio code and create a br tag inside a paragraph tag so the br tag is used to insert a single line break it is a block level element that means it covers the complete available space the br tag is a self closing tag which means you don't need to add the closing tag for this you can see here i didn't add the closing tag and now let's go to the google chrome browser and check the output you can see my br tag added a line break after the a element and now my paragraph is displaying on the second line you can see i have added the br after the a tag so here it is it has added a break after the a tag the br tag is useful for writing addresses and points let's talk about the address tag as the name suggests address elements are used to write the addresses in html document the text in the address element is rendered in italic and it is a block level element so the browsers will add a line break before and after the element so let's create an address element click on the suggestion now you can see my address tag is created so let's add some dummy data in it you can see i have added some dummy data with a bunch of line breaks and now let's check in the browser you can see my address is written in the address form like we see in websites or some other blogs now moving on we have the side tag the side tag defines the title of the work a creative work that could be a book a song a painting and so forth so let's create a side tag inside my paragraph tag in visual studio code let's go to the visual studio code so let's create a paragraph tag first paragraph and here i will create my side tag i will give the name of the work like the avengers and now write here the name of the writer now let's see the result in the google chrome browser you can see it is written in italic form and the last element for today's tutorial is the code element so let's go to the visual studio code and type code so the code element displays the content inside the tag as a chunk of code let me show you by writing code here and now let's see the result in the browser this is how the result of the code looks like so that is it for the tutorial guys see you in the next tutorial so hey guys in this video we will talk about some more inline formatting html elements so let's start with the kbd so kbd is used to define the input from the keyboard it is an inline element so that means you can have multiple kbd tags in one line to show any kind of input like the shortcut keys of any kind of software so let me show you through this example like ctrl and then here write plus and then another kbd control c and let's wrap this in a paragraph and now let's go to the browser and check you can see i have already opened my page in google chrome so let's go to the browser you can see this is how it displays the kbd element now moving on we have the mark tag so let's create the mark tag in visual studio code create a paragraph type some random text now i want to mark this paragraph so let's cut this control x add a mark element and now paste your text here you can see i have nested the mark tag inside my paragraph tag and now let's see the result in the browser you can see my text is highlighted like you do with highlighter on books now that's it for this element let's move on to our next element which is a block code element so as the name suggests block code is a block of code that is quoted from another source it is a block level element so it takes up the full space that is available to its parent element let's write the block code you can type any text here let me type the lorem text and now in the block code we also have the site attribute where we give the link of the source like zk.com this is a sample url so let's go to the browser you can see this is how the block code is displayed if you don't want to take the full space for the code and want to show the code inside a paragraph or if your quotation is short there is another way of doing that by using the q tag q is an inline tag and it is used for short quotations that don't require paragraph breaks so let's take a look at the example in visual studio code create a paragraph and type some random text and type q for quotation inline quotation and now let's check the browser you can see it has added the codes around the text in the q element so that is it for the tutorial guys i hope you learned a lot from this tutorial see you in the next one so hey guys in this video we are going to talk about some more formatting elements so let's start off with the span element so the span element is a generic inline container for phrasing content it can be used to group elements for styling purposes it should be only used when no other semantic element is appropriate the span is very much like the div element but div is a block level element whereas the span is an inline element the span tag provides no visual change by itself so let's write some text here let me wrap this inside my paragraph now paste it here now open your page with the live server you can see i have already opened so let's go to the google chrome browser and here you can see there is no difference in the paragraph and in the span element because span is only used for styling the text or styling some part of your element the span tag is used to group inline elements in the document once you grouped your text you can style it using the css so let me show you an example add a style attribute here add some kind of style css style like color and now i want my text to be red let's go to the google chrome browser and here you can see my text is red now i hope you understand the usage of span with this example our next element is time element it is quite simple to use just type time type anytime you want like 10 let's wrap this in a paragraph you can wrap this in whatever element you want now let's go to the browser and check the output for this you can see this is how the time element works next up we have the underline element this element is used to underline the text that is stylistically different from normal text or some misspelled words or it can be some word from another language so let's write the u tag u and let's write a misspelled word here like paragraph let me nest this underline element inside my paragraph element and now let's see the output in the browser you can see my paragraph is now underlined so that is it for the video guys see you in the next one so hey guys in this video we are gonna be learning about five more inline formatting html tags so let's start off with the strike through element the strike through text is rendered with a line through it that means we should use this for the text that is no longer correct accurate or relevant to the story you are telling let me show you this with an example so let's create a paragraph which is a low-level element and then nest this inline element inside that paragraph now for the strike through we use the s element click on the suggestion and type any text you want i'm typing my share is blue so this is our strike through text which is not correct and let's type simple paragraph here so this is my text that is correct and this is the wrong text that means my shirt is red not the blue one so let's check the output in the browser here you can see my page is opened in the 5500 on the live server so let's go to the browser you can see on my first line there is a line on my first paragraph and the second paragraph is the normal paragraph however s element is not appropriate when talking about something that is deleted we use d el tag for this let me show you with the example let's go to the visual studio code create a d el tag here and type anything you want i am typing the red let's go to the google chrome browser you can see there is no visual difference between this and this but the semantic meaning of both of these elements is changed so let's add this delete tag inside a paragraph with insert tag cut that paragraph my shirt is red and here i will add insert tag type blue or anything now what is this insert element the insert element is used to define which text is inserted in the place of deleted text so if i want to say my shirt is blue i will use the insert element because my this text is deleted text so let's go to the browser and see how it looks you can see my inserted tag is underlined it indicates that the blue is inserted in place of red moving on we have the small tag as the name suggests as the name suggests the small tag is used to display the smaller text in our content so so let me show you the example let's wrap this in a three tag type i am smaller so let's wrap the smaller text inside my small tag let's see the output in the browser you can see this text is smaller than the other one so this is the use of the small tag there is nothing more special about this and the last two elements are superscript and subscript so let's go to the visual studio code and create a superscript here with the normal text i'm gonna write a paragraph here i'm gonna write h and then i'm gonna write the two and then the o let me show you how you can transform this in a chemistry formula just cut that and create a subscript space and then paste that in here and remove the empty spaces now let's go to the google chrome browser you can see my two is displayed like this it is below the half height of the h and o so this is subscript let me show you example of superscript let's go to the browser enter and let's write anything you want you can see i have created the example of superscript it is the exact opposite of the subscript so let's go to the browser and check the output you can see my four is above the average height of the other letters of the abc so i hope you get the idea on how to use these two html tags so that is it for the video guys now see you in the next one so hey guys in this video you are gonna learn about the form element and its attributes so the form tag is used to create a form for the user input it can have multiple attributes and it can have multiple child elements so let's create a form tag first you can see the vs code gives me a default attribute so this is the action attribute so this action attribute specifies the type of method to submit the data with these methods are not necessary for us to because we are not going to work on server side you can ignore these attributes however we have some other attributes for the form tag like the autocomplete attribute just cut this attribute because we don't need it and add a autocomplete attribute now this autocomplete attribute specifies whether a form should have autocomplete on or off when autocomplete is on the browser will automatically show the values that you have entered before on some other websites in the input fields so let me explain you with an example let me select my autocomplete as off and inside my form element just add an input element and the type will be the text simple text and create a submit button here and in the value just give the name of the button let me also specify the name attribute for my input and here I will give the name as email now if you go on the browser and start entering something you can see it is not giving me any kind of suggestion because I have set the autocomplete off for my form element but if I set my autocomplete on for the form element it will automatically set the autocomplete on for all the child input elements so let's go to the visual studio code and set it to on and now if I go to the browser and start entering something here you can see it is giving me the suggestion about my emails now what now what if I remove the autocomplete attribute for the form element so let's check this and remove the autocomplete attribute from the form and now check in the browser if it is still giving me the suggestions and yes you can see it is still giving me the suggestions it gives you the suggestions for the values that you have already entered somewhere like the email or name or first name or last name it will give you the suggestion about these elements but if I change my input name to something else like the pet now it will not give me any kind of suggestions because I haven't entered my pet name anywhere else so that is the reason why it is not giving me the suggestions so let me show you another example of this let's change it back to the email and create another element with name now it is also possible to have autocomplete on for the form and off for some specific fields and vice versa now let's specify the autocomplete off for the form element and the value I'm going to select is off I want my email to give me suggestions so I will specify the autocomplete on for my email now let me also change the type of the input to email now let's check the result in the browser first of all you can see it is not giving me any kind of suggestion for my name and when I enter here you can see it is giving me the suggestions for my email and you can do the opposite and you can do the exact opposite of this you can set the autocomplete on for the form and off for the email and now if I check the in the browser it will give me the suggestion for my email oh sorry my name but it will not give me any kind of suggestion for my email so that is it for the autocomplete attribute now we also have the name attribute for the form you can see this is the name attribute so the use of this so the use of the name attribute is when you click on the submit button you can validate the data in javascript or do something else with your data and you can also select and style this in your css using the attribute selector and you can also use this to style the input element using the css using the attribute selector which we will be talking about in the css module and we also have the no validate attribute for the form it is used to submit the data on the server without validating it on the client side you will understand about this attribute when you work with the database so this is the usage of no validate now just cut this attribute and let's talk about our next attribute which is the target attribute the target attribute is used to display the response for the data that you submit by clicking the submit button to a new window or new tab or on the same tab let's take a look at the example select the blank here now just go to the google chrome browser and now if i enter some values here like this and if i click on this button it will open my response page in a new tab you can see it has opened my response page in a new tab but if you want to open the response page in the same tab you can also do this by using the value of target attribute as self so this is the default value of target attribute which means if you don't specify this it will do the same thing as you specify the value of this attribute as self now let's go to the google chrome browser and check the result enter some values click on the submit button you can see it has opened the response of the form in the same tab so that is it for the video guys i hope you learned a lot from this video and i will see you in the next one so hey guys in this video we will learn the basics of html elements so first one so let's start with the input so the input tag specifies an input field where the user can enter data avoid variety of types of input data and control widgets are available the input element is one of the most powerful and complex of all the html due to a huge number of combination of the input types and attributes the input element works depending on the value of the type attribute type attribute is the most important attribute of input element if this if this attribute is not specified the default type will be the text from the next video we will be talking about the type text of the input element and some of the attributes that are common for most of the input element so hey guys in this video we will talk about some of the most common input attributes you can see i have already created two input fields with input button with the submit button and now just give the autofocus attribute here now this is used to specify that your input element will automatically gets focused when the page loads let me show you with this example just go to the google chrome browser you can see it my input field has already gets focused before i enter the cursor in the input field now if i refresh the page my this input field is getting the cursor automatically and now if i give the autofocus attribute to this input field you will see the change let's go to the vscode cut it from here and paste it in the last name and now if i go to the google chrome browser you can see this now this is getting automatically focused when the page loads just refresh the page you can see instead of this one the first one the second one is getting the focus automatically so let me refresh the page again you can see my cursor is blinking here so i can write anything here so this is the autofocus attribute now let's move on to our next attribute which is the disabled attribute disabled attribute is used to disable the input field that means you cannot type anything in the field or you cannot do anything with the field let's give this attribute for our first input field disabled now like the autofocus attribute the disabled attribute is similar to the autofocus attribute it is a boolean because it does not have any value it is a boolean which means if you type it in your element it will set the value of the disabled attribute to true otherwise it will be false if you don't type this attribute now if you check in the browser you can see i am unable to type anything in the input field so this is the disabled attribute now let's move on to our next attribute which is the form attribute now the form attribute is very interesting attribute the form attribute specifies the form which the which this input belongs to if i create the input element outside of the form element with this attribute i can specify that this input element belongs to the specific form so let's copy this last name input field and paste it outside of the form now let's give the form attribute to the input field and in the value of the form attribute i should specify the identity of the form now let's give the identity to our form using the id attribute you can see i have given the form one id to the form element now just copy this and paste it here and now we have successfully created the relation between this form and this input element moving on we have the form method attribute the form method attribute defines the sttp method for sending form data to the action url for the submit button so let me paste that input field in my form and paste it here let's delete the attributes also this now we need a page for the action attribute so let's create that about dot html now copy all this and paste it here and let's delete that create a p tag here your form has been submitted now let's go back to our index.html and now add the action attribute for the form and here give the page you have created about dot html and now create a submit button here let's copy that and here specify the form method attribute and now we have two form submission methods get and post just click on the post now we also need a get method for the form let's create that method and specify the value as get and now let's change the name of the submit as well to be more specific submit with post now the usage of this form method is if you want to use two input methods for the same form element then you can use the form method attribute you can see for the default submit button I want my data to be submitted with the get method and for the second button submit button I want my data to be submitted with the post method so this is the usage of the form method attribute so let's move on to our next attribute next up we have the form now validate attribute you can use this attribute if you want to submit the user's data to the server without validating it it is a boolean attribute which means the value of the the value of this element could be true or false and you can specify this inside your submit button like this now you can submit your data without validating it and lastly we have the form target attribute this attribute specifies whether you want to show the result of your form submission in a new tab or you want to open it in this tab so let me show you with a quick example here I created a submit button which will open the result of the form submission in a new tab and the first one will open the form submission in this tab in this tab so let's go to the google chrome browser and this will open the result of the form submission in this tab in this tab sorry just click on this submit button you can see your form has been submitted now let's go back and now click on this submit to a new window button and you can see it has opened the result page in a new tab so that is it for the video guys I hope you learned a lot from this video now see you in the next tutorial so hey guys in this video we will talk about another five common attributes that are used for input elements the first one is the placeholder attribute the placeholder attribute specifies the hint in the input field before the user enters any value in the input field so let me enter some placeholder here let me also specify this for my last name now let's open this page with live server in google chrome browser click here on go live you can see this is giving me the hint of what should I type in the field as soon as I start entering the value it is gone and the last thing to remember about the placeholder is that it works with many kinds of inputs like the text search URL telephone email and password input types now moving on we have the value attribute let's go to the visual search code back and specify the value attribute here like yawn now this attribute is used where you want to give your input fields a default value the value attribute has also other usages but we will talk about them later in this module but for now let's look at the example for the let's look at the example for this attribute let's go to the google chrome browser you can see it is giving me the default values even I have not entered these values even I have not entered these values now moving on we have the read only attribute this attribute is used to make your input field read only which means you cannot add it for that input field this is used when you have also used the value attribute for the default value you can see I have a default value yawn and also specify the read only now let me delete this required attribute because it it is added with the autocomplete now let's go to the google chrome browser and check whether our field is working or not let's refresh the page now if I try to delete this you can see I'm not able to delete this field because this is the read only field now moving on we have the required attribute which is the last attribute for our video let's go to the video code and let's delete that now if you specify this attribute for your field you cannot submit you cannot submit your phone before filling up the data in that field this attribute works with the checkbox radio file email date picker and so on and so forth let's go to the google chrome browser to try this and now if I try to submit this you can see it is giving me the error fill out this field so that is it for the video guys hey guys in this video we will be talking about five input elements the first one is the input type email so let's create the input type email type input like this and change the value of the type attribute like this let's give it a name now there is another way of doing this by using the emet snippet just type input and then use the emet snippet like this you can click here or you can click you can hold the shift button on your keyboard and then the colon type email now and you can see the emet has autocompleted the email for me let's type email also here name of the email and let's cut all that now this input type email attribute is used to define the field for typing the email if you are thinking what is the difference between the type email and the type text you can do the same thing with the input type text the main difference in this input type is you can validate your email on the client side before submitting it to the database so let me show you this with the example you can see my input type is email and now if I open the browser and if I type something like my name and try to submit this you can see I am getting the error please include add sign in your email address so this is the basic validation that you can do with the input type email so let's write the email something random and now you can see I have included the add sign in my email and if I try to submit this you can see it has successfully submitted let's go back to the page again and you may have noticed that our email is submitted even we are not giving the right email provider like gmail and hotmail well you can do complex validation using the patron attribute using the regular expression which has its own complex syntax so I'm not gonna cover this in my course and this is not necessary for you as you are only learning the web designing you can also use the multiple attribute to give the user ability to enter multiple email addresses so let's go to the vscode and give it a multiple attribute and now I can enter multiple email addresses in the input field you can see and now if I try to submit this you can see my data is successfully submitted and you can also try all the common attribute with the email input types now let's talk about the password input type let's create a password input field in the form element after the email element now if you use the password input type for your password then your password will be masked which means your letters will not be visible now let's try this in the google chrome browser let's open the browser and type your password you can see my words and my letters are not visible so what you can also do with this password is you can limit the length of the letters in the password now let's give the password input element a an attribute type max length and here is our attribute just enter and now fix the character limit for your password for example I want only eight letters and now if I go to the browser and start typing something like one two three four five six and now my length of the character is limited because I'm not able to type more than eight characters this is the password input type let's move on to our next attribute value which is the search let's go to the visual studio code back again and create a search field but let me delete that first and create an an input field with the type search I'm using the emit abbreviation and now name it id is not necessary because we are not going to design the element now this type search is used to specify the input field which you can use for searching the content on your web page it gives you the suggestions for searching something like you do on the google search let's go to the browser and check never data sorry go back and let's refresh the page and now you can see it is giving me the suggestion based on my web history based on my search history so that is it for the input type search let's move on to our next type which is the url now go back to visual studio code and let's change this to url or use the emit abbreviation type input url now this input type url gives you the input field for entering the url the url you enter in the field will be validated so let me try this in the google chrome browser and type type something random like avengers and if I try to submit this you can see it is giving me the error please enter the url and now if I type dot com and try to submit this it is still giving me the error because we haven't given the proper url so let's give it a proper url now select the url based on your search history now type the proper url and then colon double forward slash avengers or www.avangers.com and now so click on this submit button here you can see my url is successfully submitted so that is it for the url input field and I also recommend you to try all the common attributes for the input types that I have already taught you and now let's move on to our last input type which is the submit input type now the submit button is basically a button for submitting all the values that you have entered in your fields in submit we have the value attribute like this this is our value attribute for our submit button now remember we have also used this value attribute for our input fields for putting the default values but here it is used to name the submit button now let me show you this I go to the browser you can see the name of our submit button is submit the data and if I change it to something submit like values now if I go to the browser again you can see the name of the button has been changed now this submit button has some special attributes one of them is form one of them is form action attribute here you can specify the url of the page that will handle the values you have entered in the input fields this attribute overrides the this attribute overrides the action attribute of the form element that means you have two or more pages for for submitting the data of a single form element now let me show you the example of this in the visual studio code for the form action attribute I am going to create two pages for explaining the form action attribute I am going to create two pages here let's create the first one on tag dot HTML and the second one about dot HTML and now paste some random HTML here and about you can type any title here I am going to type the about the name of the page and now welcome to about page I will type here now just copy this and paste in paste it in your contact page the title to contact and now let's go back to the index dot HTML and here copy this submit attribute now for example this button will submit the data to the contact page so I am going to change the name of these two submit to contact and let's rename this also submit to about and now for submitting the data to the contact page I will use the forms action attribute over slash contact dot HTML and now I will specify the action for the and now I will specify the action for my second submit button so I will use the form action attribute and this will go to the about dot HTML and now let's just go back to the browser and if I enter some values here and try to submit this you can see well it is giving me the welcome message for the contact page that means we are in our contact page because we have created a paragraph in the contact page named welcome to contact page and now if I go back and click here submit to about you can see welcome to about page it is giving me the message welcome to about page so I hope you understand that the how the form action attribute works now let me explain you one more thing about the submit button is that you can also use different methods for your different submit buttons for example if I want the post submission method for my first submit button which is the default submit button I can use the method attribute here post and but but I want the get HTTP method for my second button I can use the form method attribute here and I want the submission method as get so let's go to the browser let's go back and refresh the page and now if I enter data and click on the submit to contact which is our default submit button so this button will submit the data using the post method it is giving me this error because we are not using any kind of backend mechanism to submit our data but just try to understand that if you get the data in the url then you are using the get method and if you don't get the data your data that you have entered in the url then you are using the post method let's go back refresh the page enter some data and now click on the submit to about which is our get you can see I am getting my data in my url which is hashed just don't worry about these you can see but you are getting your data in the url like http avengers.com so that is it for the video guys I hope you learned a lot from this video so hey guys in this video we are going to be talking about the two remaining attributes of the input type submit so let's start with the form enc type but first let's delete these attributes also these and now let's also delete that and let me specify the method here which is post and also change it to whatever you want I'm changing it to text and here I will specify the name and let's copy that and paste it here now change the name of this submit and let's rename this also submit now let's specify the attribute form enc type now this attribute specifies how the form data should be encoded when submitting it to the server this is used in conjunction with the post method of the form element if you set its value to multi-part form data your value will not be encoded and if you set this to text slash plain your value will be submitted as plain text except your white spaces will be converted to symbols so the default value of this is this one the first one now this value converts your data to hex values so this is the form enc type attribute now let's move on to the next attribute which is the form target attribute now this attribute is similar to the attribute you have used with the form method with the form but the difference is that this method is used with your submit button so you can specify if you want to open your page in a in a new tab or you want to open it in the same tab but first let me specify the target attribute for my form like the self-value now if I click on this one submit button it will open the result page in the same tab but if I click on the second one button this right here it will open the result page in a new tab now let's check the result in the google chrome browser type type anything here like my name and if I click on this it will open the result page in the same tab but if I go back and now it is giving me the error because we are using the post method but not working with any kind of server so don't worry about that and let's go back now refresh the page and now enter some data and if I click here it will open the result page in a new tab you can see now it has opened the result page in a new tab so that is it for the video guys I hope you learned how these attributes work and now I will see you in the next video so hey guys in this video I'm gonna talk about three different input types so let's start with the input type image but first create a form let's delete let's delete this action inside my form create a input text you can create whatever you want like email or password or something I'm creating this and now I will create the input type image type input and then shift and colon and now type image you can see this is my image click and now we have to give it a source so let's just drag and drop the image here you can see my image has been added but it is so big let's go to our index dot html and now keep the source here forward slash ocean this old attribute is the alternative attribute in case if your path is wrong or you have entered the wrong extension so the text you type here will be shown in the place of this image so let's write some alternative text like ocean ocean image and now this image is too big let's see in the browser you can see the image is very big so let's go back to the vs code give the width and height 30 pixels and height 30 pixel note 300 now let's go back you can see this is my image let's add a line break so it appears here let's add a line break after the name another now you can see it is appearing here now it is the similar as we use the submit button so if I type some data here I can submit this with this image and you can use all other submit attributes with this input type image because it is similar to the submit button you can say it is an alternative of the submit button so that was the input type image now let's move on to our next input type which is the file now the file attribute provides a select input field and a choose file button for uploading any kind of file so let's take a look at the example let's change it to file this to my file and this is our submit button now let's go to the google chrome browser and here you can see it is giving me a choose file button if I choose a file let's say this click on the open button right here and you can see my file is selected and if I click on the input type image button which acts like a submit button you can see my file is submitted but with the plain file field you can select one file if you want to select multiple files at once you can use the multiple attribute for this so let's go to the vs code at and add multiple attribute here now if I go to the browser again and click on the choose file button here I can choose multiple files by clicking on the control and click button pressing the control and click button and now if I click on the open you can see my five files are successfully selected now what if you want to select only one type of file you can do this with the accept attribute with accept attribute you can select only one type of file it could be an image or video or ms word document or any other type of file now let's go to the vs code and delete that and let's use the accept attribute and here you can give the extension of the file that you want to allow to the user like the dot mp4 or mp3 or the dot dot file to select the ms word file or you can use the syntax like image slash all or image slash jpg like image or the video slash all or video slash mp4 now these are the media types I will give you the link of all the media types in the description so you can learn more about them now let's go to the google chrome browser to check you can see I have the same exact choose file button if I click on that button you can see it is it is allowing me to select the video and if I select any video you can see my video has been selected so hey guys in this video we will learn about the date and time input types of the form element in html now these are quite simple and self explanatory you can see the date attribute shows simple date without any time and the date time local shows the date with time and the third one the month input type shows the month of the year and this week input type shows the week of the year and and here the last one the input type time shows the current time on your pc so let's open this page in the google chrome browser just click here on this go live icon just wait a bit and it will open the page for you you can see this is my simple date I can select my simple date here which month I want from here and just select the date you can see the only the date is selected and now if I want to select the time with the date I can use the date time local and here you can see it is showing the month of the year and the year and it is showing the date here and you can select the time from here like this am or pm you can select from both of these and with this I can select the month of the year and for the input type week I can select the week of the year and the last one the time input type from the time input type I can select the current time or the time I want to select for example this is my time right now and I want to select the 7 pm I can just click here and now here you can see my time is selected so these were the date and time input fields that's it for today's video