1
00:00:03,250 --> 00:00:07,810
الآن بعد أن رأينا كيفية إضافة أزرار إلى صفحة الويب الخاصة بنا.

2
00:00:07,810 --> 00:00:12,560
في هذا التمرين، سننظر في النماذج وكيف يمكننا إضافة نماذج إلى

3
00:00:12,560 --> 00:00:19,220
صفحة الويب الخاصة بنا ونمط عناصر النموذج هذه باستخدام فئات Bootstrap.

4
00:00:19,220 --> 00:00:23,065
بالعودة إلى صفحة contactus.html،

5
00:00:23,065 --> 00:00:28,215
قم بالتمرير لأسفل حتى ترى هذا التعليق هناك يسمى «النموذج يذهب هنا».

6
00:00:28,215 --> 00:00:32,990
نحن ذاهبون لاستبدال هذا مع النموذج في هذه الصفحة على شبكة الإنترنت.

7
00:00:32,990 --> 00:00:35,715
لذا، دعنا نحذف ذلك ثم نبني

8
00:00:35,715 --> 00:00:39,945
النموذج في هذا الموقع المعين داخل div هناك.

9
00:00:39,945 --> 00:00:41,855
للبدء في النموذج،

10
00:00:41,855 --> 00:00:50,585
سأقوم باستخدام علامة HTML للنموذج وبناء النموذج داخل علامة HTML هذه.

11
00:00:50,585 --> 00:00:52,960
لذلك، ضمن علامة النموذج هذه،

12
00:00:52,960 --> 00:00:57,925
دعونا نضيف عناصر نصف قطرها من نموذجنا.

13
00:00:57,925 --> 00:01:00,195
لذلك، داخل هذا النموذج،

14
00:01:00,195 --> 00:01:04,405
سأقوم بتقسيم هذا النموذج إلى عدة صفوف هناك.

15
00:01:04,405 --> 00:01:06,780
لتقسيم النموذج الخاص بك إلى صفوف،

16
00:01:06,780 --> 00:01:17,020
يمكنك ببساطة استخدام div مع class = «form-group» ثم تطبيق فئة الصف عليه.

17
00:01:20,370 --> 00:01:26,540
لذلك، مع هذا، ونحن في طريقنا لإضافة في مجموعتين نموذج هنا.

18
00:01:26,540 --> 00:01:29,795
أنا ذاهب لنسخ هذا ومن ثم لصقه أسفل هنا.

19
00:01:29,795 --> 00:01:34,055
لذلك، يمكنك أن ترى أنني ذاهب لإضافة صفين إلى هذا النموذج هنا.

20
00:01:34,055 --> 00:01:36,690
لذلك، لإضافة عنصر في هذا النموذج،

21
00:01:36,690 --> 00:01:44,330
ونحن نذهب إلى هذا ديف وبعد ذلك سوف تبدأ باستخدام علامة التسمية هنا.

22
00:01:44,330 --> 00:01:46,550
وبالنسبة لعلامات التسمية،

23
00:01:46,550 --> 00:01:48,460
لذلك سيكون لدي صفين؛

24
00:01:48,460 --> 00:01:51,270
واحد يسمح للمستخدم لملء اسمه الأول،

25
00:01:51,270 --> 00:01:53,470
والثاني لاسم العائلة.

26
00:01:53,470 --> 00:02:01,530
لذلك، هذا هو المكان الذي سنستخدم فيه هذا الملصق لتحديد الفئة هناك.

27
00:02:01,530 --> 00:02:09,080
الآن, وبالإضافة إلى ذلك, Bootstrap يسمح لنا لاستخدام شبكة Bootstrap

28
00:02:09,080 --> 00:02:19,300
لتحديد كيف سيتم وضع هذه النماذج من الإعلان لذلك سوف تطبيق col-md-2.

29
00:02:19,300 --> 00:02:27,720
يمكنك أن ترى أنني قمت بتطبيق فئات العمود md-2 على هذا العنصر معين.

30
00:02:27,720 --> 00:02:31,360
لذلك، سيشغل هذا العنصر في النموذج عمودين.

31
00:02:31,360 --> 00:02:33,465
لذلك، داخل هذا العنصر النموذج،

32
00:02:33,465 --> 00:02:37,950
قمنا بتقسيم كل صف إلى 12 عمودًا.

33
00:02:37,950 --> 00:02:40,940
لذلك، لأننا قد استخدمنا بالفعل الصف الخاص بـ div،

34
00:02:40,940 --> 00:02:45,030
بحيث يوفر لنا 12 عمودًا داخل div هناك.

35
00:02:45,030 --> 00:02:52,560
بالإضافة إلى ذلك، لا بد لي من تطبيق تسمية نموذج العقيد على هذا.

