1 00:00:00,000 --> 00:00:13,270 I The proposal This weapons is created user registration form similar to the one presented 2 00:00:13,270 --> 00:00:16,410 now containing input fields, 3 00:00:16,410 --> 00:00:18,350 namely the name, 4 00:00:18,350 --> 00:00:19,750 E mile, 5 00:00:19,750 --> 00:00:22,410 gender and finally, 6 00:00:22,410 --> 00:00:24,390 user name and password. 7 00:00:24,390 --> 00:00:31,740 Being this information submitted by a registration button at the bottom of the page, 8 00:00:31,740 --> 00:00:40,020 I will start with creation off the different elements of the page using the HTML code, 9 00:00:40,020 --> 00:00:48,060 all the elements of the farm will be placed inside the Deve with class name container in 10 00:00:48,060 --> 00:00:53,730 order to allow centering dif and all form elements on the page. 11 00:00:53,730 --> 00:01:04,420 So before creating the form I m diff container which at the top contained the text register 12 00:01:04,420 --> 00:01:08,790 inserted inside an adding tag. 13 00:01:08,790 --> 00:01:12,480 Next, 14 00:01:12,480 --> 00:01:21,210 I have an H R tech that in certain horizontal line used to separate the different types of 15 00:01:21,210 --> 00:01:22,020 content, 16 00:01:22,020 --> 00:01:27,550 namely my entitled and form with respective elements. 17 00:01:27,550 --> 00:01:38,350 Now I start my form using the form tech that defines the farm used to get user input. 18 00:01:38,350 --> 00:01:48,510 This element receives action attributes that tell us where to send form data when data is 19 00:01:48,510 --> 00:01:52,040 submitted for this page. 20 00:01:52,040 --> 00:01:58,210 This attribute is not very important because the exercises intended on Lee to create a 21 00:01:58,210 --> 00:02:03,850 formally out and not out to receive the data coming from the form. 22 00:02:03,850 --> 00:02:12,150 I will then put just a Demi file name in the action at Root. 23 00:02:12,150 --> 00:02:21,650 The first thing put field is now added to place the name. 24 00:02:21,650 --> 00:02:28,350 So I used the level tag for the first input element to match with the I D. 25 00:02:28,350 --> 00:02:43,480 Off the input they are labeling using for disguise Name value in four at root and text name 26 00:02:43,480 --> 00:02:54,250 between open and close tech with bold format to appear along with input field that receives 27 00:02:54,250 --> 00:02:54,980 the name. 28 00:02:54,980 --> 00:03:04,550 The next step is to define the input element using type texts. 29 00:03:04,550 --> 00:03:07,260 Debt receives the place. 30 00:03:07,260 --> 00:03:08,620 Older attributes. 31 00:03:08,620 --> 00:03:15,680 We'd value name text that appears inside input field, 32 00:03:15,680 --> 00:03:20,350 working as a shar tint that describes the expected value. 33 00:03:20,350 --> 00:03:25,440 And finally, 34 00:03:25,440 --> 00:03:27,140 the attributes I d. 35 00:03:27,140 --> 00:03:34,270 With name value being equal to the value used into four attributes off the label. 36 00:03:34,270 --> 00:03:39,760 Tech two related label with the respective input element. 37 00:03:39,760 --> 00:03:41,450 Like I said previously, 38 00:03:41,450 --> 00:03:47,470 so is expected that when I click in my label, 39 00:03:47,470 --> 00:03:50,350 it jumps to the respective input field. 40 00:03:50,350 --> 00:03:52,800 As you can see now individual. 41 00:03:52,800 --> 00:04:03,680 To finish this first input element I used to required at route that is used, 42 00:04:03,680 --> 00:04:11,030 decide that element Best Byfield out before submitting the farm for this guy's. 43 00:04:11,030 --> 00:04:19,920 A warning message appears if the element is not field now, 44 00:04:19,920 --> 00:04:27,530 the second input element that receives information from the mail having a cold very similar 45 00:04:27,530 --> 00:04:29,570 to the one created previously, 46 00:04:29,570 --> 00:04:39,180 I didn't copy this same cult changing in the level tack the value off the fort attributes 47 00:04:39,180 --> 00:04:41,950 for email as well. 48 00:04:41,950 --> 00:04:52,510 The respective texts in the element input I now receive in the type, 49 00:04:52,510 --> 00:05:02,860 attribute the male value to ensure that input value as an email address format into place. 50 00:05:02,860 --> 00:05:03,400 Older, 51 00:05:03,400 --> 00:05:04,480 I write email, 52 00:05:04,480 --> 00:05:04,940 address, 53 00:05:04,940 --> 00:05:13,880 text and finally die de email and the required attribute, 54 00:05:13,880 --> 00:05:20,490 like in the previous field. 55 00:05:20,490 --> 00:05:21,770 Clicking on the level, 56 00:05:21,770 --> 00:05:29,450 will make female field active and entering text without the at symbol in the mail field. 57 00:05:29,450 --> 00:05:36,030 It's suspected to get a warning telling death email address needs this single, 58 00:05:36,030 --> 00:05:39,030 but we'll see the situation at the end. 59 00:05:39,030 --> 00:05:44,130 Before moving to the next step, 60 00:05:44,130 --> 00:05:50,250 I had to line break tags to give spice between the different elements of the farm. 61 00:05:50,250 --> 00:05:54,720 For the next input fields, 62 00:05:54,720 --> 00:05:59,150 I defined user gender with male or female value, 63 00:05:59,150 --> 00:06:06,910 using the type radio for this input field that defines a radio button to select one off the 64 00:06:06,910 --> 00:06:08,300 two options. 65 00:06:08,300 --> 00:06:11,340 First, 66 00:06:11,340 --> 00:06:18,730 I created my label with the gender texts to identify the type of information that I want 67 00:06:18,730 --> 00:06:19,950 from the user. 68 00:06:19,950 --> 00:06:23,920 Now, 69 00:06:23,920 --> 00:06:25,670 for the first option, 70 00:06:25,670 --> 00:06:35,850 I used the radio type with name Gender I D. 71 00:06:35,850 --> 00:06:53,830 Male and finally do required attributes like in the previous inputs for the level tech for 72 00:06:53,830 --> 00:06:54,700 at Your Roots, 73 00:06:54,700 --> 00:06:57,270 with the same name given to the I. 74 00:06:57,270 --> 00:06:57,850 D. 75 00:06:57,850 --> 00:07:08,990 Tooling these two elements label and radio button for when I click on level, 76 00:07:08,990 --> 00:07:17,910 the radio button becomes active for the second radio button. 77 00:07:17,910 --> 00:07:22,550 I said it again with gender name, 78 00:07:22,550 --> 00:07:29,260 leaving the two radio buttons with the same name so that we can combine the two radio 79 00:07:29,260 --> 00:07:33,750 buttons together and get the choosen value. 80 00:07:33,750 --> 00:07:37,460 But this is a part off server side programming. 81 00:07:37,460 --> 00:07:41,110 Finally, 82 00:07:41,110 --> 00:07:43,390 we have the female I D. 83 00:07:43,390 --> 00:07:53,550 And for the label we create before attribute with the value equal to the I D. 84 00:07:53,550 --> 00:07:59,900 So setting this values clicking. 85 00:07:59,900 --> 00:08:06,400 One of the levels will feel the respective choice mile are female. 86 00:08:06,400 --> 00:08:13,950 In the last street input fields, 87 00:08:13,950 --> 00:08:21,120 I received the user name and password definition that has to be confirmed in the left field 88 00:08:21,120 --> 00:08:21,120 . 89 00:08:21,120 --> 00:08:31,730 I didn't make a copy off the cold already used having to change to the first guys. 90 00:08:31,730 --> 00:08:33,130 The attribute. 91 00:08:33,130 --> 00:08:42,150 Far from the libel tech to the value user and writing text. 92 00:08:42,150 --> 00:08:45,750 User name to be used s level. 93 00:08:45,750 --> 00:08:52,090 Indian put steak. 94 00:08:52,090 --> 00:09:04,110 I have the type text with the user name texts in the place older i d. 95 00:09:04,110 --> 00:09:11,750 We'd value user and finally, 96 00:09:11,750 --> 00:09:16,390 the required attribute to make this field needed. 97 00:09:16,390 --> 00:09:27,160 Now the best words for the first input field where the password will be set. 98 00:09:27,160 --> 00:09:41,390 I use best value too far attributes and text best words to appear as label into farm in the 99 00:09:41,390 --> 00:09:42,650 input tag. 100 00:09:42,650 --> 00:09:47,450 I use type password so that the characters are not visible. 101 00:09:47,450 --> 00:09:56,000 The place older at roots this time f the enter password texts value, 102 00:09:56,000 --> 00:10:11,630 while the I D as the best value similar to for a tribute to end the best word. 103 00:10:11,630 --> 00:10:22,460 Repeat fields that as the value best repeats in the far after route and the label texts 104 00:10:22,460 --> 00:10:26,100 repeat best words. 105 00:10:26,100 --> 00:10:33,610 Do type Attitude reminds passwords, 106 00:10:33,610 --> 00:10:46,890 while the place older contains the text repeat password to wind the I D as the value best 107 00:10:46,890 --> 00:10:59,940 repeat now to finish form at the bottom, 108 00:10:59,940 --> 00:11:06,230 I set a submit button using button tag with type, 109 00:11:06,230 --> 00:11:14,090 submit end class rashes that used to define style for this element. 110 00:11:14,090 --> 00:11:23,250 I know if all form elements and it's on Lee necessary to define the style for each one. 111 00:11:23,250 --> 00:11:25,850 Starting with body, 112 00:11:25,850 --> 00:11:40,050 that's I define with Ariel fund family and apply a burly would background color now 113 00:11:40,050 --> 00:11:43,360 container that has inside form elements. 114 00:11:43,360 --> 00:11:52,770 I defined wit with the value off 50% related to the width off the body and Centre de Steve 115 00:11:52,770 --> 00:11:52,770 , 116 00:11:52,770 --> 00:12:00,660 using the marching property with values zero and outer giving equal values to the left and 117 00:12:00,660 --> 00:12:01,690 right margin. 118 00:12:01,690 --> 00:12:08,590 Two F some space between the elements and each side of the container. 119 00:12:08,590 --> 00:12:18,390 I used the petting property with value off 20 pixels and finally define white as the 120 00:12:18,390 --> 00:12:19,130 containers. 121 00:12:19,130 --> 00:12:26,430 Background color funding put elements, 122 00:12:26,430 --> 00:12:28,030 namely with type, 123 00:12:28,030 --> 00:12:28,840 text, 124 00:12:28,840 --> 00:12:31,320 best word and email. 125 00:12:31,320 --> 00:12:37,390 I create the specific formats that will not be applied to the radio buttons, 126 00:12:37,390 --> 00:12:44,260 which is why I have to declare the type off input elements that will be changed. 127 00:12:44,260 --> 00:12:47,730 For this situation, 128 00:12:47,730 --> 00:12:53,150 I define input with type dext inputs, 129 00:12:53,150 --> 00:13:00,150 type passwords and input type email in my CSS selector, 130 00:13:00,150 --> 00:13:05,600 separated by commas being a great methods to choose. 131 00:13:05,600 --> 00:13:08,960 Ali specific attributes values. 132 00:13:08,960 --> 00:13:27,970 I can now define the style for these elements with the wheat off 95% bedding 15% and stop 133 00:13:27,970 --> 00:13:42,010 and bottom margin with 15 pixels and 25 pixels s background color for the input element. 134 00:13:42,010 --> 00:13:49,530 I used the color light gray and for the barter property I use about their wheat off one 135 00:13:49,530 --> 00:13:50,280 pixel. 136 00:13:50,280 --> 00:14:01,100 We'd solid line and caller represented by the exit decimal number BBB to finish. 137 00:14:01,100 --> 00:14:06,220 I use the property barter radios that allows to make a rounded corners. 138 00:14:06,220 --> 00:14:11,070 Indian put element using a value off three pixels, 139 00:14:11,070 --> 00:14:15,700 the Eiger Devalue Doumar, 140 00:14:15,700 --> 00:14:23,960 a rounded input fields will be next. 141 00:14:23,960 --> 00:14:30,670 I defined style for the class button in order to change the layout off the submit button, 142 00:14:30,670 --> 00:14:49,140 giving a wit off 20% big round color green white color to the debts ends up heading off 15 143 00:14:49,140 --> 00:15:04,080 pixels to finish horizontal rule element that is used to separate the title and form that I 144 00:15:04,080 --> 00:15:13,940 defined with the bottom margin with 20 pixels to add some spice between this line and the 145 00:15:13,940 --> 00:15:15,870 first farm element, 146 00:15:15,870 --> 00:15:26,600 I know we have the final layouts being only necessary to do some tests to remember some 147 00:15:26,600 --> 00:15:28,810 details that I talked previously, 148 00:15:28,810 --> 00:15:34,370 starting by clicking on the levels of each input fields, 149 00:15:34,370 --> 00:15:39,190 giving the user access to the corresponding text field, 150 00:15:39,190 --> 00:15:47,950 Onley having to write the respective text in case off data to be field. 151 00:15:47,950 --> 00:15:53,350 We see the warning message that tell us that fields are military. 152 00:15:53,350 --> 00:16:00,330 A message debt was only possible because we used the required attribute. 153 00:16:00,330 --> 00:16:10,870 Another detail that I have already mentioned is the use off the male type in the second 154 00:16:10,870 --> 00:16:16,700 input field that will be very useful to it in the fire texts with the mail formats, 155 00:16:16,700 --> 00:16:18,040 namely, 156 00:16:18,040 --> 00:16:24,040 having to contain the at character situation visible. 157 00:16:24,040 --> 00:16:33,470 Now where I write an email address without that character receiving an error warning to 158 00:16:33,470 --> 00:16:34,930 wind the password. 159 00:16:34,930 --> 00:16:43,540 Information that is isn't due to the use off the type passwords that is used in the input 160 00:16:43,540 --> 00:16:44,360 element. 161 00:16:44,360 --> 00:16:48,750 Thanks for watching.