1 00:00:00,570 --> 00:00:05,560 Hello and welcome to this video on group in from data. 2 00:00:05,820 --> 00:00:12,410 In this lecture I will show you how to group data in a form. 3 00:00:12,450 --> 00:00:14,730 This is my sample Web page here. 4 00:00:14,940 --> 00:00:19,050 This is a form that is grouped together. 5 00:00:19,050 --> 00:00:29,740 He is in the field set so the field set tag is used to group elements that are related in a form. 6 00:00:29,940 --> 00:00:39,210 So elemen that correlated data can be grouped together using the field set and the field set of giving 7 00:00:39,210 --> 00:00:46,430 it an attribute style and giving it a whiff of 250 pixels. 8 00:00:46,500 --> 00:00:48,810 Let me walk you through the form. 9 00:00:48,810 --> 00:00:55,910 So we begin with a form tag that indicates that we are creating a form. 10 00:00:55,920 --> 00:00:59,240 It lets the browser know to display it as a font. 11 00:00:59,460 --> 00:01:05,350 So in the opening tag of the form I have got a couple of attributes. 12 00:01:05,430 --> 00:01:13,920 The first one is the action attribute the action attribute defines the action that will be performed 13 00:01:14,310 --> 00:01:16,720 when the form is submitted. 14 00:01:16,980 --> 00:01:24,330 So the common way to submit a form is VI is right in back end server Bob because we are not used in 15 00:01:24,330 --> 00:01:26,100 a survey in this example. 16 00:01:26,230 --> 00:01:27,540 Hi post Tim. 17 00:01:27,540 --> 00:01:34,840 The Form 2 itself has have used this hash sign here so the hatchell that you will take in is posted. 18 00:01:34,860 --> 00:01:38,380 It will submit to its self. 19 00:01:38,640 --> 00:01:45,510 The method attribute is is to specify how the form will be sent. 20 00:01:45,720 --> 00:01:54,700 There are two methods IMET of are posts or get the get. 21 00:01:54,750 --> 00:02:02,250 Option is usually used when you are posting date that is not sensitive. 22 00:02:02,340 --> 00:02:10,080 Something like a search engine query you can use a get for that by posting data that is sensitive like 23 00:02:10,080 --> 00:02:13,470 credit card information personal information. 24 00:02:13,470 --> 00:02:21,490 You always have to use a post method fully formed to be submitted properly. 25 00:02:21,540 --> 00:02:30,840 Each input fields must have in name attribute the name and boot must be specified so that the form is 26 00:02:30,840 --> 00:02:32,700 submitted correctly. 27 00:02:33,000 --> 00:02:39,100 So if you don't meet a name attribute it doesn't submit the form properly. 28 00:02:39,540 --> 00:02:44,850 For example I've got the value of this name here first name and last name. 29 00:02:44,850 --> 00:02:54,750 If I all might add that if I did and put a name attribute there then it will only submit the a last 30 00:02:54,750 --> 00:02:55,370 name. 31 00:02:55,680 --> 00:03:00,590 Past the importance of specifying a name attribute. 32 00:03:01,080 --> 00:03:03,460 So got two input values here. 33 00:03:03,480 --> 00:03:10,140 The first input type is the text and takes in the attribute of first name value. 34 00:03:10,230 --> 00:03:15,100 You have left the blanks so you can insert the value hand blank. 35 00:03:15,210 --> 00:03:19,680 If you wanted a fixed value you just put it in there and then it will display. 36 00:03:19,690 --> 00:03:26,670 So for example let's put Joe in there and save this far to refresh. 37 00:03:26,730 --> 00:03:28,350 He gave Joe in the box there. 38 00:03:28,530 --> 00:03:31,810 So whatever you put in there he will take that value. 39 00:03:31,890 --> 00:03:34,500 I am going to leave it blank so that 40 00:03:37,830 --> 00:03:40,800 our act Harle leave it there for now. 41 00:03:40,900 --> 00:03:43,890 So if you don't want it value you leave it blank. 42 00:03:43,920 --> 00:03:46,700 If you value your specify it. 43 00:03:46,780 --> 00:03:51,080 They also have gone over input type here. 44 00:03:51,140 --> 00:03:55,390 I'll have specified the name attribute value have left the blank. 45 00:03:55,400 --> 00:04:00,880 Again you can put that in after the first name here. 46 00:04:00,900 --> 00:04:02,120 I haven't used it. 47 00:04:02,120 --> 00:04:03,390 Break tag. 48 00:04:03,660 --> 00:04:08,710 So us to the font this input to come onto a separate line. 49 00:04:08,720 --> 00:04:13,610 The break makes it jump to a separate line and then after the last name. 50 00:04:13,690 --> 00:04:20,700 I've also put a break so that the inputs can be on a separate line and I pournelle a break here just 51 00:04:20,700 --> 00:04:22,810 to create a space and then here work. 52 00:04:22,820 --> 00:04:29,950 We've got another input type and the time this time is this submit. 53 00:04:30,210 --> 00:04:35,480 So what's with me is submitting the data that is entered into this form. 54 00:04:35,790 --> 00:04:41,750 Thus what is suddenly the value of this submit is the value of this submit button is submit. 55 00:04:41,760 --> 00:04:44,570 So what it will do was details entered. 56 00:04:44,570 --> 00:04:48,020 It also meets are just put. 57 00:04:50,670 --> 00:04:51,590 Typing. 58 00:04:51,880 --> 00:04:52,630 Hello. 59 00:04:52,750 --> 00:05:03,630 I saw me in the form submit to itself because I have thought I have defined it here for it to some me 60 00:05:03,630 --> 00:05:04,200 to sub. 61 00:05:04,220 --> 00:05:12,030 Normally in a live production environment this will submit to a back end server. 62 00:05:12,330 --> 00:05:25,110 So this is how you would group related data in the form use in the field set tack in combination with 63 00:05:25,550 --> 00:05:26,490 a start. 64 00:05:26,490 --> 00:05:30,430 If you are an MP insert a stance has to define a form. 65 00:05:30,570 --> 00:05:32,030 That's what you would use. 66 00:05:32,040 --> 00:05:39,080 Thank you so much for watching in defeat you will when true how to group related data on a form. 67 00:05:39,360 --> 00:05:40,360 Thank you. 68 00:05:40,380 --> 00:05:41,290 Bye for now.