36
00:02:52,560 --> 00:02:56,905
لذلك، هذا هو ما يسمح لي بتحديد تسمية هنا.

37
00:02:56,905 --> 00:02:58,395
لذلك، لهذا التسمية،

38
00:02:58,395 --> 00:03:07,070
وسوف ملء التسمية كاسم أول ثم أغلق علامة التسمية.

39
00:03:07,070 --> 00:03:10,485
لذا، تسمح لي علامة التسمية هذه بإعطاء تسمية،

40
00:03:10,485 --> 00:03:14,150
والتي ستشغل عمودين يسار في هذا الصف بالذات.

41
00:03:14,150 --> 00:03:22,740
على الجانب الأيمن، سأستخدم div آخر طبقته الطبقة كـ col-md-10.

42
00:03:22,740 --> 00:03:28,420
لاحظ أن التسمية السابقة تستخدم col-md-2 هناك.

43
00:03:28,420 --> 00:03:29,665
لذلك، لهذا ديف،

44
00:03:29,665 --> 00:03:32,755
وأنا ذاهب لتطبيق كول-مد-10 هناك.

45
00:03:32,755 --> 00:03:35,120
ثم داخل هذا div،

46
00:03:35,120 --> 00:03:38,700
سأقوم بتطبيق عنصر إدخال،

47
00:03:38,700 --> 00:03:42,750
وهو من نوع النص.

48
00:03:42,750 --> 00:03:46,770
لذا، إذا كنت معتادًا على النماذج من HTML،

49
00:03:46,770 --> 00:03:50,460
فسترى أننا نستخدم عناصر النموذج من HTML

50
00:03:50,460 --> 00:03:55,910
لإنشاء هذا النموذج هنا بحيث يكون مربع الإدخال هنا من نوع النص.

51
00:03:55,910 --> 00:04:00,410
الآن، هذا هو المكان الذي سنقوم بتطبيق فئات Bootstrap على هذا

52
00:04:00,410 --> 00:04:05,500
وفئة Bootstrap المقابلة لهذا

53
00:04:05,500 --> 00:04:10,710
هو عنصر تحكم النموذج ومن ثم يمكنني تحديد

54
00:04:10,710 --> 00:04:16,165
معرف لهذا الاسم كاسم أول.

55
00:04:16,165 --> 00:04:21,260
لذلك، لاحظ أن هذا المعرف يطابق هذا التصنيف لـ div.

56
00:04:21,260 --> 00:04:26,625
لذا، الاسم الأول، ثم الاسم

57
00:04:26,625 --> 00:04:30,735
كاسم أول، كما سأحدد

58
00:04:30,735 --> 00:04:37,190
عنصرًا نائبًا لهذا، لذا دعني أستخدم السطر التالي هنا،

59
00:04:37,940 --> 00:04:46,890
العنصر النائب، أنا متأكد من معرفتك بـ HTML،

60
00:04:46,890 --> 00:04:52,020
فأنت تفهم كيف تتم هذه المواصفات هنا.

61
00:04:52,020 --> 00:04:59,355
لذلك، مع هذا، أنشأنا الآن عنصر النموذج الأول لدينا في شكلنا.

62
00:04:59,355 --> 00:05:03,170
دعونا نلقي نظرة سريعة على صفحة الويب.

63
00:05:03,170 --> 00:05:08,310
الذهاب إلى صفحة الويب الخاصة بنا، يمكنك الآن أن ترى كيف أدت إضافة عناصر النموذج إلى إنشاء

64
00:05:08,310 --> 00:05:14,515
مربع نص الإدخال هذا والتسمية على الجانب الأيسر.

65
00:05:14,515 --> 00:05:18,105
الآن، أنا ذاهب لإضافة في صف آخر مع الاسم الأخير.

66
00:05:18,105 --> 00:05:23,150
بالعودة إلى contactus.html الخاص بي،

67
00:05:23,150 --> 00:05:29,215
اسمحوا لي ببساطة نسخ هذا الجزء ثم لصقه في div الثاني هنا،

68
00:05:29,215 --> 00:05:32,875
ثم انتقل وتحرير ذلك.

69
00:05:32,875 --> 00:05:39,890
من الاسم الأول أغير ذلك إلى الاسم الأخير.

70
00:05:39,890 --> 00:05:45,090
تأكد من إكمال كافة التعديلات بشكل صحيح.

71
00:05:45,550 --> 00:05:49,470
حتى واحد مفقود تحرير غير لائق،

72
00:05:49,470 --> 00:05:53,210
سوف يسبب النموذج الخاص بك لا يعمل بشكل صحيح، لذلك تأكد من أن

