HTML-form

1. <form>

情報を入力する領域

必要に応じて「フォーム動作」ページに移動するフォームデータをWebサーバに入力し、アプリケーションサーバからデータベースに移動してCRUDタスクを処理し、Webまたはappに送信します。

*form属性

Action:入力値を送信するページメソッドを選択する:データ転送メソッド

2. <input>

フォームタグにユーザー入力情報を作成するスペース

*input属性

📌 required:radioは最初の入力に対してのみ有効/チェックボックス、必要な入力に対して有効/チェックボックス

*input type属性

📌 tel,emailはtextのように見えますが、モバイルデバイスでは違います。

3. <label>

Inputの前のテキスト記述ロール

視覚障害者の説明を読むには、入力にラベルを置く必要があります。

実施方法1）保護入力

<label>
	이름 :
	<input type="text" name="name">
</label>

実装方法2)lableにfor=「inputまたはselectのid」を指定する

<label for="myName">이름 : </label>
<input type="text" name="name" id="myName">

📌 labelはidのみ許可!(class X)

💙 属性の利点💙radioまたはcheckbox typeでlabelテキストをクリックしても選択されます(使いやすい)

4. <select>

ドロップダウン・リスト・ボックスの作成

Multiple=「Multiple」では、ctrlまたはcmdで複数のオプションsizeプロパティを選択できます。一度に表示されるオプションの数

4-1. <option>

value:選択時にサーバに送信する値を選択:デフォルトではオプションチェック(データ転送時の最初のオプション値として設定されていない場合は最初のオプションを選択)

<form action="">
  <label for="myDevice">현재 사용하고 있는 스마트폰의 제조사를 선택해주세요</label>
  <select name="device" id="myDevice">
    <option value="iphone">아이폰</option>
    <option value="galaxy">갤럭시폰</option>
    <option value="ㅜㅜ">LG폰</option>
  </select>
</form>

4-2. <input> name VS <option> value

ex) tel(name): 010-1111-1111(value)

inputの名前は「key」メソッドがgetの場合urlにex)tel(name)=010-****-111(value)があり、後でバックエンド開発者と協議して決定すればf 12>ペイロードで見つけることができる

optionvalueがサーバに送信する値general inputはvalue値を直接設定できますが、optionは選択するしかなく、value値を直接指定することはできません。

📌 サーバに値を割り当てない

5. <fieldset>

フォームコントロールをグループ化(複数のセクションを区切る場合)

役割、例えばsection

6. <legend>

fieldsetの名前

設定フォームのタイトルを<fieldset>の後にテキスト形式で表示する必要があります。

7. <button>

<button type="">

-コミット:データをサーバにコミット(指定されていない場合に自動的にコミット)、フォーム内のキー:値をサーバに送信-リセット:フォーム初期化-ボタン:クリックのみ、その他の機能X

💙💙 buttonでは必ずタイピング宣言をします!!!せいみつコーディング

💙 Input submitとbutton submitの違い-inputはオープンタグなのでサブタグを挿入できません(修飾しにくい)-buttonは閉じたタグで、img挿入+フォント設定+after/before仮想要素を使用しやすいサブタグです。

🌷 私の整理

じゅんじょフィールドセット2を設定します。フォームタイトル3をlegendで決定します。Inputとlabelを使用してフォームを構成する

  <legend> 폼 제목</legend>
  <label for="myID">아이디</label>
  <input type="text name="아이디"  id="MyID">
  .
  .
  .

</fieldset>

8. <textarea>

複数行のテキスト入力の受信

-cols(列):入力ウィンドウの幅、文字の平均幅(文字数Xベース)、正の値のみ(フォント、言語によって字幅が異なる)

-rows(行):入力ウィンドウの行数

9. <datalist>

-selectとinputを混合して使用できます-label for->inputのid/inputlist->datalistのid

-オプション機能の提供-必要なオプションがない場合は、直接入力可能なサービスを提供します。