【HTML】フォーム部品を作る

HTML

今回は、HTMLのフォームタグを復習したので見返して使えるように簡単な備忘録として残します。

色々なフォーム部品がある。

f:id:yskmtg:20210620104707p:plain
フォームタグ

1行テキストのフォーム

<input type="text">
<input type="text", value="hello"> # value属性で初期値を入れておける。画像の左から2番目


パスワードのフォーム

<input type="password"> # 画像の左から3番目


複数行テキストのフォーム

<textarea name="テスト">ああああ※初期値はここに入力する</textarea> # 画像の一番右


入力例を入れておきたい場合

  • 記入例を入れるには、 placeholderを使う。placeholderは入力をはじめると消えてしまう
    f:id:yskmtg:20210620110325p:plain
    記入例
<input type = "text" placeholder = "yskmtg'sブログ">


フォームにラベルをつける

  • ラベルと入力フォームを紐づける必要がある。下記の「名前」を押しても入力欄で入力できるようになる
    f:id:yskmtg:20210620111321p:plain
    名前入力
<label for = "name">名前</label>
<input type = "text" id = "name">
  • 一文で書くこともできる
<label >名前<input type = "text"> </label>


ドロップダウンリストをつける

f:id:yskmtg:20210620112235p:plain

f:id:yskmtg:20210620112309p:plain

<body>
  <label for = "side menu">サイドメニュー</label>
  <select id="side menu">
    <option></option>
    <option>サラダ</option>
    <option>ポテト</option>
    <option>アイスクリーム</option>
    <option>ドリンクバー</option>
  </select>
</body>
  • size属性で表示数を指定できる。selectd属性でデフォルトで選択してある値を決められる。またmultiple属性で複数選択できる

f:id:yskmtg:20210620112842p:plain

<body>
  <label for = "side menu">サイドメニュー</label>
  <select id="side menu" size = "3" multiple>
    <option></option>
    <option selectd>サラダ</option>
    <option>ポテト</option>
    <option>アイスクリーム</option>
    <option>ドリンクバー</option>
  </select>
</body>


チェックボックスをつける

  • チェックボックスのラベルとフォームは紐付けて文字を押しただけでもチェックされるようにする。checked属性で最初にチェックしておく項目を決められる

f:id:yskmtg:20210620114108p:plain

<body>
  <fieldset>
    <legend>サイドメニュー</legend>
    <label><input type = "checkbox" checked>サラダ</label>
    <label><input type = "checkbox">ポテト</label>
    <label><input type = "checkbox">アイスクリーム</label>
    <label><input type = "checkbox">ドリンクバー</label>
  </fieldset>
</body>


ラジオボランをつける

  • 上記の"checkbox"を"radio"に変更する。checked属性で最初にチェックしておく項目を決められる。またname属性を設定するとチェックは1つだけつけられるようになる

f:id:yskmtg:20210620114650p:plain

<body>
  <fieldset>
    <legend>サイドメニュー</legend>
    <label><input type = "radio" name = "side menu" checked>サラダ</label>
    <label><input type = "radio" name = "side menu">ポテト</label>
    <label><input type = "radio" name = "side menu">アイスクリーム</label>
    <label><input type = "radio" name = "side menu">ドリンクバー</label>
  </fieldset>
</body>


  • 他にもtype = "color", type = "date", type = "number", type = "range"などの入力部品がある。ただ古いブラウザだとサポートされていないので注意が必要！


ボタンをつける

  • disabledでボタンを押せない設定にもできる

f:id:yskmtg:20210620120405p:plain

<body>
  <input type = "button" value = "OK">
  <button>OK</button>
  <input type = "button" value = "OK" disabled>
  <button disabled>OK</button>
</body>