73
00:05:53,210 --> 00:05:58,220
جميع الأشياء الاسم الأول هنا يتم استبدالها باسمي الأخير.

74
00:05:58,220 --> 00:05:59,795
لذلك، الاسم الأخير،

75
00:05:59,795 --> 00:06:02,640
md-10 عنصر تحكم نموذج النص.

76
00:06:02,640 --> 00:06:11,510
يجب أن يكون المعرف هنا اسم العائلة ويجب أن

77
00:06:11,510 --> 00:06:14,945
يكون الاسم أيضًا اسم العائلة والعنصر النائب

78
00:06:14,945 --> 00:06:21,030
مرة أخرى الاسم الأخير لذلك يجب أن يضيف هذا في صف ثاني باسم العائلة.

79
00:06:21,030 --> 00:06:22,530
الذهاب إلى صفحة الويب الخاصة بك،

80
00:06:22,530 --> 00:06:24,000
يمكنك أن ترى الآن النموذج

81
00:06:24,000 --> 00:06:28,150
يحصل ببطء في الشكل بحيث يكون لديك الاسم الأول واسم العائلة.

82
00:06:28,150 --> 00:06:33,790
الآن، يتيح إضافة عناصر الإدخال التالية.

83
00:06:33,790 --> 00:06:38,260
سنرى كيف يعمل هذا كما نضيف في التعليمات البرمجية.

84
00:06:38,260 --> 00:06:41,989
الانتقال الآن إلى الجزء التالي من التمرين،

85
00:06:41,989 --> 00:06:46,220
هنا سوف نضيف حقلين آخرين في

86
00:06:46,220 --> 00:06:51,690
نموذجنا هنا لإدخال رقم الهاتف ومعرف البريد الإلكتروني.

87
00:06:51,690 --> 00:06:54,870
نظرًا لأن البنية الأساسية للشفرة مشابهة

88
00:06:54,870 --> 00:06:58,610
للاسم الأول والاسم الأخير الذي قمت بإضافته بالفعل إلى النموذج،

89
00:06:58,610 --> 00:07:02,370
لذلك سأقوم بنسخ الشفرة من الاسم الأول والاسم

90
00:07:02,370 --> 00:07:08,000
الأخير ثم لصقها هنا ثم قم بتعديل الشفرة وفقًا لذلك.

91
00:07:08,000 --> 00:07:11,910
لذلك، لقد لصق الرمز من الاسم الأول والاسم الأخير هنا.

92
00:07:11,910 --> 00:07:17,080
دعونا المضي قدما والآن تعديل هذا لتحويله إلى الحقول

93
00:07:17,080 --> 00:07:22,745
التي تمكن المستخدم من إدخال رقم الهاتف ومعرف البريد الإلكتروني.

94
00:07:22,745 --> 00:07:24,420
لذلك، بالنسبة لرقم الهاتف،

95
00:07:24,420 --> 00:07:28,200
لذلك لدينا هنا بالفعل الاسم الأول والاسم الأخير أعلاه.

96
00:07:28,200 --> 00:07:34,380
لذا، الثالث، سأقوم بتغيير هذا إلى تسمية «telnum».

97
00:07:34,380 --> 00:07:38,745
لذا، هذا من رقم الهاتف ثم الطبقات،

98
00:07:38,745 --> 00:07:44,790
سأقوم بتطبيق فئة col-12 على هذا القول بأن هذا الملصق سيكون في

99
00:07:44,790 --> 00:07:52,795
السحب الخاص به عندما يظهر النموذج على أحجام شاشة صغيرة جدًا إلى صغيرة جدًا.

100
00:07:52,795 --> 00:07:55,660
ومن ثم، بالنسبة لحجم الشاشة المتوسط إلى الأعلى،

101
00:07:55,660 --> 00:07:59,945
سيتم عرض هذا في عمودين

102
00:07:59,945 --> 00:08:04,655
من هذا الصف بالذات هنا بحيث يكون التغيير الذي سنقوم به هناك.

103
00:08:04,655 --> 00:08:06,875
ثم أيضا، التسمية نفسها،

104
00:08:06,875 --> 00:08:14,860
اسمحوا لي تغيير ذلك للاتصال رقم الهاتف، الاتصال تل.

105
00:08:15,230 --> 00:08:18,915
الآن، رقم الهاتف نفسه،

106
00:08:18,915 --> 00:08:22,600
سوف ندع المستخدم يدخله كجزأين؛ واحد،

107
00:08:22,600 --> 00:08:25,485
وهو رمز المنطقة والثاني،

108
00:08:25,485 --> 00:08:28,225
والذي سيكون رقم الهاتف الفعلي.

109
00:08:28,225 --> 00:08:31,120
لذا، سآخذ هذا الجزء من الشفرة،

