Go to Qiita Advent Calendar Top
LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@likapantrip

【HTML】フォームについて

Posted at

記事概要

HTMLで作成するフォームについて、整理する

フォーム作成

記載方法

<form> </form>のなかに、入力フォームなどを作成する

<form id="form">
  <input type="text" name="name" placeholder="名前"><br>
  <textarea name="comment" placeholder="コメント"></textarea><br>
  <input type="submit" value="送信">
</form>

<!-- 以下、コンソール画面に送信結果を表示 -->
<script>
  // フォーム要素を取得
  const form = document.getElementById('form');

  // submitイベントをキャッチ
  form.addEventListener('submit', function(event) {
    event.preventDefault(); // サーバー送信を止める

    // フォームのデータを取得
    const formData = new FormData(form);

    // 値をオブジェクトに変換して表示
    const data = Object.fromEntries(formData.entries());
    console.log('フォームの入力値:', data);

    // 各項目の値を表示
    console.log('名前:', data.name);
    console.log('コメント:', data.comment);
  });
</script>

Image from Gyazo

リクエストの設定

action属性

リクエスト先のURLを指定する属性
フォームに記載した内容がリクエストとして送信される

<!-- ローカルサーバーで起動しているアプリケーションの場合、「localhost:3000/users」へ画面遷移 -->
<form action="/users" method="post">
  <!-- 入力フォームなどを記述 -->
</form>

method属性

リクエストに使用されるHTTPメソッドを指定する属性
getかpostを指定できる

<!-- フォームに記載した内容を送信する際のHTTPメソッドとして、「POST」を指定する -->
<form action="/users" method="post">
  <!-- 入力フォームなどを記述 -->
</form>

name属性

フォームの名前を指定する

<form action="/users" method="post" name="profile-form">
  <!-- 入力フォームなどを記述 -->
</form>

入力フォーム

input要素

type属性を指定することで、フォームの入力欄や実行ボタンなどを作成することができるインライン要素

type属性=text

１行のテキスト入力欄を作成する

type属性=email

メールアドレスを入力するためのテキスト入力欄を作成する

type属性=tel

電話番号を入力するためのテキスト入力欄を作成する

type属性=url

WebサイトのURLを入力するためのテキスト入力欄を作成する

placeholder属性

入力フォームに仮の文字列を入れる

<form>
  名前(姓)
  <input type="text"><br>
  名前(名)
  <input type="text" placeholder="太郎"><br>
  メールアドレス
  <input type="email" placeholder="taro@example.com"><br>
  電話番号
  <input type="tel" placeholder="090-1234-5678"><br>
  Webサイト
  <input type="url" placeholder="https://www.sample.com/">
</form>

Image from Gyazo

type属性=radio

複数の中から１つしか選択できないラジオボタンを作成する

type属性=checkbox

複数選択可能なチェックボックスを作成する

checked属性

項目が最初から選択された状態になる

name属性

送信するデータの名前を設定する
サーバーとのやり取りに関係するものであり、ラジオボタンやチェックボックスのグループ指定としても機能する

  • 任意の値を指定することで、paramsを通して、その値をコントローラーへ渡すことができる

    <!-- キーに対して、値を格納する -->
<select name ="room"></select>
=> {"room" => "値"}
=> {"room" => "1"}

<!-- キーに対する値として、ハッシュを入れ子にすることを示す -->
<select name ="room[user_ids]"></select>
=> {"room" => {"user_ids" => "値"}}
=> {"room" => {"user_ids" => "1"}}

<!-- キーに対する値を、配列として格納することを示す -->
<!-- 1つのキーに対して、複数の値を受け取ることができる -->
<select name ="room[user_ids][]"></select>
=> {"room" => {"user_ids" => ["値"]}}
=> {"room" => {"user_ids" => ["1", "2"]}}

value属性

フォームの送信時に、どのような値を送信するのかを決められる

<form id="form">
  性別
  <!-- 初期状態から"男性"が選択されている -->
  <input type="radio" name="gender" value="0" checked>男性
  <!-- ブラウザでは"女性"と表示されているが、フォーム送信時には"1"としてデータ連携される -->
  <input type="radio" name="gender" value="1">女性
  <input type="radio" name="gender" value="2">その他<br>
  
  好きな色
  <!-- 初期状態から"赤"が選択されている -->
  <input type="checkbox" name="color" value="red" checked>赤
  <!-- ブラウザでは"青"と表示されているが、フォーム送信時には"blue"としてデータ連携される -->
  <input type="checkbox" name="colors" value="blue">青
  <input type="checkbox" name="colors" value="yellow">黄
  <input type="checkbox" name="colors" value="green">緑<br>

  <input type="submit" value="送信">
</form>

<!-- 以下、コンソール画面に送信結果を表示 -->
<script>
  // フォーム要素を取得
  const form = document.getElementById('form');

  // submitイベントをキャッチ
  form.addEventListener('submit', function(event) {
    event.preventDefault(); // サーバー送信を止める

    // フォームのデータを取得
    const formData = new FormData(form);

    // gender（ラジオボタンなど1つだけ）を取得
    const gender = formData.get('gender');

    // colors（チェックボックスなど複数選択可能）を配列で取得
    const colors = formData.getAll('colors');

    // 各項目の値を表示
    console.log('性別:', gender);
    console.log('好きな色:', colors);
  });
</script>

Image from Gyazo

type属性=hidden

画面上には表示されないinput要素を作成する
ブラウザ画面に表示せず、フォーム送信時にデータ連携する

