1
00:00:00,930 --> 00:00:06,100
この動画では、この登録フォームのソリューションを作成していきます。

2
00:00:06,640 --> 00:00:09,360
だから私はそれを保存する新しいファイルがあります。

3
00:00:09,540 --> 00:00:17,910
私はちょうどHDMIの私は崇高なショートカットを使用して私たちのボイラーのボイラープレートを取得するこの登録フォームを呼び出すつもりです。

4
00:00:22,200 --> 00:00:25,220
 

5
00:00:26,370 --> 00:00:31,010
だから、このようなプロジェクトに直面したら、私たちができる場所がかなりあります。

6
00:00:31,260 --> 00:00:39,120
私がやるべきことの最初のことは、Tagenのフォームを追加することです。そして、このH1を上に追加して、Louisが登録します。

7
00:00:40,200 --> 00:00:41,160
 

8
00:00:44,160 --> 00:00:47,940
 

9
00:00:48,060 --> 00:00:53,510
だからここで登録フォームを開き、それを移動しましょう。

10
00:00:53,970 --> 00:00:59,580
それはまだありませんが、少なくとも、またはそれぞれの人がよく見ています。

11
00:01:00,060 --> 00:01:05,730
だから崇高に戻って、最も単純なものから始めてみましょう。これらの入力のトップレベルにする必要があります。

12
00:01:05,730 --> 00:01:07,340
 

13
00:01:07,500 --> 00:01:11,670
名前と名字。

14
00:01:11,670 --> 00:01:13,750
だから私たちは入力から始めます。

15
00:01:14,400 --> 00:01:20,370
そしてそれらはタイプアップテキストアップです。

16
00:01:22,900 --> 00:01:29,610
そして、それが必要なように見えるプレースホルダーを与えましょう。ジョンはもう1つのプレースホルダースミスをしましょう。次に、2つのラベルを付ける必要があります。

17
00:01:30,020 --> 00:01:35,640
 

18
00:01:36,120 --> 00:01:39,270
そこで、どちらの構文もラベルに使用できます。

19
00:01:39,270 --> 00:01:42,970
私は4つを使用するつもりです。

20
00:01:43,260 --> 00:01:48,950
だから私はこれを最初に呼び出すでしょうし、最初に等しいIDを取得するようにします。

21
00:01:50,040 --> 00:01:57,180
そして、このラベルは私たちにそれを与える最初の名前のコロンを言うでしょうし、まったく同じことをする必要があります。

22
00:01:57,180 --> 00:01:59,020
 

23
00:01:59,220 --> 00:02:12,750
最後の名前はコロンと言って、最後にこのIDに最後のラベルを付ける必要があります。

24
00:02:15,810 --> 00:02:19,200
それで、チェックインして、私たちが持っているものを見てみましょう。

25
00:02:19,680 --> 00:02:21,820
ここまでは順調ですね。

26
00:02:21,960 --> 00:02:27,650
 

27
00:02:27,660 --> 00:02:35,540
我々が欠落している小さなものが1つあります。これはこれらの入力に名前を付けていないので、最初に名前を付けて最後の名前を付けます。

28
00:02:35,550 --> 00:02:37,950
では、ここで次のチャンクに移動しましょう。

29
00:02:38,090 --> 00:02:41,640
私たちが実際に妥当性を欠いているものは何か。

30
00:02:41,640 --> 00:02:46,540
だからここにいる間、名字と姓は空白ではないと覚えています。

31
00:02:46,590 --> 00:02:54,000
ですから、これを行うには、必要な属性を必要な属性に追加し、それを真に設定するだけです。

32
00:02:54,000 --> 00:02:56,160
 

33
00:02:56,340 --> 00:03:00,690
だから私は先に進んでこれを拡張して、私たちが取り組んでいることを少しはっきりと見ることができます。

34
00:03:00,690 --> 00:03:01,550
 

35
00:03:02,190 --> 00:03:08,320
したがって、ここでフォームに相談すれば、次は性別のラジオボタンです。