110
00:08:31,120 --> 00:08:34,640
والذي كان حقل الإدخال الذي كان لدينا

111
00:08:34,640 --> 00:08:40,315
للاسم الأول ومن ثم إنشاء واحد آخر أسفل هنا،

112
00:08:40,315 --> 00:08:44,190
والذي سأستخدمه لرقم الهاتف نفسه.

113
00:08:44,190 --> 00:08:50,560
والآن سنقوم بتحويل هذا أول واحد إلى حقل لإدخال رمز المنطقة.

114
00:08:50,560 --> 00:08:52,540
يمكنك أيضًا استخدامه على سبيل المثال،

115
00:08:52,540 --> 00:08:57,220
لرمز البلد إذا كان هذا ما ترغب في وضعه في النموذج.

116
00:08:57,220 --> 00:09:00,190
لذلك، بالنسبة لرمز المنطقة نفسه،

117
00:09:00,190 --> 00:09:02,520
سأقوم بالتقدم بطلب للحصول على div،

118
00:09:02,520 --> 00:09:09,105
والطبقات = «col-5 col-md-3 هنا».

119
00:09:09,105 --> 00:09:13,410
لذلك، لاحظ أنه بالنسبة للشاشة المتوسطة،

120
00:09:13,410 --> 00:09:16,805
لدينا عمودين تحتلهما التسمية،

121
00:09:16,805 --> 00:09:20,630
وثلاثة أعمدة يشغلها رمز المنطقة نفسه

122
00:09:20,630 --> 00:09:25,385
والأعمدة السبعة المتبقية سأعطيها إلى حقل النص هنا.

123
00:09:25,385 --> 00:09:29,650
لذلك، وبالمثل، لرمز المنطقة أقول العقيد خمسة.

124
00:09:29,650 --> 00:09:32,680
لذا، بالنسبة للشاشات الصغيرة جدًا إلى الصغيرة، سيشغل هذا

125
00:09:32,680 --> 00:09:37,520
خمسة أعمدة ثم بالنسبة للأعمدة السبعة المتبقية،

126
00:09:37,520 --> 00:09:42,640
سنترك رقم الهاتف يغذي نفسه في.

127
00:09:42,640 --> 00:09:48,510
لذلك، اسمحوا لي أن تغيير واحد المقبل إلى كول-7 و كول-مد-7 هنا.

128
00:09:49,540 --> 00:09:54,365
الآن، هذا الحقل سوف أغير هذا إلى الهاتف،

129
00:09:54,365 --> 00:09:58,965
نوع الإدخال الهاتف لرقم الهاتف والطبقة هي التحكم

130
00:09:58,965 --> 00:10:08,830
في النموذج، والمعرف هو رمز المنطقة والاسم هو رمز المنطقة ثم العنصر النائب،

131
00:10:08,830 --> 00:10:12,415
وسوف أغير هذا إلى رمز المنطقة.

132
00:10:12,415 --> 00:10:14,215
والجزء التالي،

133
00:10:14,215 --> 00:10:21,885
وسوف نقوم بتغيير هذا أيضا نوع الهاتف والمعرف هو telnum،

134
00:10:21,885 --> 00:10:28,060
والاسم هو telnum والعنصر النائب، في

135
00:10:28,060 --> 00:10:34,830
حد ذاته، سيكون رقم الهاتف.

136
00:10:34,830 --> 00:10:40,975
لذا، سيشكل هذا حقل رقم الهاتف،

137
00:10:40,975 --> 00:10:42,840
والذي سيتم إدخاله كجزأين؛

138
00:10:42,840 --> 00:10:45,160
رمز المنطقة ورقم الهاتف.

139
00:10:45,160 --> 00:10:47,180
لذلك، نحن نستخدم، مرة أخرى،

140
00:10:47,180 --> 00:10:51,540
فئات العمود من أجل هيكلة كيفية

141
00:10:51,540 --> 00:10:57,260
عرض جزأين من حقل الإدخال في النموذج هناك.

142
00:10:57,260 --> 00:10:59,490
الآن آخر واحد، بطبيعة الحال،

143
00:10:59,490 --> 00:11:02,940
سيكون هذا لمعرف البريد الإلكتروني حتى التسمية،

144
00:11:02,940 --> 00:11:08,595
وأنا تحويل ذلك إلى معرف البريد الإلكتروني ومن ثم التسمية نفسها

145
00:11:08,595 --> 00:11:14,345
هي البريد الإلكتروني ونوع الإدخال هو البريد الإلكتروني.

146
00:11:14,345 --> 00:11:16,575
الآن، نقوم بتغيير النوع إلى البريد الإلكتروني،

