この動画では、この登録フォームのソリューションを作成していきます。
だから私はそれを保存する新しいファイルがあります。
私はちょうどHDMIの私は崇高なショートカットを使用して私たちのボイラーのボイラープレートを取得するこの登録フォームを呼び出すつもりです。
だから、このようなプロジェクトに直面したら、私たちができる場所がかなりあります。
私がやるべきことの最初のことは、Tagenのフォームを追加することです。そして、このH1を上に追加して、Louisが登録します。
だからここで登録フォームを開き、それを移動しましょう。
それはまだありませんが、少なくとも、またはそれぞれの人がよく見ています。
だから崇高に戻って、最も単純なものから始めてみましょう。これらの入力のトップレベルにする必要があります。
名前と名字。
だから私たちは入力から始めます。
そしてそれらはタイプアップテキストアップです。
そして、それが必要なように見えるプレースホルダーを与えましょう。ジョンはもう1つのプレースホルダースミスをしましょう。次に、2つのラベルを付ける必要があります。
そこで、どちらの構文もラベルに使用できます。
私は4つを使用するつもりです。
だから私はこれを最初に呼び出すでしょうし、最初に等しいIDを取得するようにします。
そして、このラベルは私たちにそれを与える最初の名前のコロンを言うでしょうし、まったく同じことをする必要があります。
最後の名前はコロンと言って、最後にこのIDに最後のラベルを付ける必要があります。
それで、チェックインして、私たちが持っているものを見てみましょう。
ここまでは順調ですね。
我々が欠落している小さなものが1つあります。これはこれらの入力に名前を付けていないので、最初に名前を付けて最後の名前を付けます。
では、ここで次のチャンクに移動しましょう。
私たちが実際に妥当性を欠いているものは何か。
だからここにいる間、名字と姓は空白ではないと覚えています。
ですから、これを行うには、必要な属性を必要な属性に追加し、それを真に設定するだけです。
だから私は先に進んでこれを拡張して、私たちが取り組んでいることを少しはっきりと見ることができます。
したがって、ここでフォームに相談すれば、次は性別のラジオボタンです。
したがって、3つのラジオボタンが必要です。
つまり、これらは入力タイプのラジオと同じです。
そのうち3つ
私たちが最初に見ているのは、他の要素と一線を画しているということです。これは、私があなたに与えた形が実際にどのように見えるのかということではありません。
だから私たちは物事を動かすためのいくつかの選択肢があります。
私たちは、このような段落にそれらをスローすることができます。
今度は別の行に表示されます。
ここでdivを使うつもりです。
そこにdivに入ります。
同じ間隔を持っていません。
段落はC S Sビデオに実際にその間隔が何であるかについて話します。
それでは今すぐ先行してラベルを追加する必要があります。その前に実際に名前を付けてみましょう。名前はここで性別になります。
先に進んで私のショートカットを使用して、複数のカーソルをクリックするように指示する必要があります。そのため、クロスジェンダーの名前を付けて、それぞれに値を付けましょう。
最初の値は男性です。
2番目は女性です。
最後の1つはリフレッシュすることです。
それはまさに背後にあるので、当然のことは見ません。
だから私たちがする必要があるのは、私たちのラベルを追加することです。
そこで、3つのラベルが必要になります。
最初はラベル4と言うつもりで、私たちはここで私たちが持っているこの男性に電話をかけます。
コロンはメールだけで、Idはメールと同じではありません。
同じこと。
もう一つのラベルはここにあります。
これは女性になります。
そして、私たちはあなたが女性を引き起こしていると私は言うつもりです。
そして、あなたは女性を引き起こすIDを言うことになる。
あなたがこれらのフォームを構築するのを見ることができるように、時にはちょっと面倒です。
あなたは、ラベルの束と混乱の多くを持っているだけで、あなたはすべてが正しく対応していることを余分に注意する必要があります。
だから私たちは他の人にも同じことをしたいと思っています。
それでは、私たちが持っているものを見てみましょう。
大丈夫。
それは素晴らしいようです。
私たちが望むものだけを選ぶことができます。
私たちがここにいる間に、最後に送信ボタンを追加してみましょう。
つまり、入力タイプはsubmitとなるでしょう。
そして、検証作業が確実に行われるようにしましょう。
はい、いい形で素晴らしいです。
次に、電子メールとパスワードフィールドがあります。
そしてそれらも新しい行にあります。
それでは、別のdivを追加して、入力を行い、今度はタイプが電子メールと同じになるようにしましょう。
それは単なるテキストではなく、プレースホルダはプレースホルダのテキストではない電子メールですが、そのイメージに固執して、割り当てに従うようにしています。
したがって、入力タイプは電子メールのプレースホルダーで、あなたの電子メールです。次に、もう1つのパスワードがあり、2つの入力があります。
次は、名前をつけて、名前を言うだけの名前をつけることができます。
その名前は純粋に舞台裏で使用され、データを送信する方法を理解するために、要求の中のデータを送信する必要があります。
この場合、このフィールドに入力するものは、電子メールと呼ばれます。
だからこそ、私たちはどんな影響も見ません。
私はこれがあまり視覚的ではないので、これはもっと混乱している部分の1つだと思います。
だから、これは名前がパスワードであったと言うでしょうし、それから先行してラベルを付け加えましょう。
そこでここでは、それをミックスするだけで、ラベル自体の内部にデータを入れ子にする別のタイプのラベルを使用します。
したがって、4つのアイデア構文ではなく、電子メールコロンを指定します。
彼らは電子メールとパスワードを同じように実行します。
非常に正確にしましょう。
両方にコロンがあります。
すばらしいです。
しかし、それを保存して、もう一度見てみると、それが満たされていることを確認する必要があります。
いいえ。
したがって、私たちが欠けていることの1つは、電子メールを要求する必要があることです。
だから私たちは電子メールに行き、必要なものを追加する必要があります。
有効でない電子メールを入力すると、電子メールは空白のままになります。
このエラーが発生します。
すばらしいです。
だから今のところすべてがよさそうだ。
私たちはそこに行く前に、最後にボーナスパスワード検証に戻ってきます。
誕生日の選択に移りましょう。
ので、3つのドロップダウンメニュー。
もう一度別のdivを追加して、今回はこのdivに3つの異なる選択肢を追加します。
だから1つ2つ3つ。
最初の4ヶ月から始めましょう。まずはラベルから始めましょう。
ここにはすべてのラベルが1つしかありません。
だからあなたはこのラベルのようにそれをし、3つの科目すべてを内側に入れて、このラベルは誕生日を言うだろうと思っているように見えます。
3つの入力が3つのラベルであり、必要なのは正しいデータを内部に追加することだけです。
だからそれはたくさんのオプションです。
だから、最初のものは先に進んでいきます。ここで2,3回するつもりですので、これは数ヶ月間です。
だから1月と3月をやります。
次は同じことをする。
ちょうどいくつかのオプションとこれは日のためになります。
だから私たちは始めるでしょう。
10 11と12で二桁の数字を作ってみましょう。
そして最後の1つは年になります。
ちょうど3回やり直して、1999年2000年2001年をやりましょう。
すばらしいです。
そして、あなたは私たちがここに落ちるのを見ることができます。
1つの小さな違いがありますが、それは1月と数字と1年ですぐに始まります。
しかし、私があなたに与えたものは、年に一度、年に始まります。
だから、それを行うにはいくつかの方法があります。
一番簡単なのは、最初のオプションを月日と言うようにすることです。これを行うことで、フォームはちょうど最初のオプションを選択し、初期値を決定します。
それがこれを行う最も一般的な方法です。
だから今私たちの会社はかなり良く見えます。
私たちは最終的に私は契約条件に同意する必要がありますチェックボックスので、ここで別のdivを追加することができます。そして、これは適切な最終divです。今度はこのラベルで始めるつもりです。今度はラベルを開始しましょう。それは合意したとしよう。
私は利用規約に同意し、次に必要なのは入力テープの呼び出しです。チェックボックス私は同意して名前をつけて同意したので、それにIDを付けましょう。
そして、それは私たちが私に良く見えるようになっています。
したがって、selectタグに追加する必要があるのは名前です。
だから、今月に電話して、この日のうちの1つを呼んでみましょう。これがここにあります。
1月と3月と3月の間に実際に送られたものであることを希望しないと、それが対応する数字のような何か違うものになりたければ、ここに価値を置くことになります。
したがって、Janの場合、この場合には値1を設定します。
そこにJanがいるだけでいいです。
私はそれがどのように行動する必要があるかを指定しなかった。
だからここに戻ってきて、それはかなりいいよ。
すべてが同じように見えます。
私たちが本当に議論しなければならない最後のことは、実際のパスワード検証です。
だから私はあなたがそれを見つける方法についてあなたにどのように示してほしいのですか？
だから私はちょうどHMO長さのバリデーションを開き、それを試してみましょう。
ご覧のとおり、私は実際にすでにここにいました。
これは私が最近検索しなければならなかったものです。
あなたがこれを前に見たことがないならば、これはちなみにStack Overflowです。
これにより誰かが質問をすることができます。
そこに他の属性がありますが、私はフィールドの価値を最小限に抑えることができます。
そして、人々が答えを出し、最も高い投票回答が最初に現れます。
だから、この答えは、必要な属性も必要なパターン属性を使うことができると言っています。
それ以外の場合、空の値を持つ入力フィールドは制約の検証から除外されます。
OK。
それで、これが私たちが必要とするすべてのものであるように見えます。
だから、これは私たちに与えるパターンです、この奇妙なものと同じパターンです。
そして、その後、このタイトルが必要です。
だから私たちはこれが何をしているのか、この5つの共通点10が何をしているのかを尋ねる前にも
見てみましょう。
それではパスワードを探してみましょう。これはたくさんあります。
開発者であることは、いくつかのものをコピーして貼り付けることや、いくつかのコードを見つけて調整することです。
だから私たちはこれに合うようにする必要があります。これは、入力された名前はパスワードなのでパスワードタイプです。
そこで、これらの3つの属性をコピーします。
パスワードパターンは5と10が必要です。
タイトルは5〜10文字です。
ですから、これが何をリフレッシュするのか見てみましょう。
他のすべてが記入されていることを確認してください。
私は提出をクリックし、このフィールドに記入してください。
5〜10文字、タイプ2とタイプ3、タイプ10以上は動作しません。
しかし、私が5または6をタイプすれば、それは機能します。
それではもう少し詳しく探そう。
ここから始めましょう。
これを変えましょう。
パスワードは5文字から10文字の間でなければなりません。
このエラーが発生する可能性があるので、他にもすべて記入してください。
送信をクリックすると、パスワードを設定したメッセージが5文字から10文字の間でなければなりません。
それで、このタイトルがそれをやっているのです。
これは、基本的に表示されているエラーメッセージです。
だから、もう1つの新しい部分はこのパターンですが、これは少し奇妙ですが、この構文を使用すると、この入力に受け入れられる長さの範囲を長さとして定義しています。
したがって、私たちがこれを2〜3に変更すれば、受け入れられないものはまだ受け入れられないものを提出するが、2つは受け入れられる。
これは、私たちが従わなければならない範囲やパターンを定義することに過ぎません。
だから、あなたは最小限の長さや長さの範囲以外のことをすることができますが、これ以上のことはありますが、それは私がここであなたが必要とするすべてです。
あなたがそれを見つけることができなかった場合、それはまだ非常に早いです。
しかし、そのようなことを試みる機会が増えるでしょう。
だから私は完全な解決策を持っていますが、これは完全な1日と1年と1ヶ月の入力があり、それは混乱の種であることがわかります。
私はこれを手で書きませんでした。私はあなたがこれを手で書くことを期待していませんでした。
実際にこのクラスで後で生成する方法を見ていきます。
あなたはこれを行うためにjavascriptを使うことができるので、実際にこれを書く必要はありません。
だから、ソリューションを見てみましょう。
ご不明な点がございましたら