36
00:03:08,580 --> 00:03:12,060
したがって、3つのラジオボタンが必要です。

37
00:03:12,210 --> 00:03:18,940
つまり、これらは入力タイプのラジオと同じです。

38
00:03:19,470 --> 00:03:21,600
そのうち3つ

39
00:03:21,600 --> 00:03:27,750
私たちが最初に見ているのは、他の要素と一線を画しているということです。これは、私があなたに与えた形が実際にどのように見えるのかということではありません。

40
00:03:27,750 --> 00:03:32,300
 

41
00:03:32,460 --> 00:03:36,870
だから私たちは物事を動かすためのいくつかの選択肢があります。

42
00:03:36,870 --> 00:03:38,220
 

43
00:03:41,910 --> 00:03:46,620
私たちは、このような段落にそれらをスローすることができます。

44
00:03:46,680 --> 00:03:49,710
今度は別の行に表示されます。

45
00:03:49,860 --> 00:03:52,840
ここでdivを使うつもりです。

46
00:03:54,330 --> 00:03:56,020
そこにdivに入ります。

47
00:03:56,190 --> 00:03:57,940
同じ間隔を持っていません。

48
00:03:57,980 --> 00:04:03,600
段落はC S Sビデオに実際にその間隔が何であるかについて話します。

49
00:04:03,960 --> 00:04:06,580
 

50
00:04:09,240 --> 00:04:15,010
それでは今すぐ先行してラベルを追加する必要があります。その前に実際に名前を付けてみましょう。名前はここで性別になります。

51
00:04:15,640 --> 00:04:24,660
先に進んで私のショートカットを使用して、複数のカーソルをクリックするように指示する必要があります。そのため、クロスジェンダーの名前を付けて、それぞれに値を付けましょう。

52
00:04:24,660 --> 00:04:31,080
 

53
00:04:31,290 --> 00:04:35,460
最初の値は男性です。

54
00:04:35,460 --> 00:04:37,140
2番目は女性です。

55
00:04:37,140 --> 00:04:40,860
最後の1つはリフレッシュすることです。

56
00:04:41,010 --> 00:04:44,390
それはまさに背後にあるので、当然のことは見ません。

57
00:04:44,730 --> 00:04:47,210
だから私たちがする必要があるのは、私たちのラベルを追加することです。

58
00:04:47,580 --> 00:04:51,150
そこで、3つのラベルが必要になります。

59
00:04:51,150 --> 00:04:57,080
最初はラベル4と言うつもりで、私たちはここで私たちが持っているこの男性に電話をかけます。

60
00:05:02,090 --> 00:05:03,750
 

61
00:05:03,900 --> 00:05:09,470
コロンはメールだけで、Idはメールと同じではありません。

62
00:05:09,940 --> 00:05:11,020
同じこと。

63
00:05:11,010 --> 00:05:13,590
もう一つのラベルはここにあります。

64
00:05:13,600 --> 00:05:15,250
これは女性になります。

65
00:05:15,730 --> 00:05:21,150
そして、私たちはあなたが女性を引き起こしていると私は言うつもりです。

66
00:05:21,490 --> 00:05:25,830
そして、あなたは女性を引き起こすIDを言うことになる。

67
00:05:25,840 --> 00:05:31,130
あなたがこれらのフォームを構築するのを見ることができるように、時にはちょっと面倒です。

68
00:05:31,140 --> 00:05:35,800
あなたは、ラベルの束と混乱の多くを持っているだけで、あなたはすべてが正しく対応していることを余分に注意する必要があります。

69
00:05:36,220 --> 00:05:38,940
 

70
00:05:38,940 --> 00:05:47,500
だから私たちは他の人にも同じことをしたいと思っています。

71
00:05:47,710 --> 00:05:50,500
それでは、私たちが持っているものを見てみましょう。

72
00:05:50,620 --> 00:05:50,910
大丈夫。