147
00:11:16,575 --> 00:11:22,060
وهو مسموح به في HTML بحيث في وقت لاحق إذا كنا بحاجة إلى القيام بالتحقق من صحة النموذج،

148
00:11:22,060 --> 00:11:24,040
فإننا نعلم أن هذا الحقل يجب أن

149
00:11:24,040 --> 00:11:28,730
يحتوي فقط على نوع البريد الإلكتروني من الإدخال هناك، والمعرف

150
00:11:28,730 --> 00:11:37,490
نفسه، ومعرف البريد الإلكتروني واسم البريد الإلكتروني والعنصر النائب.

151
00:11:38,600 --> 00:11:42,295
البريد الإلكتروني. هذا كل شيء

152
00:11:42,295 --> 00:11:47,335
دعونا حفظ التغييرات والذهاب ونلقي نظرة على النموذج المحدث.

153
00:11:47,335 --> 00:11:49,820
الذهاب إلى النموذج في المتصفح،

154
00:11:49,820 --> 00:11:54,030
ترى الآن صفين إضافيين إضافيين في نموذجنا.

155
00:11:54,030 --> 00:11:57,030
يتم إضافة الاسم الأول واسم العائلة في الجزء السابق من التمرين.

156
00:11:57,030 --> 00:11:59,050
لذلك، هنا، لدينا رقم هاتف الاتصال،

157
00:11:59,050 --> 00:12:01,805
الذي ينقسم إلى رمز المنطقة ورقم الهاتف.

158
00:12:01,805 --> 00:12:06,515
لاحظ كيف استخدمنا فئات الأعمدة لوضع هذين الاثنين في

159
00:12:06,515 --> 00:12:11,650
النموذج نفسه ثم حقل البريد الإلكتروني هنا.

160
00:12:11,650 --> 00:12:15,775
دعونا نلقي نظرة على نفس الشيء على حجم شاشة صغيرة إضافية.

161
00:12:15,775 --> 00:12:18,465
لذلك، عندما تذهب إلى حجم شاشة صغيرة إضافية،

162
00:12:18,465 --> 00:12:20,800
ستلاحظ كيف يتم وضع النموذج نفسه بها.

163
00:12:20,800 --> 00:12:24,690
سترى أن التسمية في الأعلى ثم الحقل نفسه في الأسفل.

164
00:12:24,690 --> 00:12:26,055
لذا الاسم الأول، الاسم الأخير.

165
00:12:26,055 --> 00:12:28,605
لاحظ كيف

166
00:12:28,605 --> 00:12:33,160
يتم وضع حقول إدخال رقم هاتف جهة الاتصال باستخدام فئات الأعمدة،

167
00:12:33,160 --> 00:12:34,855
وبالتالي فإن رمز المنطقة هنا،

168
00:12:34,855 --> 00:12:36,085
ورقم الهاتف،

169
00:12:36,085 --> 00:12:38,410
ثم معرف البريد الإلكتروني هنا.

170
00:12:38,410 --> 00:12:41,630
الآن، سنستمر في التمرين

171
00:12:41,630 --> 00:12:44,145
الاستمرار في الخطوة التالية،

172
00:12:44,145 --> 00:12:49,680
وسوف نضيف في مربع الاختيار وبعد ذلك سوف نضيف في اختيار اثنين أو أربعة.

173
00:12:49,680 --> 00:12:51,680
لإضافة مربع اختيار،

174
00:12:51,680 --> 00:12:57,590
دعنا فقط نسخ مجموعة النماذج هذه هنا حتى نضيفها كصف آخر هنا،

175
00:12:57,590 --> 00:13:01,595
ثم نضيف في div مجموعة النماذج هنا،

176
00:13:01,595 --> 00:13:04,970
ثم نغلق div هنا.

177
00:13:04,970 --> 00:13:08,860
ثم داخل هذا الصف مجموعة النموذج،

178
00:13:08,860 --> 00:13:11,280
لذلك هذا يعطينا صف واحد آخر في النموذج.

179
00:13:11,280 --> 00:13:13,330
حتى داخل هذا الصف مجموعة النموذج،

180
00:13:13,330 --> 00:13:16,120
اسمحوا لي أن أضيف في أولا مربع الاختيار.

181
00:13:16,120 --> 00:13:22,655
لذلك، للقيام بذلك، سنضيف في div مع class = «col-md-6"

182
00:13:22,655 --> 00:13:26,610
لذلك سترى أن هذا سيشغل

183
00:13:26,610 --> 00:13:31,695
ستة أعمدة في حجم الشاشة المتوسطة إلى الكبيرة،

184
00:13:31,695 --> 00:13:36,800
ثم إزاحة md-2، لذلك هذا سوف يقابله إلى

