HTMLで基本的なサインアップフォームを作成する方法

14896 ワード
challenge 365daysofcoding tutorial html テキストリンク

Link to video
コードの365日のハッピー日8!今日、私たちはサインアップフォームを作成する上で4日間のシリーズを開始している!このフォームは任意の入力を持つことができますが、最初の名前、最後の名前、電話番号とメールを必要とする必要があります.また、OAuth ( FacebookやGoogleなどのログインを許可する)のセクションも必要です.電話番号をフォーマットしなければなりません.また、電子メールや電話番号の検証があります.これはちょうど1機能以上であるので、私はそれのためにgithubリポジトリを作成するつもりです.毎日ブランチになるとマスターはマスターになるので、マスターは最終的に最終的な解決策を持っていますが、毎日のように私のソリューションを見たい場合は、毎日がまだ壊れてしまうでしょう.Here is the link to the repository 私も下にリンクします.
あなたがGithubの上でポストをすることを望むならば、そして、それを使う方法は私に私がそうする幸せであるということを知らせました!
免責事項:この課題を解決するために多くの方法がありますこれは、この課題のちょうど私のバージョンです
TLDR:解決策はポストの底にある
このシリーズのレポhttps://github.com/hellodevworldblog/SignUpForm
コードをテストするには、インデックスがあるフォルダーに移動しなければなりません.HTMLドキュメントが作成され、ダブルクリックします.それはあなたのコードでWebブラウザを開きます.変更を確認するには、ファイルを保存し、そのページを更新します.

問題
基本フォームでページを作成する

解決策
必要に応じてリポジトリをクローン化またはフォークすることができます.一度インデックスを作成します.あなたのマシンの倉庫のためにつくられたフォルダのHTMLファイル.
最初にHTMLドキュメント用のボイラープレートを作成する必要があります.
注:VSコードは、ヘルパーを内蔵しています.「doc」を書き、タブを押すとboilerplateを書きます.あなたはすべてを残すことができます、しかし、私はこのタイトルのためにあなたのブラウザーでタブのためにテキストを変えます.私はそれをサインアップフォームにするつもりです
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Sign Up Form</title>
    </head>
    <body>
    </body>
</html>
私たちのフォームを保持する容器を追加するつもりです.これは「formcontainer」と呼ばれるクラスを持つdivです.これは適切な練習であり、読みやすさに役立ちます.また、スタイリングのために後で(2日目)使用します.
注:私のクラスと私の命名のほとんどのためにラクダケースを使用するのが好きです.キャメルケースを使用しない場合は、任意の命名規則を使用できます
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Sign Up Form</title>
    </head>
    <body>
        <div class="formContainer">
        </div>
    </body>
</html>
私は私のフォームのためのタイトルとH 1タグを作成するつもりです、そして、我々は挑戦で各々のフィールドのために入力を作成する必要があります.これらはすべて型テキストになります.私はname属性を追加するつもりです、そして、これはデータの参照のために使われて、JavaScriptで入力を参照する方法です.このようにラベルを使用している場合は、ラベルを参照するラベルを指定します.
ラベルを使うつもりはないので、プレースホルダーを使います.プレースホルダの属性は、それをクリックしたり、タイピングを開始したらすぐに行く検索バーの多くを参照する灰色のテキストを追加します.
すべての入力が必要になるので、私はそれらに必要な属性を追加されます.フォームにオプションの入力がある場合、この属性は必要ありません.JavaScriptでこれらの入力の検証を追加することもできます.
最後の入力は、私たちの送信ボタンになります.これは送信ボタンとしてタイプテキストの代わりにタイプSubmitになるでしょう.value属性はボタンに表示されるテキストになります.
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Sign Up Form</title>
    </head>
    <body>
        <div class="formContainer">
            <h1>Sign Up!</h1>
          <form>
              <input type="text" name="firstName" class="formInput" placeholder="First Name" required />
              <input type="text" name="lastName" class="formInput" placeholder="Last Name" required />
              <input type="text" name="email" class="formInput" placeholder="Email" required />
              <input type="text" name="phoneNumber" class="formInput" placeholder="Phone Number" required />
              <input type="submit" name="submitButton" value="Sign Up">
         </form>
        </div>
    </body>
</html>
だから今私たちの基本的な形が、それは少しファンキーに見える.私たちはスタイルファイルを後ですべてのスタイルを置くために、私たちがちょうど1つのスタイルを今日しているので、私はインデックスファイルにそれを加えるつもりです.
私は私が追加されたすべての入力に適用されたスタイリングであり、クラスがそれらの入力のすべてにあるので、私はクラス名forminputを対象とするつもりです.私はそれが表示ブロックを作っている、これはその要素は、それがオンになっている行全体を取ることができます.このCSSプロパティについての詳細を読むことができますhere そして、私はまた、入力を互いの間に若干のスペースを与えるために、一番下のマージンで行きます.
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Sign Up Form</title>
  </head>
  <body>
      <div class="formContainer">
          <h1>Sign Up!</h1>
          <form>
              <input type="text" name="firstName" class="formInput" placeholder="First Name" required />
              <input type="text" name="lastName" class="formInput" placeholder="Last Name" required />
              <input type="text" name="email" class="formInput" placeholder="Email" required />
              <input type="text" name="phoneNumber" class="formInput" placeholder="Phone Number" required />
              <input type="submit" name="submitButton" value="Sign Up">
         </form>
      </div>
  </body>
</html>
<style>
    .formInput {
        display: block;
        margin-bottom: 10px;
    }
</style>
そこにあなたの基本的なフォームがあります!そのきれいでない、しかし、我々はその明日働きます.私はラベルを使用していないので、フォームのスタイルのために私は彼らを必要としないが、あなたがそれを行う場合は、このようになります.
    <div class="formContainer">
        <h1>Sign Up!</h1>
        <form>
            <label for="firstName">First Name</label>
            <input type="text" name="firstName" class="formInput" placeholder="First Name" required />
            <label for="lastName">Last Name</label>
            <input type="text" name="lastName" class="formInput" placeholder="Last Name" required />
            <label for="email">First Name</label>
            <input type="text" name="email" class="formInput" placeholder="Email" required />
            <label for="phoneNumber">Phone Number</label>
            <input type="text" name="phoneNumber" class="formInput" placeholder="Phone Number" required />
            <input type="submit" name="submitButton" value="Sign Up">
        </form>
    </div>
グレーテキストを入力にしたくない場合は、プレースホルダ属性を削除します.あなたが望むならば、あなたはHTML形式を使うこともできます、しかし、私が我々が必要としないこのワームを書くつもりである方法.
私はあなたがこの1つを楽しんだことを望む!コメント欄であなたのフォームにレポリンクを残してください.また、あなたがマルチ日の課題のような場合、または本当にそれらを憎む私に知らせてください!あなたはまた、あなたはそれが来るを参照してください可能性があります以下のコメントでそれを残すことを参照してくださいする必要があります任意の課題がある場合!あなたがチャレンジを取得したい場合は、午前中、毎日の通知とメールが投稿されたときに通知をメールで送信here !
Androidはパッケージ名でアプリケーションを起動します
[JavaScript]オブジェクト