73
00:05:50,940 --> 00:05:51,980
それは素晴らしいようです。

74
00:05:52,000 --> 00:05:55,680
私たちが望むものだけを選ぶことができます。

75
00:05:55,720 --> 00:06:01,860
私たちがここにいる間に、最後に送信ボタンを追加してみましょう。

76
00:06:01,990 --> 00:06:06,480
つまり、入力タイプはsubmitとなるでしょう。

77
00:06:07,600 --> 00:06:09,540
そして、検証作業が確実に行われるようにしましょう。

78
00:06:09,730 --> 00:06:13,810
はい、いい形で素晴らしいです。

79
00:06:15,250 --> 00:06:17,930
次に、電子メールとパスワードフィールドがあります。

80
00:06:18,310 --> 00:06:20,230
そしてそれらも新しい行にあります。

81
00:06:20,230 --> 00:06:27,900
それでは、別のdivを追加して、入力を行い、今度はタイプが電子メールと同じになるようにしましょう。

82
00:06:28,100 --> 00:06:28,640
 

83
00:06:28,660 --> 00:06:37,710
それは単なるテキストではなく、プレースホルダはプレースホルダのテキストではない電子メールですが、そのイメージに固執して、割り当てに従うようにしています。

84
00:06:37,720 --> 00:06:42,400
 

85
00:06:42,390 --> 00:06:47,950
したがって、入力タイプは電子メールのプレースホルダーで、あなたの電子メールです。次に、もう1つのパスワードがあり、2つの入力があります。

86
00:06:51,850 --> 00:06:53,940
 

87
00:06:54,310 --> 00:07:01,390
次は、名前をつけて、名前を言うだけの名前をつけることができます。

88
00:07:01,690 --> 00:07:09,270
その名前は純粋に舞台裏で使用され、データを送信する方法を理解するために、要求の中のデータを送信する必要があります。

89
00:07:09,270 --> 00:07:12,480
 

90
00:07:12,580 --> 00:07:16,520
この場合、このフィールドに入力するものは、電子メールと呼ばれます。

91
00:07:16,870 --> 00:07:19,300
だからこそ、私たちはどんな影響も見ません。

92
00:07:19,310 --> 00:07:24,200
私はこれがあまり視覚的ではないので、これはもっと混乱している部分の1つだと思います。

93
00:07:24,670 --> 00:07:30,750
だから、これは名前がパスワードであったと言うでしょうし、それから先行してラベルを付け加えましょう。

94
00:07:30,940 --> 00:07:40,210
そこでここでは、それをミックスするだけで、ラベル自体の内部にデータを入れ子にする別のタイプのラベルを使用します。

95
00:07:40,330 --> 00:07:41,390
 

96
00:07:41,560 --> 00:07:49,800
したがって、4つのアイデア構文ではなく、電子メールコロンを指定します。

97
00:07:49,810 --> 00:07:56,520
彼らは電子メールとパスワードを同じように実行します。

98
00:07:57,060 --> 00:07:58,490
非常に正確にしましょう。

99
00:07:58,690 --> 00:08:00,360
両方にコロンがあります。

100
00:08:00,370 --> 00:08:00,920
すばらしいです。

101
00:08:01,210 --> 00:08:10,090
しかし、それを保存して、もう一度見てみると、それが満たされていることを確認する必要があります。

102
00:08:10,090 --> 00:08:13,330
 

103
00:08:13,750 --> 00:08:15,130
いいえ。

104
00:08:16,060 --> 00:08:20,670
したがって、私たちが欠けていることの1つは、電子メールを要求する必要があることです。

105
00:08:21,510 --> 00:08:30,170
だから私たちは電子メールに行き、必要なものを追加する必要があります。

106
00:08:30,580 --> 00:08:35,000
有効でない電子メールを入力すると、電子メールは空白のままになります。

107
00:08:35,010 --> 00:08:36,640
このエラーが発生します。

108
00:08:37,260 --> 00:08:39,350
すばらしいです。