185
00:13:36,800 --> 00:13:43,850
اليمين بواسطة عمودين ثم يعرض مربع الاختيار هناك.

186
00:13:43,850 --> 00:13:48,490
الآن، في الداخل هنا، لإضافة مربع اختيار،

187
00:13:48,490 --> 00:13:58,170
سنقول div مع class = «form-check»

188
00:13:58,170 --> 00:14:07,200
وداخل فئة الاختيار هذه سنضيف في نوع الإدخال = «مربع الاختيار»

189
00:14:07,200 --> 00:14:17,990
و class = «form-check input» ثم دعني أذهب إلى السطر التالي ثم

190
00:14:17,990 --> 00:14:24,400
أقول name = «الموافقة» و

191
00:14:24,400 --> 00:14:32,560
id = «الموافقة» والقيمة عبارة عن سلسلة فارغة هناك.

192
00:14:32,560 --> 00:14:35,360
وإلى مربع الاختيار هذا،

193
00:14:35,360 --> 00:14:36,735
دعونا إضافة تسمية.

194
00:14:36,735 --> 00:14:38,380
لذلك، لإضافة تسمية،

195
00:14:38,380 --> 00:14:41,940
سنذهب وإضافة في

196
00:14:41,940 --> 00:14:50,885
فئة التسمية = «form-check label» ثم هذه التسمية

197
00:14:50,885 --> 00:14:53,775
هي لمربع الاختيار هذا الذي أضفناه للتو.

198
00:14:53,775 --> 00:15:00,270
لذلك، هذا هو السبب في أننا سوف نقول ل = «الموافقة» لذلك لاحظ أنه بالنسبة لمربع الاختيار،

199
00:15:00,270 --> 00:15:03,635
كنا قد أعطينا الاسم والمعرف كما الموافقة لذلك هذا هو السبب هنا،

200
00:15:03,635 --> 00:15:07,090
ونحن سوف حفظ للتسمية للموافقة.

201
00:15:07,090 --> 00:15:09,560
ثم داخل هذا الملصق،

202
00:15:09,560 --> 00:15:19,250
سنقوم بتحديد المحتوى على أنه «هل يمكننا الاتصال بك؟»

203
00:15:19,250 --> 00:15:24,240
ثم حفظ التغييرات ودعونا نذهب ونلقي نظرة على شكلنا.

204
00:15:24,240 --> 00:15:25,810
الذهاب إلى صفحة الويب،

205
00:15:25,810 --> 00:15:30,970
يمكنك الآن أن ترى أننا قد أضفنا في مربع اختيار جنبا إلى جنب مع تسمية هنا ولاحظ

206
00:15:30,970 --> 00:15:36,685
أن هذا التسمية هو بخط غامق بسبب استخدام علامة «قوية» هناك،

207
00:15:36,685 --> 00:15:40,270
ونحن فعلنا إزاحة MD-2.

208
00:15:40,270 --> 00:15:42,850
لهذا السبب ندفع مربع الاختيار هذا على طول الطريق إلى هنا.

209
00:15:42,850 --> 00:15:46,750
هذا ليس لديه تسمية هنا ولكن بدلا من ذلك يتم دفع هذا الحق هنا،

210
00:15:46,750 --> 00:15:50,765
لذلك هذا هو السبب في استخدام إزاحة مد-2 هنا،

211
00:15:50,765 --> 00:15:56,980
وهذا واحد يحتل مد-6 حتى ستة أعمدة هنا.

212
00:15:56,980 --> 00:15:59,180
لم ننتهي من ذلك بعد

213
00:15:59,180 --> 00:16:03,075
أنا ذاهب لإضافة في الجزء التالي هنا،

214
00:16:03,075 --> 00:16:06,995
وهو مربع اختيار هناك.

215
00:16:06,995 --> 00:16:11,230
لذلك سوف أطبق ديف واحد أكثر هنا مع

216
00:16:11,230 --> 00:16:20,475
فئة = «كول-مد-3 إزاحة مد-1" هنا.

217
00:16:20,475 --> 00:16:23,375
وداخل هذا div،

218
00:16:23,375 --> 00:16:27,160
سأقوم بتحديد تحديد.

219
00:16:27,160 --> 00:16:30,590
لذا، مرة أخرى، من معرفتك بـ HTML،

220
00:16:30,590 --> 00:16:33,260
تعرف ما يفعله التحديد لك.

221
00:16:33,260 --> 00:16:36,635
الآن، سيطبق التحديد

222
00:16:36,635 --> 00:16:45,920
عنصر تحكم نموذج الفئات بحيث تكون فئة Bootstrap التي أقوم بتطبيقها على التحديد هنا،

223
00:16:46,130 --> 00:16:49,245
ثم أغلق التحديد.

