1 00:00:00,780 --> 00:00:01,950 Hello and welcome. 2 00:00:01,950 --> 00:00:11,370 In this lecture we are going to begin create seeing are many projects where we'll create a simple form 3 00:00:12,180 --> 00:00:13,440 in this lecture. 4 00:00:13,500 --> 00:00:18,330 We'll start by creating the structure of the four. 5 00:00:18,780 --> 00:00:23,460 To begin create a folder on your desktop. 6 00:00:23,610 --> 00:00:31,020 If you own the windows you just right click and go new folder and just call the forms are anything you 7 00:00:31,020 --> 00:00:31,560 like. 8 00:00:31,560 --> 00:00:34,680 I just called Mine project 9 00:00:38,670 --> 00:00:40,900 projects form. 10 00:00:41,580 --> 00:00:42,140 Okay. 11 00:00:42,180 --> 00:00:46,610 Then once you've got your for the created open your text editor. 12 00:00:47,370 --> 00:00:51,610 I am using Notepad plus bloss for this lecture. 13 00:00:51,780 --> 00:01:04,740 So once you've got your text editor open do a file save as and then select the folder you've just created 14 00:01:04,800 --> 00:01:07,320 on your desktop. 15 00:01:07,420 --> 00:01:12,990 That's mine there done double click and inside here is called file name. 16 00:01:12,990 --> 00:01:22,330 Name your document are com mine form and their ways got save as type drub down. 17 00:01:22,380 --> 00:01:30,710 Select a tier Mount maytree a document is saved as a dot hastier mail extension I click safe. 18 00:01:30,930 --> 00:01:34,920 So now we have a blank page hastier mail document. 19 00:01:34,920 --> 00:01:44,070 So create another folder another file inside your text editor call file new if you are using Notepad 20 00:01:44,070 --> 00:01:46,470 plus Barnes and afanasy. 21 00:01:46,470 --> 00:01:55,620 That's a look at the same for the case and this time you save the name as the dots here says file. 22 00:01:55,920 --> 00:02:02,690 So to our mine mind I'll make choices as a dot see. 23 00:02:03,720 --> 00:02:13,070 So sledded drag down and go to see a says cascade install it so make sure your file is safe with the 24 00:02:13,120 --> 00:02:17,310 DOT says extension to a safe. 25 00:02:17,400 --> 00:02:20,940 So now we've got a CML file. 26 00:02:21,060 --> 00:02:23,310 We've also got half blank. 27 00:02:23,720 --> 00:02:31,450 This far in your form editor. 28 00:02:31,590 --> 00:02:35,030 Make sure you have your code like this. 29 00:02:35,040 --> 00:02:40,450 This is the basic structure of hastier mill document. 30 00:02:40,620 --> 00:02:47,850 So make sure you have the beginning of the code is called the dock tie and then made sure you got the 31 00:02:47,850 --> 00:02:49,630 hastier mail. 32 00:02:49,750 --> 00:02:55,120 Make sure all your tags are paid properly and as clicks see. 33 00:02:58,400 --> 00:03:06,130 So on the right here is the blank weps website here without any form or content. 34 00:03:06,340 --> 00:03:11,340 Lousy blank weeks is which is represented by this code here. 35 00:03:11,360 --> 00:03:13,900 This cool little responsible for this. 36 00:03:14,360 --> 00:03:20,100 So make sure you have your team old tags matched up properly. 37 00:03:20,420 --> 00:03:24,380 If possible try and invent your code. 38 00:03:24,410 --> 00:03:31,070 So this is this troxell after Doc I may tell you how much in hastier mill tanks. 39 00:03:31,310 --> 00:03:34,360 And then the next tree. 40 00:03:34,550 --> 00:03:37,350 Make sure you have your head tags that match. 41 00:03:37,670 --> 00:03:46,100 And then in between the head tags make sure you have your link to your style sheet and make sure the 42 00:03:46,100 --> 00:03:47,240 name is correct. 43 00:03:47,250 --> 00:03:55,760 I have named mine stargardt's here says this is my stash it is them the moment it's in the same directory 44 00:03:56,450 --> 00:04:03,100 as the hastier email for hands I've named it stalled gutsier says. 45 00:04:03,200 --> 00:04:07,660 So make sure you've got this link correct. 46 00:04:08,240 --> 00:04:08,790 Okay. 47 00:04:08,840 --> 00:04:18,050 Mitchell is in the head section makes you make sure your body tag is paired up properly between your 48 00:04:18,050 --> 00:04:22,990 body tags is where you create the form right. 49 00:04:23,390 --> 00:04:31,970 Major oil tags and match top and then will start creating the form using a form tag. 50 00:04:32,090 --> 00:04:35,190 Next you create a form tag. 51 00:04:35,220 --> 00:04:45,350 I come down here from tagus highlighted the font tag wall enclose all the form elements in the Albany 52 00:04:45,380 --> 00:04:46,760 tag of the form. 53 00:04:46,970 --> 00:04:52,660 I have specified a couple of attributes. 54 00:04:52,760 --> 00:05:02,590 The first attribute here is the idea of giving the form an idea with a name count. 55 00:05:02,970 --> 00:05:07,480 I also specified an action. 56 00:05:07,470 --> 00:05:09,840 An action is another attribute. 57 00:05:09,890 --> 00:05:17,290 Why that is when you submit the form you need to specify the action that will happen. 58 00:05:17,300 --> 00:05:25,700 What I've done has specified the hash symbol here which means the form will post the information to 59 00:05:25,700 --> 00:05:26,720 itself. 60 00:05:26,750 --> 00:05:29,260 That means nothing will happen. 61 00:05:29,410 --> 00:05:38,310 If this was a live environment you then this value here you would place the location to a back end server. 62 00:05:38,450 --> 00:05:45,740 Normally when you saw me to form the back end server processes the information and performs performs 63 00:05:45,800 --> 00:05:51,270 some action but because we are not wire in this form to have back end server. 64 00:05:51,320 --> 00:05:55,710 We're just going to limit hash there to submit to itself. 65 00:05:55,730 --> 00:06:03,420 There are two methods of submission of send in a font you can send it by post or you can use it. 66 00:06:03,420 --> 00:06:06,440 Get the post is a more secured way. 67 00:06:06,440 --> 00:06:12,440 If you're sending sensitive data but they get it's not that secure. 68 00:06:12,700 --> 00:06:18,660 When you sues it get the information you send in is displayed in the browser window. 69 00:06:18,770 --> 00:06:21,840 So that's a different and then this line here. 70 00:06:21,840 --> 00:06:25,820 I have enclose a fieldset tag in between. 71 00:06:25,820 --> 00:06:33,930 This tag is where will put all the information for the form or the other elements like MC import tag. 72 00:06:34,110 --> 00:06:38,170 It's where there will be a submit button and raid your button. 73 00:06:38,180 --> 00:06:42,160 Everything will be enclose in between this tags here. 74 00:06:42,950 --> 00:06:47,040 I have added some more lines of code here. 75 00:06:47,240 --> 00:06:53,440 I have created a head in tag so this will be the title for your form. 76 00:06:53,530 --> 00:06:55,840 I have created a break tag here. 77 00:06:55,850 --> 00:07:03,280 What this will do is create a break in space between the heading that elements of the form. 78 00:07:03,810 --> 00:07:09,520 In this line I have specified and input element. 79 00:07:09,710 --> 00:07:17,540 So this is what the anything that's an input element that moves the visitor has to enter some information 80 00:07:18,080 --> 00:07:20,690 so to create the input element. 81 00:07:20,710 --> 00:07:30,260 You use it input tag I give it a class and the value of the class is sieber are the type of text of 82 00:07:30,340 --> 00:07:36,770 implicit text you specify the value of text using the type attribute. 83 00:07:36,920 --> 00:07:44,240 Giving it another attribute which is name your form must have a name and a giving in the value of email 84 00:07:45,350 --> 00:07:52,400 and then we've got another attribute which is a value the value specified is email. 85 00:07:52,410 --> 00:07:55,560 So this is what will be inside the form. 86 00:07:56,180 --> 00:08:03,560 I have created a break tag to create some space between this impulse and another input's create a double 87 00:08:04,060 --> 00:08:04,390 break. 88 00:08:04,400 --> 00:08:06,370 Ted is here to give me a lot of space. 89 00:08:06,560 --> 00:08:14,660 So in this input here same as that one given in the same class the value this password because I want 90 00:08:14,710 --> 00:08:22,820 to use the visit or to enter some password details so I have specified password as the value to type 91 00:08:23,480 --> 00:08:31,220 and then specify another attribute which is the name and I'm given in the name of password and the value 92 00:08:31,490 --> 00:08:32,730 is password. 93 00:08:32,780 --> 00:08:35,110 This is well when the user sent own a password. 94 00:08:35,390 --> 00:08:44,780 This where it will not reveal the text the user types in it will just show up as a dot or a blob in 95 00:08:44,780 --> 00:08:47,360 the peak in the input section. 96 00:08:47,360 --> 00:08:53,050 This would prevent the user's information or password being revealed as they typed here. 97 00:08:53,320 --> 00:09:00,470 And they have created a break just to give it a break space before the other takes. 98 00:09:00,830 --> 00:09:06,500 If you are using Notepad plus bars we could have a look and see what the form looks like. 99 00:09:06,520 --> 00:09:09,830 I will run lunch in Chrome. 100 00:09:09,850 --> 00:09:14,200 All right so this is what the phone looks like at the moment. 101 00:09:14,340 --> 00:09:16,090 We are making progress. 102 00:09:16,100 --> 00:09:21,090 This is one of the input field and this is the other reason. 103 00:09:21,200 --> 00:09:28,220 This is like this and because we have specified password as a value only type of attribute and also 104 00:09:28,250 --> 00:09:32,440 given in name hence is called the Dot dot dot. 105 00:09:32,920 --> 00:09:35,760 He hides the password entered. 106 00:09:35,780 --> 00:09:38,910 I have created a few more tags here. 107 00:09:39,120 --> 00:09:46,640 I have created a check box so that users will check if they want the form to remember their name and 108 00:09:46,640 --> 00:09:47,600 password. 109 00:09:47,910 --> 00:09:56,180 To do that you did the input type will be check box then this attribute value would be remember the 110 00:09:56,180 --> 00:09:58,190 value would be details. 111 00:09:58,340 --> 00:10:08,480 And then this text next to the check box will be remember named password next created to input tag. 112 00:10:08,910 --> 00:10:16,640 It to rig your buttons with the type of radio which indicates the type of input they will have to make 113 00:10:16,640 --> 00:10:18,540 a selection between the two. 114 00:10:18,550 --> 00:10:26,510 The value of its name here name attribute is sex value is female and then this is a text that will be 115 00:10:26,510 --> 00:10:33,640 revealed the same pier it gets revealed will be male so there need to choose between you read a button. 116 00:10:33,740 --> 00:10:36,100 If there are male or female. 117 00:10:36,470 --> 00:10:41,480 And then finally include a submit button. 118 00:10:41,480 --> 00:10:48,590 This is the very end when all the information has been imported on the form the user visits are one 119 00:10:48,740 --> 00:10:52,800 click submit so to create a suddenly button you don't input. 120 00:10:52,840 --> 00:10:59,500 I've given this one and a deal with the value of logging type would be submit. 121 00:10:59,600 --> 00:11:07,260 Value would be logging so you can give your values any name as long as you specify the type of input. 122 00:11:07,410 --> 00:11:09,170 So give in. 123 00:11:09,230 --> 00:11:18,200 Created some class here for my input and also giving this input for logging this summit but in giving 124 00:11:18,200 --> 00:11:19,300 it an aid. 125 00:11:19,520 --> 00:11:26,040 So the ADA class and other elements will use when we are stylin our form. 126 00:11:26,210 --> 00:11:30,210 So we have now completed the structure of the form. 127 00:11:30,470 --> 00:11:35,510 Let's have another look and see what this looks like launching Chrome. 128 00:11:36,100 --> 00:11:38,600 So this is what the form looks like. 129 00:11:38,600 --> 00:11:45,780 So our farm is ready and in the next lecture will will begin to style the form. 130 00:11:46,730 --> 00:11:55,520 So in this lecture we have created the basic structure for a simple form and give in needs some class 131 00:11:55,730 --> 00:11:59,800 in some of the elements some of them one on one. 132 00:11:59,900 --> 00:12:02,320 One of them or two of them will give you an idea. 133 00:12:02,330 --> 00:12:05,490 Attributes that we will use during this time. 134 00:12:05,750 --> 00:12:08,880 Thank you so much for watching and see in the next video. 135 00:12:08,990 --> 00:12:09,850 Bye for now.