109
00:08:39,510 --> 00:08:41,940
だから今のところすべてがよさそうだ。

110
00:08:41,950 --> 00:08:47,670
私たちはそこに行く前に、最後にボーナスパスワード検証に戻ってきます。

111
00:08:47,670 --> 00:08:50,780
誕生日の選択に移りましょう。

112
00:08:50,920 --> 00:08:53,140
ので、3つのドロップダウンメニュー。

113
00:08:53,500 --> 00:09:02,670
もう一度別のdivを追加して、今回はこのdivに3つの異なる選択肢を追加します。

114
00:09:02,980 --> 00:09:06,920
だから1つ2つ3つ。

115
00:09:07,240 --> 00:09:13,070
最初の4ヶ月から始めましょう。まずはラベルから始めましょう。

116
00:09:13,120 --> 00:09:15,620
ここにはすべてのラベルが1つしかありません。

117
00:09:16,000 --> 00:09:24,300
だからあなたはこのラベルのようにそれをし、3つの科目すべてを内側に入れて、このラベルは誕生日を言うだろうと思っているように見えます。

118
00:09:24,310 --> 00:09:31,330
 

119
00:09:31,330 --> 00:09:39,040
3つの入力が3つのラベルであり、必要なのは正しいデータを内部に追加することだけです。

120
00:09:39,040 --> 00:09:41,450
 

121
00:09:41,470 --> 00:09:44,380
だからそれはたくさんのオプションです。

122
00:09:44,400 --> 00:09:49,230
だから、最初のものは先に進んでいきます。ここで2,3回するつもりですので、これは数ヶ月間です。

123
00:09:49,410 --> 00:09:53,950
だから1月と3月をやります。

124
00:09:55,760 --> 00:09:58,290
次は同じことをする。

125
00:09:58,330 --> 00:10:02,240
ちょうどいくつかのオプションとこれは日のためになります。

126
00:10:02,250 --> 00:10:03,240
だから私たちは始めるでしょう。

127
00:10:03,430 --> 00:10:07,430
10 11と12で二桁の数字を作ってみましょう。

128
00:10:07,620 --> 00:10:09,600
そして最後の1つは年になります。

129
00:10:10,180 --> 00:10:17,640
ちょうど3回やり直して、1999年2000年2001年をやりましょう。

130
00:10:19,060 --> 00:10:19,590
すばらしいです。

131
00:10:19,810 --> 00:10:22,310
そして、あなたは私たちがここに落ちるのを見ることができます。

132
00:10:22,330 --> 00:10:29,950
1つの小さな違いがありますが、それは1月と数字と1年ですぐに始まります。

133
00:10:29,950 --> 00:10:31,220
 

134
00:10:31,690 --> 00:10:38,090
しかし、私があなたに与えたものは、年に一度、年に始まります。

135
00:10:38,320 --> 00:10:40,150
だから、それを行うにはいくつかの方法があります。

136
00:10:40,180 --> 00:10:46,570
 

137
00:10:49,650 --> 00:10:50,130
 

138
00:10:53,010 --> 00:11:00,980
一番簡単なのは、最初のオプションを月日と言うようにすることです。これを行うことで、フォームはちょうど最初のオプションを選択し、初期値を決定します。

139
00:11:00,980 --> 00:11:01,870
 

140
00:11:02,080 --> 00:11:05,050
それがこれを行う最も一般的な方法です。

141
00:11:05,350 --> 00:11:08,040
だから今私たちの会社はかなり良く見えます。

142
00:11:08,050 --> 00:11:16,420
 

143
00:11:16,430 --> 00:11:17,320
 

144
00:11:20,150 --> 00:11:29,290
私たちは最終的に私は契約条件に同意する必要がありますチェックボックスので、ここで別のdivを追加することができます。そして、これは適切な最終divです。今度はこのラベルで始めるつもりです。今度はラベルを開始しましょう。それは合意したとしよう。

145
00:11:29,330 --> 00:11:38,050
 