224
00:16:49,245 --> 00:16:53,745
وداخل هنا، أحتاج إلى إعطاء خيارات للتحديد.

225
00:16:53,745 --> 00:16:57,500
لذلك، أنا باستخدام اختيار بسيط هنا،

226
00:16:57,500 --> 00:17:02,570
وبالتالي فإن أول واحد هو خيار

227
00:17:02,570 --> 00:17:09,060
للهاتف أو البريد الإلكتروني وإغلاق الخيار.

228
00:17:09,060 --> 00:17:13,735
لذلك، هذا يخلق عنصر تحديد في النموذج الخاص بي،

229
00:17:13,735 --> 00:17:15,310
الذي يحتوي على خيارين؛

230
00:17:15,310 --> 00:17:17,080
الهاتف والبريد الإلكتروني، لذلك،

231
00:17:17,080 --> 00:17:18,505
دعونا حفظ التغييرات.

232
00:17:18,505 --> 00:17:20,180
إلقاء نظرة على صفحة الويب الخاصة بنا،

233
00:17:20,180 --> 00:17:26,960
يمكنك الآن أن ترى كيف يتم الآن إنشاء مربع تحديد الهاتف والبريد الإلكتروني هنا حتى

234
00:17:26,960 --> 00:17:34,025
يسمح لي هذا بتحديد أي واحد للقيام به وبعد ذلك يمكنك أيضا التحقق من مربع الاختيار مثل هذا.

235
00:17:34,025 --> 00:17:36,730
لذلك، هذا ينتهي الصف التالي.

236
00:17:36,730 --> 00:17:39,040
دعونا نضيف في صف واحد آخر،

237
00:17:39,040 --> 00:17:42,960
والتي سوف تسمح للمستخدم لكتابة فعلا في ملاحظاتهم.

238
00:17:42,960 --> 00:17:47,535
لذلك، سأستخدم منطقة نص لتنسيق ذلك.

239
00:17:47,535 --> 00:17:51,615
بالنسبة للمرحلة التالية، سأستخدم منطقة نص.

240
00:17:51,615 --> 00:17:58,840
لذا، ما سأفعله هو أنني سأصعد ونسخ جزء البريد الإلكتروني هذا منه.

241
00:17:58,840 --> 00:18:02,115
أنا كسول جدا للحفاظ على الكتابة في كل شيء في كل وقت.

242
00:18:02,115 --> 00:18:06,950
لذلك، أنا أميل إلى القيام بالقص واللصق حيثما كان ذلك ممكنا، ولكن لهذا واحد،

243
00:18:06,950 --> 00:18:15,670
يجب أن يكون التسمية ردود الفعل وتسمية نموذج العمود،

244
00:18:15,670 --> 00:18:24,575
ثم النص الفعلي هو، «ملاحظاتك هنا».

245
00:18:24,575 --> 00:18:26,450
إذن هذا هو الملصق

246
00:18:26,450 --> 00:18:28,795
وبعد ذلك، هنا، الثانية،

247
00:18:28,795 --> 00:18:32,530
أنا ذاهب إلى تنسيق هذا واحد.

248
00:18:32,530 --> 00:18:34,140
بدلاً من نوع الإدخال،

249
00:18:34,140 --> 00:18:39,085
سأقوم بتغيير ذلك إلى منطقة نص،

250
00:18:39,085 --> 00:18:42,815
ثم لا أحتاج إلى النوع هناك.

251
00:18:42,815 --> 00:18:51,400
منطقة النص، لا يزال الفصل عنصر تحكم النموذج والمعرف هو ردود الفعل.

252
00:18:51,400 --> 00:18:58,890
الاسم هو ردود الفعل والعنصر النائب غير مطلوب

253
00:18:58,890 --> 00:19:02,880
هنا وبدلا من ذلك تغييره إلى عدد الصفوف التي

254
00:19:02,880 --> 00:19:06,890
أريد أن أعطي من ردود الفعل لمنطقة النص؟

255
00:19:06,890 --> 00:19:10,340
لذلك سأقول 12 صفًا ثم أغلق النص.

256
00:19:10,340 --> 00:19:15,215
لذلك لاحظ كيف قمت بتضمين textarea في النموذج الخاص بي.

257
00:19:15,215 --> 00:19:16,680
احفظ التغييرات.

258
00:19:16,680 --> 00:19:19,560
ألقِ نظرة الذهاب إلى صفحة الويب الخاصة بي،

259
00:19:19,560 --> 00:19:23,910
والآن ترى النموذج الخاص بي يأخذ شكله الكامل هنا.

260
00:19:23,910 --> 00:19:25,470
لديك الاسم الأول، اسم العائلة،

