[TIL]HTML|form,クリーンアップ入力

🎲 ターゲット:重要なform&inputラベルを開いてユーザーデータを受信~~
目次
🔎 form
🔎 label
🔎 button
🔎 input
🔎 select & option
🔎 textarea
いろいろなものが混ざっている.🔎加えてtagですが、🖍タグはattribute!
🔎 form
表計算<table>同じ役割!<table>が<tr>、<td>、<th>、<thead>などを組み合わせたように、<form>も<input>、<button>などを組み合わせた.しかし、これは単純なバンドルではなく、submitデータをどこに送信すべきかを教えてくれます!
🖍 action="URL"
フォームを送信するとHTTPリクエストが送信され、actionプロパティを使用してリクエストをどこに送信するかを指定できます.データが届くURL.
🖍 autocomplete="on"/"off"
自動補完機能.プロパティ値がonの場合、ブラウザはユーザーの過去の入力値に基づいて自動的に値を入力します.
🖍 方法=「get」「post」など
フォームの発行に使用するHTTPメソッド

post:要求本文

にデータを送信

get(default):データを[actionのurl]+[?]とする後続転送

🖍 target="blank"、"self"等
sumbit後にサーバが受信した応答をどのように表示するかを管理するプロパティです.

blank:新しいタブまたはウィンドウで

を開く

self(default):リンクが存在する現在のフレームで開く

parent:現在のフレームの親フレームで開く

🔎 label

どのテキストがどの入力に対するタグであるかを関連付ける(ラベルのテキストをクリックすると、関連する入力がアクティブになります!)

labelのforとinputのidは一致しなければならない

inputは前、または後ろにあります!

<label for="username">What's your name?</label>
<input type="text" name="username" id="username" placeholder="enter your name!">

<input type="checkbox" id="cheese"><label for="cheese"> I like cheese</label>

結果🔻
What's your name?
I like cheese
ベルの位置でlabelのテキストをクリックすると、入力がアクティブになりません.🙄
🔎 button
フォームタグのプロパティに基づいてコミット
🖍 type="submit", "reset", "button"

submit(デフォルト):フォームデータをサーバにコミット

reset:すべてのコントロールを初期値

に変更

button:クリックすると何も表示されません(デフォルトの動作はありません)

🖍 autofocus
ページをロードするとオートフォーカスボタンのプロパティ(各ページに1つの要素しかオートフォーカスできません!)
🖍 disabled
クリックをブロックします(データを入力する前にコミットするのを防止できるかもしれません!)
🔎 input
formで最も重要なinputラベル!終了フラグがないことを特徴とするtypeに基づいて複数の入力フォームを作成できます.id、name、valueなどの属性は実際には画面に表示されませんが、接続データにとって非常に重要です.
🖍 type

inputで指定したフォームのプロパティ

共通テキスト、パスワード、数字からチェックボックス、range、radio、color、date、flake、monthなど…多種多様

🖍 name

submitの場合は所与のURLにactionとして付加された値

{attribute 속성값}?{name}={입력받은 data}の形状

🖍 id
labelのfor属性値と一致する必要がある属性
🖍 placeholder

text、password、numberなど直接入力可能な入力要素に何も入力されていない場合はデフォルト

ユーザが値を入力すると自動的に消える(値との差)

🖍 value

valueテキストを入力するinput要素を設定すると、ページロード時に入力した値が表示されます(ユーザーは値をクリアし、クリアするとプレースホルダ値が表示されます)

入力にvalue(たとえば

checkbox、radioなど)を設定すると、コミット時にname付きの値が渡されます!(有効でない場合はオン/オフと表示)

🖍 required
データが入力されていないときにコミットされるプロパティを禁止します.
🖍 minlength/maxlength, min/max
ユーザーの入力値が有効な値になる属性を制限します!
入力値がテキスト形式の場合、minlength/maxlengthプロパティで入力する最小/最大文字数を指定できます.同様に、入力値がnumber(number、date、rangeなど)の場合、min/maxの最大値/最大値を指定できます.
🖍 pattern
同様に、ユーザーが値を有効に入力できるようにシェイプを指定します.
「正規表現」(Regular Expression)では、文字と数字のパターンを指定できます.
🖍 以下は各種入力タイプ
📋 type="text"

<lable for="mood">How are you today?</lable>
<input type="text" id="mood" name="mood" placeholder="Today I am...">

結果🔻
How are you today?
📋 type="number"

<lable for="age">How old are you?</lable>
<input type="number" id="age" name="age" placeholder="20" min="1" max="100">

結果🔻
How old are you?
📋 type="radio"

チェックボックスとの違い:radioでは複数の入力から1つしか選択できない

グループ化するビューには同じ名前が必要です!

<label for="xs">XS</label>
<input type="radio" name="size" id="xs" value="xs">
<label for="s">S</label>
<input type="radio" name="size" id="s" value="s">
<label for="m">M</label>
<input type="radio" name="size" id="m" value="m">

結果🔻
XS
S
M
labelを押すと本来接続すべき無線入力が...ベログでは、これも役に立たない.😒 また、本来は同じ名前のinputの中から1つを選ぶべきなのですが、ここでも繰り返し選択できるのでしょうか?本当に
📋 type="range"

<label for="volume">🔊</label>
<input type="range" id="volume" name="volume" min="0" max="100">

結果🔻
🔊
rangeはvalueプロパティを使用してポーリング値を設定することもできます!
🔎 select & option

下に展開されたドロップダウンボックスのラベルを作成します!

optionにselectedプロパティを追加すると、このオプションが選択され、デフォルト

と表示されます.

<select name='fruits'>
  <option value='' selected>-- 선택 --</option>
  <option value='apple'>레몬</option>
  <option value='banana'>딸기</option>
  <option value='lemon'>블루베리</option>
</select>

🔎 textarea
通常のinputよりも多くのテキストを入力する必要がある場合は、このラベルを使用したほうがいいです.
rows、colsを使用して領域のサイズを指定できます

<textarea rows="10" cols="50" placeholder="입력하세요!"></textarea>

🙇‍♀️参考資料
コード開始、TCP School