146
00:11:38,370 --> 00:11:41,320
 

147
00:11:44,290 --> 00:11:54,460
私は利用規約に同意し、次に必要なのは入力テープの呼び出しです。チェックボックス私は同意して名前をつけて同意したので、それにIDを付けましょう。

148
00:11:56,200 --> 00:12:00,310
 

149
00:12:01,120 --> 00:12:05,970
そして、それは私たちが私に良く見えるようになっています。

150
00:12:06,000 --> 00:12:11,690
したがって、selectタグに追加する必要があるのは名前です。

151
00:12:11,910 --> 00:12:13,440
 

152
00:12:18,610 --> 00:12:22,660
だから、今月に電話して、この日のうちの1つを呼んでみましょう。これがここにあります。

153
00:12:23,590 --> 00:12:30,910
1月と3月と3月の間に実際に送られたものであることを希望しないと、それが対応する数字のような何か違うものになりたければ、ここに価値を置くことになります。

154
00:12:30,900 --> 00:12:36,350
 

155
00:12:36,370 --> 00:12:40,030
したがって、Janの場合、この場合には値1を設定します。

156
00:12:40,090 --> 00:12:41,850
そこにJanがいるだけでいいです。

157
00:12:41,860 --> 00:12:45,130
私はそれがどのように行動する必要があるかを指定しなかった。

158
00:12:45,930 --> 00:12:48,670
だからここに戻ってきて、それはかなりいいよ。

159
00:12:48,660 --> 00:12:50,700
すべてが同じように見えます。

160
00:12:50,710 --> 00:12:57,230
私たちが本当に議論しなければならない最後のことは、実際のパスワード検証です。

161
00:12:57,370 --> 00:13:00,680
だから私はあなたがそれを見つける方法についてあなたにどのように示してほしいのですか？

162
00:13:00,700 --> 00:13:09,860
だから私はちょうどHMO長さのバリデーションを開き、それを試してみましょう。

163
00:13:10,930 --> 00:13:13,560
ご覧のとおり、私は実際にすでにここにいました。

164
00:13:13,840 --> 00:13:17,980
これは私が最近検索しなければならなかったものです。

165
00:13:17,980 --> 00:13:21,050
あなたがこれを前に見たことがないならば、これはちなみにStack Overflowです。

166
00:13:21,070 --> 00:13:23,850
これにより誰かが質問をすることができます。

167
00:13:24,510 --> 00:13:29,140
そこに他の属性がありますが、私はフィールドの価値を最小限に抑えることができます。

168
00:13:29,130 --> 00:13:30,000
 

169
00:13:30,370 --> 00:13:35,160
そして、人々が答えを出し、最も高い投票回答が最初に現れます。

170
00:13:35,530 --> 00:13:40,590
だから、この答えは、必要な属性も必要なパターン属性を使うことができると言っています。

171
00:13:40,690 --> 00:13:44,770
それ以外の場合、空の値を持つ入力フィールドは制約の検証から除外されます。

172
00:13:45,000 --> 00:13:45,770
OK。

173
00:13:46,210 --> 00:13:48,960
それで、これが私たちが必要とするすべてのものであるように見えます。

174
00:13:49,690 --> 00:13:55,500
だから、これは私たちに与えるパターンです、この奇妙なものと同じパターンです。

175
00:13:56,440 --> 00:13:59,050
そして、その後、このタイトルが必要です。

176
00:13:59,110 --> 00:14:05,230
だから私たちはこれが何をしているのか、この5つの共通点10が何をしているのかを尋ねる前にも

177
00:14:05,230 --> 00:14:06,640
見てみましょう。

178
00:14:06,630 --> 00:14:10,620
それではパスワードを探してみましょう。これはたくさんあります。

179
00:14:10,620 --> 00:14:15,340
開発者であることは、いくつかのものをコピーして貼り付けることや、いくつかのコードを見つけて調整することです。

180
00:14:15,340 --> 00:14:15,940
 