type属性=submit

送信ボタンを作成する

<form id="form">
  <input type="text" name="name" placeholder="名前"><br>

  <input type="radio" name="feedback" value="0" checked>Very Good
  <input type="radio" name="feedback" value="1">Good
  <input type="radio" name="feedback" value="2">Bad<br>

  <!-- 画面上には表示しないが、回答方法="Web"をフォーム送信時にデータ連携する -->
  <input type="hidden" name="how" value="Web" >
  
  <!-- valueで指定した値が、画面のボタンに表示される -->
  <input type="submit" value="フィードバックを送信">
</form>

<!-- 以下、コンソール画面に送信結果を表示 -->
<script>
  // フォーム要素を取得
  const form = document.getElementById('form');

  // submitイベントをキャッチ
  form.addEventListener('submit', function(event) {
    event.preventDefault(); // サーバー送信を止める

    // フォームのデータを取得
    const formData = new FormData(form);

    // 値をオブジェクトに変換して表示
    const data = Object.fromEntries(formData.entries());
    console.log('フォームの入力値:', data);

    // 各項目の値を表示
    console.log('名前:', data.name);
    console.log('フィードバック:', data.feedback);
    console.log('回答方法:', data.how);
  });
</script>

Image from Gyazo

type属性=image

送信ボタンとして、任意の画像ファイルを指定する

src属性

使用したい画像のファイルパス、ファイル名を指定する

alt属性

画像を説明するテキストを入力する

textarea要素

複数行のテキスト入力欄を作成するインライン要素

<form id="form">
  <!-- 仮の値「メッセージを入力」を入力 -->
  <textarea name="message" placeholder="メッセージを入力"></textarea><br>
  <!-- 実際の値「hello!」を入力 -->
  <textarea name="greeting">hello!</textarea><br>
  
  <!-- 送信ボタンを画像で設定 -->
  <input type="image" src="images/button.png" alt="送信">
</form>

<!-- 以下、コンソール画面に送信結果を表示 -->
<script>
  // フォーム要素を取得
  const form = document.getElementById('form');

  // submitイベントをキャッチ
  form.addEventListener('submit', function(event) {
    event.preventDefault(); // サーバー送信を止める

    // フォームのデータを取得
    const formData = new FormData(form);

    // 値をオブジェクトに変換して表示
    const data = Object.fromEntries(formData.entries());
    console.log('フォームの入力値:', data);

    // 各項目の値を表示
    console.log('メッセージ:', data.message);
    console.log('あいさつ:', data.greeting);
  });
</script>

Image from Gyazo

label要素

フォームの項目名とフォームの入力要素（画像選択フォーム、プルダウン、チェックボックスなど）を関連付ける

for属性

labelタグ側で指定し、ラベルをフォームの入力要素に紐づける
※重複不可であり、id属性の値と同じものにする

id属性

フォームタグ側で指定し、フォームをラベルに紐付ける
※重複不可であり、for属性の値と同じものにする

<form id="form">
  <!-- for属性を用いて関連づける方法 -->
  <label for='sei'>名前(姓)</label>
  <input type="text" name="sei" id="sei">

  <!-- labelタグで入力欄のタグを囲む方法 -->
  <label>名前(名)
    <input type="text" name="mei">
  </label>

  <input type="submit" value="送信">
</form>

<!-- 以下、コンソール画面に送信結果を表示 -->
<script>
  // フォーム要素を取得
  const form = document.getElementById('form');

  // submitイベントをキャッチ
  form.addEventListener('submit', function(event) {
    event.preventDefault(); // サーバー送信を止める

    // フォームのデータを取得
    const formData = new FormData(form);

    // 値をオブジェクトに変換して表示
    const data = Object.fromEntries(formData.entries());
    console.log('フォームの入力値:', data);

    // 各項目の値を表示
    console.log('名前(姓):', data.sei);
    console.log('名前(名):', data.mei);
  });
</script>

Image from Gyazo

label要素による紐付け

label要素がクリックされたときに、子要素もクリックされたことにしてくれるため、見えないはずのボタンをクリックしたかのように動作させることができる

<p>
  2) Label要素あり　※「画像」ボタンを経由して「ファイルを選択」をクリックし、ファイル選択できる
  <form>
    <div class="flex">
      <input type="text" placeholder="タイトル" class="form">
      <label class="form-image">
        画像
        <input type="file" class="hidden">
      </label>
    </div>
    <input type="submit" value="送信" class="form">
  </form>
</p>

Image from Gyazo

サンプルコードのhtml/index_form-label.htmlを参照

select要素

プルダウンのようなセレクトボックスを作成する

option要素

select要素の中に記述することで、プルダウンの選択肢になる

selected属性

項目が最初から選択された状態になる

<form id="form">
  <select name="fruit">
    <option value="" selected>好きなフルーツを選択してください</option>
    <option>りんご</option>
    <option>オレンジ</option>
    <option>ぶどう</option>
  </select>
</form>

Image from Gyazo

参考

複数の値を連携する

<form>
  <div>
    <select name="room[user_ids][]">
      <option value="">チャットするユーザーを選択してください</option>
      <option value="2">User2</option>
      <option value="3">User3</option>
    </select>
    <!-- 画面上非表示だが、値を連携する -->
    <input name="room[user_ids][]" type="hidden" value="1">
  </div>
  <input type="submit" value="送信" class="form">
</form>
=> User2を選択した場合のパラーメータは、「{"room"=>{"user_ids"=>["2", "1"]}}」
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?