261
00:19:25,470 --> 00:19:28,050
الهاتف، البريد الإلكتروني هناك، ثم التعليقات.

262
00:19:28,050 --> 00:19:30,720
مساحة النص من 12 صفًا.

263
00:19:30,720 --> 00:19:36,080
الآن، سوف تحتاج إلى زر الذي يجب على المستخدم النقر عليه لإرسال ملاحظاتهم.

264
00:19:36,080 --> 00:19:40,715
لذلك، يتيح إضافة زر إرسال إلى هذا النموذج.

265
00:19:40,715 --> 00:19:44,030
بالعودة إلى النموذج مرة أخرى،

266
00:19:44,030 --> 00:19:47,195
قم بإنشاء صف واحد آخر

267
00:19:47,195 --> 00:19:55,715
هنا باستخدام div هنا مع صف مجموعة النموذج

268
00:19:55,715 --> 00:19:59,405
هنا، وداخل هنا سأقوم بإضافة زر هنا.

269
00:19:59,405 --> 00:20:02,300
لذلك، أود أن أقول، div

270
00:20:02,340 --> 00:20:10,500
class = «offset-md-2" لأنني أريد أن

271
00:20:10,500 --> 00:20:13,880
يتم وضع الزر الخاص بي أسفل كل تلك الحقول التي

272
00:20:13,880 --> 00:20:17,850
لدي هنا بحيث يتم استخدام العمودين الأيسر للتسمية.

273
00:20:17,850 --> 00:20:21,750
وبالتالي فإن زر الإرسال لا يحتاج إلى تسمية لذلك أنا مجرد الذهاب لدفعه إلى

274
00:20:21,750 --> 00:20:25,890
اليمين هنا وبعد ذلك أود أن

275
00:20:25,890 --> 00:20:35,090
أقول «كول-مد-10" لذلك هذا من شأنه أن تحتل الأعمدة العشرة المتبقية هناك.

276
00:20:35,090 --> 00:20:37,310
ثم داخل تلك div،

277
00:20:37,310 --> 00:20:40,045
سأقوم بإضافة زر هناك.

278
00:20:40,045 --> 00:20:45,020
لذلك، عند إضافة زر إلى النموذج الخاص بك،

279
00:20:45,020 --> 00:20:50,190
استخدم علامة الزر هنا مع إرسال نوع.

280
00:20:50,190 --> 00:20:56,440
لذا، هذا هو زر الإرسال للنموذج الخاص بك هناك والطبقة.

281
00:20:56,440 --> 00:21:02,890
تذكر الطبقات زر، زر الأساسي،

282
00:21:02,890 --> 00:21:15,110
لذلك هذا من شأنه أن يخلق زر أزرق داكن في النموذج الخاص بك ومن

283
00:21:15,110 --> 00:21:19,805
ثم إغلاق زر هناك، وبعد ذلك أنا ذاهب للذهاب ببساطة داخل وداخل الزر،

284
00:21:19,805 --> 00:21:28,725
وسوف أعطي اسم باسم «إرسال ردود الفعل» ومن ثم حفظ التغييرات.

285
00:21:28,725 --> 00:21:31,295
الآن، شكلنا مكتمل.

286
00:21:31,295 --> 00:21:36,600
لذلك، دعونا نلقي نظرة على النسخة النهائية من نموذجنا.

287
00:21:36,600 --> 00:21:38,660
الذهاب إلى صفحة الويب الخاصة بنا،

288
00:21:38,660 --> 00:21:40,875
يمكنك الآن رؤية النموذج المكتمل.

289
00:21:40,875 --> 00:21:43,135
كل هذه الحقول رأيناها بالفعل،

290
00:21:43,135 --> 00:21:46,610
الزر في الجزء السفلي مع عبارة «إرسال

291
00:21:46,610 --> 00:21:51,265
ردود الفعل» والزر الأزرق الداكن اللون بسبب استخدام زر «الأساسي».

292
00:21:51,265 --> 00:21:58,870
لذلك، هذا يكمل النموذج الذي أردنا إنشاءه في صفحة الويب الخاصة بنا.

293
00:21:58,870 --> 00:22:02,380
مع هذا، نكمل هذا التمرين،

294
00:22:02,380 --> 00:22:07,135
حيث رأينا كيف يمكننا بناء نموذج وإدراجه في صفحة الويب الخاصة بنا.

295
00:22:07,135 --> 00:22:10,130
سوف تعمل مع النماذج في بعض

296
00:22:10,130 --> 00:22:13,720
التدريبات اللاحقة بما في ذلك مهمتك الثانية.

297
00:22:13,720 --> 00:22:19,310
هذا هو الوقت المناسب بالنسبة لك للقيام بتعليق جيد مع نماذج الرسالة.