181
00:14:16,450 --> 00:14:21,250
だから私たちはこれに合うようにする必要があります。これは、入力された名前はパスワードなのでパスワードタイプです。

182
00:14:21,460 --> 00:14:27,340
そこで、これらの3つの属性をコピーします。

183
00:14:27,340 --> 00:14:33,020
パスワードパターンは5と10が必要です。

184
00:14:33,340 --> 00:14:36,670
タイトルは5〜10文字です。

185
00:14:36,760 --> 00:14:41,190
ですから、これが何をリフレッシュするのか見てみましょう。

186
00:14:41,400 --> 00:14:45,180
他のすべてが記入されていることを確認してください。

187
00:14:45,630 --> 00:14:48,740
私は提出をクリックし、このフィールドに記入してください。

188
00:14:48,820 --> 00:14:57,310
5〜10文字、タイプ2とタイプ3、タイプ10以上は動作しません。

189
00:14:57,580 --> 00:15:01,290
しかし、私が5または6をタイプすれば、それは機能します。

190
00:15:01,300 --> 00:15:03,520
それではもう少し詳しく探そう。

191
00:15:03,550 --> 00:15:05,170
ここから始めましょう。

192
00:15:05,320 --> 00:15:07,080
これを変えましょう。

193
00:15:07,480 --> 00:15:13,710
パスワードは5文字から10文字の間でなければなりません。

194
00:15:16,960 --> 00:15:18,450
 

195
00:15:18,490 --> 00:15:22,300
このエラーが発生する可能性があるので、他にもすべて記入してください。

196
00:15:22,890 --> 00:15:29,200
送信をクリックすると、パスワードを設定したメッセージが5文字から10文字の間でなければなりません。

197
00:15:29,200 --> 00:15:30,670
 

198
00:15:31,480 --> 00:15:33,620
それで、このタイトルがそれをやっているのです。

199
00:15:33,820 --> 00:15:36,710
これは、基本的に表示されているエラーメッセージです。

200
00:15:37,410 --> 00:15:45,120
だから、もう1つの新しい部分はこのパターンですが、これは少し奇妙ですが、この構文を使用すると、この入力に受け入れられる長さの範囲を長さとして定義しています。

201
00:15:45,180 --> 00:15:52,120
 

202
00:15:52,120 --> 00:15:56,740
 

203
00:16:03,420 --> 00:16:10,670
したがって、私たちがこれを2〜3に変更すれば、受け入れられないものはまだ受け入れられないものを提出するが、2つは受け入れられる。

204
00:16:11,470 --> 00:16:15,460
これは、私たちが従わなければならない範囲やパターンを定義することに過ぎません。

205
00:16:15,930 --> 00:16:20,990
だから、あなたは最小限の長さや長さの範囲以外のことをすることができますが、これ以上のことはありますが、それは私がここであなたが必要とするすべてです。

206
00:16:21,390 --> 00:16:23,350
 

207
00:16:23,350 --> 00:16:27,660
あなたがそれを見つけることができなかった場合、それはまだ非常に早いです。

208
00:16:27,820 --> 00:16:32,110
しかし、そのようなことを試みる機会が増えるでしょう。

209
00:16:32,160 --> 00:16:42,370
だから私は完全な解決策を持っていますが、これは完全な1日と1年と1ヶ月の入力があり、それは混乱の種であることがわかります。

210
00:16:42,700 --> 00:16:45,860
 

211
00:16:45,900 --> 00:16:50,790
私はこれを手で書きませんでした。私はあなたがこれを手で書くことを期待していませんでした。

212
00:16:51,100 --> 00:16:53,940
実際にこのクラスで後で生成する方法を見ていきます。

213
00:16:53,950 --> 00:16:58,120
あなたはこれを行うためにjavascriptを使うことができるので、実際にこれを書く必要はありません。

214
00:16:58,450 --> 00:16:59,580
だから、ソリューションを見てみましょう。

215
00:16:59,590 --> 00:17:00,670
ご不明な点がございましたら