TIL 4. HTMLの複数のタグ#2(Form(1))

今回はhtmlタグのformに関する内容に重点を置きます。

form:ユーザー入力を受信するためのタグ

     (함께 사용하는 속성 action="API주소", method="GET|POST")

input:データ受信時に使用するタグ(input field)。属性typeを記入する必要があります

inputプライマリプロパティ
-.type:inputの各種タイプ(text、email、password、url、number、file)
-.プレースホルダ:入力バーに内容を表示する
-.maxlength:入力欄の最大文字数を指定
-.minlength:入力バーの最小文字数を指定します
-.required:無条件入力の指定
-.value:初期値の設定
-.min:最小値の指定
-.max:最大値の指定
-.accept:許可されている拡張子(.jpg.pngなど)

を指定します.

<form action="" method="GET">
<input type="text" placeholder="이름을 입력하세요" minlength="5" maxlength="13" />
<input type="number" placeholder="나이" min="5" max="100" />
<input type="password" placeholder="비밀번호를 입력하세요" minlength="5" maxlength="13" />
  <button>
    submit
  </button>
  </form>

submit

inputのradio&checkboxプロパティ:複数のアイテムを選択するためのプロパティ(単一選択、チェックボックス複数選択)

nameを使用して1つのグループに接続する必要があるプロジェクト

のみを選択します.

の値を使用して、選択したアイテムをサーバ

に送信します.

ラジオを使う

<form action="" method="GET">
  <input type="radio" name="subscription" value="subscribed" id="subscribed" />
  <label for="subscribed"> 구독중 </label>
  <input type="radio" name="subscription" value="unsubscribed" id="unsubscribed" />
  <label for="unsubscribed"> 미구독 </label>
    <button type="submit">
      submit
    </button>
  </form>

購読中
未読
submit

チェックボックスの使用

  <h3>
  내 취미
  </h3>
   <form>
    <input type="checkbox" name="hobby" value="running" id="running" />
    <label for="running">달리기</label>
    <input type="checkbox" name="hobby" value="reading" id="reading" />
    <label for="reading">독서</label>
    <input type="checkbox" name="hobby" value="basketball" id="basketball" />
    <label for="basketball">농구</label>
     <button type="submit">
       submit
     </button>
  </form>

私の趣味
競走する
本を読む
名バスケットボール
submit