HTML5 Forms for Webdesigner | Somenath Sen | Skillshare
Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
8 Lessons (31m)
    • 1. Introduction to HTML5 Forms

      7:14
    • 2. Password Input Field

      1:20
    • 3. Radio Button Field

      4:02
    • 4. Checkbox Field

      3:43
    • 5. Create A Dropdown List

      6:38
    • 6. How to Create A Submit Button

      3:14
    • 7. Create A Reset Button

      1:48
    • 8. How To Used .PNG Files As A Form Button

      2:35

About This Class

HTML5 forms are very important element for eveery website. Every webpage on the web should have atleast one html form into it.

A form will take input from the site visitor and then will post it to a back-end application such as CGI, ASP Script or PHP script etc. The back-end application will perform required processing on the passed data based on defined business logic inside the application.

There are various form elements available like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc. And in this course you'll learn how to create this form elements and poper way to used this into a webpage. This course is for beginners so if you are new to webdesign and HTML5, this course is for you

Transcripts

1. Introduction to HTML5 Forms: in this video, we're gonna be learned. External forms a steam. All forms are very, very important on extremely useful every Whippet in the browsers or at least have a one, a steam informs. So before we don't write our form enemy and Constable, I'm gonna go to my project folder on Make a Workable copy for this, a steaming pile Just copies and pasted over here on Rename This to Body Heiferman from Door s Demon and right Click on this file and open it in notepad plus Plus. So, first of all, I'm gonna remove this stable. Come here because we already have a body hype in table Lord EST email file in our project Fuller which includes the stable court. So we do not need this in hair on. Also, it was a nice and clean walk a year to write our calm element. So first of all, I'm gonna open a angle bracket. Then type form, then close angle bracket on throws the contact Now the home have some attribute. The first attribute is myth or what type of method this home will be used when user submit this home. So first of all opened this myth or attributes Type mitt hard. The actual design then opened the double condition on in here we have to type of homes the MIT MIT hard in a steam ill one is get and another one is post. When you learn a programming language in later or you already know open grabbing language. Then this myth hard attribute will be much more clear to you. But for now, keep it in your mind. Get midhar will crosses the form. Data will use this limit This calm using now you are ill. So when the user submit this warm And if we have the get made hard in this metal attribute , then form will be submitted so that you are in and data will be passing toe the e world to the date of is and when we're using the post a minute or the formerly process to the backbone and after users submit this form that either not able to see any data off any part of this website on in this to mitt hard, the Austin Midhar will the more secure way to submit the form. So in this case, we just type most here on. We need one more attribute, which is action. The action attribute defined the action Do we put home when the call me submitted? So, for example, with diaper Excellent script here which name submit dot beach. So when users submit this form the form data goto this form submit dot PHP script on this script will process the data and story it in our database table in the exact format that users submit this form, for example, built. Think this is a sign of form. And when the users the meat this data, their data like user name or password or email will store in the database in exact former like the name will store in the name did have a stable and the password will story. In the past, we did have a stable and the email will store in the imitative a stable or stolen something like that. Now we open our first form element every form have some input. So we've post open a text input. So first of all, open the input bag, open our angle bracket and type input, Then give us face and type type. What type of input disease. Then we right here. This is the text input. And now we need to add another attribute, which is call name so kind of name he called Do double condition on in the name field. Give this input on name. In this case, we're just keep this in. Put a name, which is called Takes one on close. The input tag input tag is a self closing tag, and we do not need toe. Close this tag with a traditional way. We just pulled the backslash and close the angle bracket and in protect will close immediately. Now let's just prettify this input type a little bit more. Just rub this in book type with a paragraph. So open a panic attack. Open our angle bracket and type B closed angle bracket and closed the paragraph. Attack right upto the input tag. And in the paragraph back, let's said this input is for name failed, so type name. And we also had a line brick right upto This name takes so it looked nice and clean. Just that beer tag. Beer for line breaking and save the file. Goto our product cooler and double click on this wild. Open this up in the browser on hair it is. There is a one name filled. Here is the name text on, then a line break. And in the next line here is our in book type. In this input type, we can add anything like John Oh, are and whatever name we want. Or what about six? We've won. So in this way we can add a form input type in a estimable peach. 2. Password Input Field: So in this video, we're gonna be looking at how to create a password. Input. First of all, I'm just copy this whole name Benadryl from here on fifth Stewed where I doctorate. Just change this name toe possible on in this input type, we're just gonna be right. Password and also given name, password. Save the file and goto our browser on refreeze this speech. So as you can see now, we have two filled one for name and one for password. So first of all, just type a name. Let's say, John on type something in the possible field. So as you can see, if I write something in the past, but feel the character will be in scripted and we could not see the character for security purpose. So in this way we can create a password input type in a esteem form 3. Radio Button Field: in this video, we're gonna be Look at the ready. Abundance. So, first of all, I'm gonna go to my project cooler. Andi, make a workable copy of the system and file. Just copied and pasted over here and rename it to body hyping form. I've been radio, not esteem, and rightly on this choir on open this up in note pad plus Plus. Now what I have to do is just copy this name Better girl from here and best it right up to the post. What? Field on change this name to age. So I want a different type of each field hair so user can select from multiple option. What have to do is just give some user some option. Using the ready evidence, the user can easily select their age type using this field. So first of all, I'm just changed in this input type. Trailed just instead off the sticks were gonna right radio Andi After this in Fort built just type ah, option Something like 18 to 25. Then give a beer for line break and we just copy this whole input for another to think and changed this age group to 26 2 35 on the next one is 36 do 50 and now save the file on Goto Project Roller and only growing Disquiet. Open this up in the browser. Let's see how it look like on here is our really evidence. As you can see, this is our H field, and this is the three option that we created. Using Radio Button one is 18 to 25 other warnings 26 to 35 on another one is statistics to 50. So user can easily select their age group using this tree option. Either he will select the 18 to 25 or maybe 36 to 35 or 36 to 50. Now, I want one auction from this three. Option is selected by default. So how I can do that? As you can see, if I refresh the page, the selection will go on. But I want one option selected by default. So how I can do that just good or what takes editor Andi Let's there. I want this 18 to 25 groups selected by tickle, so I just want to add another attribute. Hair, which is called checked on save the file. Go to our brother on Repress the page. Now, as you can see, our 18 to 25 group is selected by tickle. If I depress the paid, it will still selected. So in this way we can create radio buttons in a steam else comes 4. Checkbox Field: in this video, we're going to look at how to create checks. Boxes in esteem inform. So first of all, I'm gonna go to my project cooler. Andi, copy this, Kyle. And pasted over hair. Really? In this quiet toe body hyphen form hype in check boxes on record on this file and open it in. Notepad plus plus. So first of home, I'm gonna give some ender after this. Each paragraph on copy this whole age backup include this radio inputs on bested or here and now instead, off this age. I'm right here, Ward. Hi. Huh, Andi? Now, in this input type radio insert off this radio, we're gonna type JIK books. And now here, instead of this age group, we're gonna be right, something like this. I have, um, vihk and give this input on name this. Copy the stakes and pasted over here because we've warned this checkbook in courts for this Bagram. So I just give this exact matter of name for this import name. And in this two paragraph, I also just copy these checkbook type name and instead of these radio just fits these chick box on her. We just removed this age group and something like Hi. Have Ah, God. Andi in here. I, um oh, on board. Now, save the file and go to our pre colder Don't work on this file to open this up in the browser to see how it looked like. So I'm gonna june it on a little bit so it can be more clear and reveal to you guys. Then head is our chick boxes. What? I have have a bike. I said I have a car and I also have a boat. Or you can select something like I'm a bike and I'm a boat or just have a bike. So if I praise the paid, as you can see, I have a bike. Chick box is by default. Selected. Why? Because we have this check attributes return on this important. So this chick box is default selected. If you don't want this check box surgical selected. Just go to our next leader on. Just remove this checked attribute and save the file and goto our browser and difference the page and hair. It is. As you can see, our default selected textbooks is no gun on. We can selected mentally by clicking on this chick boxes. So in this way we can add check boxes in any estimate pages 5. Create A Dropdown List: in this video, we're gonna be create a drop down list. So first of all, I'm gonna go to my project holer on, make a walkable copy for these aced email file. Just copied and pasted over here. And rename this while toe body hyphen, home hyphen. Drop down on red. Click on this while and open this up in note. Back trespass. First of all, I'm just open another bag. A bag goes the bad up there. Question on in this bird up check. I'm gonna be just right. Something like what is You're country. What is your country then? You were lined, Brick. And after that, we want to open a new attack called Select. So, Constable, I'm just open my angle bracket and type Select. Give the select attack on name isn't the leg country and close our angle bracket and close the select check first on in the select tech. We want some option which will be dropped down from this list. So we want to open the option tag. The first of all, I'm just a woman. My angle bracket and type option, then option. Have some value. Close the option. Check first soon on in our first drop down option. We want a country name here. Is there on in value? We just I want to put the same name you is there and we want some more options. And Toto three or maybe more option. So just copy and paste the same option for 2 to 3 times on. Just changed this name, toe something like UK. And in this value, we want to put Justin UK on another one is Canada. This is where you just put the same name can order on save the file on Goto our project Fuller double click on this while to open this up in the browser. I'm just Juman a little bit so it can be more clear and you're able to progress on Dhere is our top down list. As you can see, the first option is even say, as you can written in here cause often is, then we have ah, little arrows that it have a dog down. So when we click on this arrow, it have ah drop down. And now we have our tree country list, which is even say UK and Canada, as you can written over here, U s u K and Canada. If we have add more option, let's just at another one. India and in here off the India said the file on Go to your brother refreshes the page on in this drop down list Here is the India. As you can see in this way, you can add a drop down in any estimate home. So this got down is good, but I want something look like more professional. When I look at this drop down, I don't want to like this us they by default, selected from the country. I want something like select from your country from the top down. Then either will drop down this list and select their currently from the drop down. So how I can add the type of text in this drop down, So first of all, I'm gonna go to my text editor on I want to add another option before my country list and just removed this value from here. We don't want any very for this option. Just we want toe add attribute called did the will and we want to add another active you'd call selected on We removed this us A country in him From here on, just add something like elect you're country and said the file goto our brother on request the page. And as you can see here is our dog down with the text which called Select your country hair on when I click this arrow from hell and we can see our country list And as you can see, we could not select this takes form this drop down because we add a visible attribute for this option So districts will not selected from this option. Only this country list will be selected from this drop down which exactly what we needed in this drop down. So in this way we can add a drop down in esteem inform 6. How to Create A Submit Button: in this video, we're gonna may look at how to create a supping burden. So first of all, I'm gonna go to my project. Fuller on make a walkable copy for this esteem and file. Just copied and pasted in hair. And it's really too body hyphen form. Hi, friend. Submit and right Click on this file and open this up in note back customers. So most of all, I'm gonna give some enter after this drop. Don't better grow and open another paragraph. Core hours of mid burden. Close the back up the coast. Do you surrender on in the spirit? Hopeless opener. Input bag. Type on in this type attribute. We're gonna be type submit because this is a summit burden and we want when the user click on this button, the home will be submitted. So in the type attribute we type submit next, we're gonna be give this burden on name Britain on a last one. We had a value that's a commit in this value takes will be appear on the button. So whatever you type on this value attribute that will display as a burden text. So just close this input. Andi Steve, over fund Goto are pretty troller and double click on this pilot, Open this up in the browser on here is our burden. I'm just human early Liberte, so it can be clear and more relevant to us. Here is that was submit button. So as we take some name like John from false word select our age didn't select what I have on de select our country as UK. Then when I click on the submit button, that data will be submitted. As you can see, this is suing as a roar Just because off we don't have these homes of may dot PHP as we see on this previous video with it in this forms of Midhat PHP script into our form action hair it is. So when we click on the submit button, that data will be staying toe this forms of my dot PHP So we don't have this home submitted PHP into our project file. So it give us this error when you have this compliment PHP into the fuller, it will poses the data and submitted toe in order service. So in this way we can create a slum. It Burton, in a steam l form 7. Create A Reset Button: in this video, we're going to look at how to create a reset button. So, first of all, I'm gonna go to my project holer and create a walkable copy for the rest. Email document Just copied and pasted over here. And this. Rename it toe body hyphen form. Hi, friend. Rece it on Redlich on this crile and open this up in no pack plus plus. So first of all, I'm gonna copy this Whole include bag and vested right after it. And we just changed this type stuff May toe type. Where is it? Andi also changed the name toe reset button on value as Chris it Andi, that's it. Saved the file. Goto, put your cooler on double Click on this. Quiet! Open this up in the browser on Dhere is already said button. I'm gonna june it on a little bit so it can be more clear and readable to you guys on here is our visit Britain. So just types them. Name John. Some possible Lord Keep the ages on what I have. Just choose. Just do on what is our country? He was If you want to research this form, just click on this reset button on the formal, very said. So in this way you can create a reset button in any estimable reparations. 8. How To Used .PNG Files As A Form Button: in this video, we're gonna be looking at how to create an image button instead off this traditional looking defiled Burton. So, first off, all I'm gonna go to my project holer and make a workable copy for this estimate document. Just copy and bested here and rename it toe body hyphen form hyphen. Umid hyphen Britain on rhetoric on this file and open this up in no back plus plus. So in this bag up, we have a submit button and we have our research burden. So now we use images. We use PND images instead off these traditional looking burdens. So I'm gonna go to my text editor, Andi in hair in this type. Attribute instead off the submit. I'm going to write image. Andi, give a source for this image. Is there? See well to condition Andi our image cooler since last and submit dot p and G. That's the loss. The mid Burton's of Midhat PNG on its look It under our image Fuller. So we dive her images last Midhat PNG also for reset. But then we do the scene instead off this reserve, we're gonna live here. You manage on give this image of source condition on image smash research dot is you save the file on Goto our project Holer double click on this. Quiet. Open this up in the browser. And here is our beautiful looking is Britain, as you can see instead off this traditional looking vehicle button. Now we can use thes beautiful PNG images as button. So in this way you can replace this tradition looking buttons with your beautifully designed PNG images.