oday I Learned - Form

35853 ワード
TIL html テキストリンク
今日は先日勉強してブログが書けませんでした.
HTMLの入力フォームの復習と位置決めを行います.

Form?

  • Webページ入力フォーム
  • テキストフィールドにテキストを入力するか、チェックボックスまたはラジオボタンをクリックし、「発行」ボタンをクリックしてフォームをバックエンドサーバに送信し、
    • 情報を処理します.

    目的

  • ユーザーが情報を入力および送信できるフォーマット

    • デフォルトのフォーマット


    は、以下の2つとともに提供する必要があります.
  • フォームタグの情報位置情報
  • HTTP requestが作成するもの
    • ->action、methodのプロパティにそれぞれ含まれます.
    <form action="/example.html" method="POST">
</form>

    1. action

  • フォームを発行すると、どのURLに移動しますか?

    • 2. method


  • どのように伝えますか?

  • method属性は、属性値としてGETとPOSTを選択します.
    	- get : URL에 폼 데이터를 추가하여 서버로 전달하는 방식 (길이에 제한이 있어 보안에 취약)
	- post : 폼 데이터를 별도로 첨부하여 서버로 전달하는 방식(길이에 제한없음, 중요한 정보는 post로)

    • 3.フォームのその他の情報を記入する

    <form action="/example.html" method="POST">
  <h1>Creating a form</h1>
  <p>Looks like you want to learn how to create an HTML form. 
Well, the best way to learn is to play around with it.</p>
</form>
  • ヘッダー、段落を使用して、フォームの詳細を追加します.

    • inputタグを使用するformタイプ


    1. type="text"

  • 空のテキスト・ボックス
    • <form action="/example.html" method="POST">
  <input type="text" name="first-text-field" 
  value="already pre-filled"> //no closing tag
</form>

    attribute

  • name:nameプロパティがない場合、入力された情報は送信されません.
  • 値:ユーザーが入力したテキストに値を変更します.

    • 2. type="password"

  • inputと入力された値をアスタリスク(*)またはポイント(•)として表示します.
    • <form>
  <label for="user-password">Password: </label>
  <input type="password" id="user-password" name="user-password">
</form>

    3. type="number"

  • 数字またはいくつかの特殊文字(-,+,.)制限は入力のみです.
    • <form>
  <label for="years"> Years of experience: </label>
  <input id="years" name="years" type="number" step="1">
</form>

    attribute

  • step:下図のように矢印形状を生成し、step値に応じて数字のサイズを調整できます.

    • 4. type="range"

  • スライダの作成
    • <form>
  <label for="volume"> Volume Control</label>
  <input id="volume" name="volume" type="range" min="0" max="100" step="1">
</form>

    attribute

  • 最大、最小:スライダの最大値と最小値
    • を指定します.
  • step:値が小さいほど、移動がスムーズになります.

    • 5. type="checkbox"


    1つ以上のチェックボックス形式のリストを生成し、
  • を選択します.
    • <form>
  <p>Choose your pizza toppings:</p>
  <label for="cheese">Extra cheese</label>
  <input id="cheese" name="topping" type="checkbox" value="cheese">
  <br>
  <label for="pepperoni">Pepperoni</label>
  <input id="pepperoni" name="topping" type="checkbox" value="pepperoni">
  <br>
  <label for="anchovy">Anchovy</label>
  <input id="anchovy" name="topping" type="checkbox" value="anchovy">
</form>

    attribute

  • value:指定した属性値、画面には->ラベルが表示されません.
    • に接続する必要があります.
  • name:複数の入力で同じ名前を使用して、1つのグループに
    • を組み合わせることができます.
  • id:入力ごとに異なるidが必要であり、idはラベルのfor属性と同じでなければならない

    • 6. type="radio"

  • 選択可能なリストを作成
    • <form>
  <p>What is sum of 1 + 1?</p>
  <input type="radio" id="two" name="answer" value="2">
  <label for="two">2</label>
  <br>
  <input type="radio" id="eleven" name="answer" value="11">
  <label for="eleven">11</label>
</form>

    attribute

  • name:ボタンを組み合わせるために、nameに同じ値を指定します.

    • 7. type="text" + < datalist >

  • テキスト入力ウィンドウとリストの作成

    • <form>
  <label for="city">Ideal city to visit?</label>
  <input type="text" list="cities" id="city" name="city">
 
  <datalist id="cities">
    <option value="New York City"></option>
    <option value="Tokyo"></option>
    <option value="Barcelona"></option>
    <option value="Mexico City"></option>
    <option value="Melbourne"></option>
    <option value="Other"></option>  
  </datalist>
</form>

    attribute

  • datalist id:inputのlistで指定した属性は同じです

    • 8. type="submit"


    submitボタンを作成し、作成した
  • のすべての情報をコミットします.
    • <form>
  <input type="submit" value="Send">
</form>

    attribute

  • value:valueで指定したテキストがボタンに表示されます.

    • Inputラベルのない単独使用form


    1. < select >

  • オプションのドロップダウンリストを生成

    • <form>
  <label for="lunch">What's for lunch?</label>
  <select id="lunch" name="lunch">
    <option value="pizza">Pizza</option>
    <option value="curry">Curry</option>
    <option value="salad">Salad</option>
    <option value="ramen">Ramen</option>
    <option value="tacos">Tacos</option>
  </select>
</form>

    attribute


    2479172 name:formの情報が転送されている場合、データ参照の属性値->nameがないと、情報は転送されません
  • 値:画面には表示されませんが、送信時に送信されるデータ

    • 2. < textarea >


    幅入力、幅入力、幅入力ウィンドウを作成します.
  • テキストを入力できます.
    • <form>
  <label for="blog">New Blog Post: </label>
  <br>
  <textarea id="blog" name="blog" rows="5" cols="30">
  </textarea>
</form>

    attribute

  • 行、cols:横、縦の文字行と列数を指定することで、入力ウィンドウのサイズを設定します.

    • label

  • inputに連用するタグ
  • input's id = label's for
    • 今日は仕事が終わってからコードの勉強が終わりました!
    JUnitの理論メカニズム、パラメトリックテスト
    キャッシュヒット率とTLB欠落率をPAPIでテスト