HTML Form


  • フォームの目的は、ユーザが情報を入力および送信できるようにすることである.
  • フォームのacitonプロパティは、フォーム内の情報の移動位置を決定します.
  • フォームのメソッド属性は、情報の伝送および処理方法を決定する.
  • ユーザは、input要素を使用して情報を入力するフィールドを追加する.
    typeプロパティを使用して選択したフィールドを設定します.
    -typeを「text」に設定すると、テキストを入力するための単行フィールドが作成されます.
    -typeをpasswordに設定すると、テキスト入力の単行フィールドがチェックされます.
    作成します.
    -typeをnumberに設定すると、数値を入力するための単行フィールドが作成されます.
    -typeをrangeに設定すると、数値範囲から選択したスライダが作成されます.
    -typeを「checkbox」に設定すると、
    単一のチェックボックスが作成されます.(繰り返し選択)
    -typeを「radio」に設定すると、他のラジオボタンとペアを組むことができるラジオボタン
    作成します.(単一選択)
    -typeではなくlistを設定すると、inputとdatalistのidが同時にデータリスト要素が
    選択要素としてのdatalistはペアであり、サブ要素としてoption要素を有する.
    -typeを「submit」に設定すると、「コミット」ボタンが作成されます.
  • select要素はoption要素で埋め込まれ、ドロップダウンリスト選択が作成されます.
  • datatlist、データリスト要素はオプション要素で埋め込まれ、選択した内容を検索します.
    Inputと一緒に仕事をします.
  • textarea、テキスト領域要素はユーザがテキストを入力するフィールドである.
  • フォームを発行した後、入力されたフィールドの名前とその値を受け入れます.
    name=valueペアで送信します.
  • <!DOCTYPE html>
    <html lang="en" dir="ltr">
      <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="style.css">
        <link href="https://fonts.googleapis.com/css?family=Rubik" rel="stylesheet">
        <title>Forms Review</title>
      </head>
      <body>
        <section id="overlay">
          <img src="https://content.codecademy.com/courses/web-101/unit-6/htmlcss1-img_burger-logo.svg" alt="Davie's Burgers Logo" id="logo">
          <hr>
          <form action="submission.html" method="POST">
    				<h1>Create a burger!</h1>
            <section class="protein">
              <label for="patty">What type of protein would you like?</label>
        			<input type="text" name="patty" id="patty">
            </section>
            <hr>
            <section class="patties">
              <label for="amount">How many patties would you like?</label>
              <input type="number" name="amount" id="amount">
            </section>
            <hr>       
            <section class="cooked">
              <label for="doneness">How do you want your patty cooked</label>
              <br>
              <span>Rare</span>
              <input type="range" name="doneness" id="doneness" value="3" min="1" max="5">
              <span>Well-Done</span>
            </section>
            <hr>
            <section class="toppings">
              <span>What toppings would you like?</span>
              <br>
              <input type="checkbox" name="topping" id="lettuce" value="lettuce">
              <label for="lettuce">Lettuce</label>
              <input type="checkbox" name="topping" id="tomato" value="tomato">
              <label for="tomato">Tomato</label>
              <input type="checkbox" name="topping" id="onion" value="onion">
              <label for="onion">Onion</label>
            </section>
            <hr>
            <section class="cheesy">
              <span>Would you like to add cheese?</span>
              <br>
              <input type="radio" name="cheese" id="yes" value="yes">
              <label for="yes">Yes</label>
              <input type="radio" name="cheese" id="no" value="yes">
              <label for="no">No</label>
            </section>
            <hr>     
            <section class="bun-type">
              <label for="bun">What type of bun would you like?</label>
              <select name="bun" id="bun">
                <option value="sesame">Sesame</option>
                <option value="potatoe">Potato</option>
                <option value="pretzel">Pretzel</option>
              </select>
            </section>
            <hr>
            <section class="sauce-selection">
              <label for="sauce">What type of sauce would you like?</label>
              <input list="sauces" id="sauce" name="sauce">
              <datalist id="sauces">
                <option value="ketchup"></option>
                <option value="mayo"></option>
                <option value="mustard"></option>
              </datalist>
            </section>
            <hr>
            <section class="extra-info">
              <label for="extra">Anything else you want to add?</label>
              <br>
              <textarea id="extra" name="extra" rows="3" cols="40"></textarea>
            </section>
            <hr>
            <section class="submission">
              <input type="submit" value="Submit">
            </section>
          </form>
        </section>
      </body>
    </html>