【HTML】 formタグの 初心者向けの使い方、action、post、input、methodなども紹介|HTML&CSS入門講座(25)

HTML&CSS
この記事は約5分で読めます。

はじめに

 HTML&CSS入門講座の第二十五弾として、【HTML】 formタグの 初心者向けの使い方について紹介します。

 この記事を読むと次の疑問について知ることができます。

  • formタグとは?
  • labelタグとは?
  • inputタグとは?
  • textareaタグ、selectタグとoptionタグとは?
 HTML&CSS入門講座(24)では、【CSS】box-shadowの使い方について解説してきました。
 
 ここでは、【HTML】 formタグの 初心者向けの使い方について深堀していきます。

formタグとは?

 メルマガ登録フォーム、問い合わせフォーム、会員募集フォームなどフォームを設置する場面は結構多いと思います。

 このような場合に、利用できるHTMLの要素が formタグです。

 作成したフォームは、サーバーとのデータのやり取りが必要になり、それにはPHPのようなプログラム言語が必要となりますが、ここでは、フォームの外観であるHTMLによる form タグ及び、その中で利用するinputタグ、labelタグ、textareaタグ、selectタグなどについて紹介していきます。

 form タグの書き方を次に示します。

 <form method="post" action="formURL" enctype="multipart/form-data">
<!-- フォームの部品
inputタグ
labelタグ
textareaタグ
selectタグ
など -->
</form>
 formの開始タグ内に、属性を書き入れます。
 
 formタグは、色々な属性を持つことができますが、method、action、enctypeについてのみ紹介します。
 
  • method属性
    サーバーにデータを送る形式を指定
    • post
      主にデータを保存する際に使用、一度に大量のデータを送信可能
    • get(初期値)
      主にデータを取得する際に使用
  • action
    データの転送先のURL
  • enctype
    送信時のデータ形式(エンコード形式)を指定
    • application/x-www-form-urlencoded(初期値)
      データをURL形式に変換して送る形式
    • multipart/form-data
      フォームデータの中に、画像や動画、音声など色々なデータが含まれるタイプの送信形式
    • text/plain
      プレーンテキスト形で送る形式

labelタグ

 label タグは、フォーム内の部品に対して名前を付けることができます。

<label for="label-id">ラベル名</label>
 フォームの表題の「感想フォーム」以外の文字は、labelタグで挿入した名前です、これから色々と肉付けしていきます。

inputタグ

 フォームを作成する上での主要な部品となる要素で、書き方は次のようになります。

<input type="タイプ属性値" name="名前" value="初期値">

 属性に色々取ることができますが、ここでは、type、name、value属性の3つについてのみ紹介します。

  • type属性
    フォームに埋め込む部品の形式を指定
    • text
      1行のテキスト入力
    • email
      メールアドレスの入力
    •  password
      パスワード入力
    • tel
      電話番号入力
    • date
      カレンダーから年月日を入力
    • datetime-local
      年月日+時間を入力
    • radio
      ラジオボタンを設置して、どれか1つを選ばせる入力方法
    • checkbox
      チェックボックスで選ばせて(複数選択可能)入力させる方法
    • file
      ファイルのアップロード
    • hidden
      htmlコードに書いてあっても、ブラウザーでは隠れて見えない要素
    • submit
      フォームを送信ボタン
    • image
      画像送信ボタン
    • reset
      リセットボタン
    • button
      汎用ボタン
  • name属性
    部品の名前を指定
  • value属性
    部品の初期値を指定

 上述のtype属性の内、text、email、radio、checkbox、submitを使った例を紹介します。

textareaタグ、selectタグとoptionタグ

 textareaタグは、感想、ご意見など1行ではおさまらない入力に使い、selectタグとoptionタグは、選択式メニューをフォームに設置する際に使います。

 それぞれの書き方は、次のようになります。

【textareaタグ】
<textarea name="ラグ名 rows="行数" cols="文字数">タグ内に入れる文字</textarea>

【selectタグとoptionタグ】 例として4つから選択
<select name="number" value="初期値">
<option value="1">選択肢1</option>
<option value="2">選択肢2</option>
<option value="3">選択肢3</option>
<option value="4">選択肢4</option>
</select>
 それでは今までのフォームで、感想の部分にtextareaタグを、【どんな記事が読みたいですか?】の部分にselectタグとoptionタグを使ってみたいと思います。
 

おわりに

 如何だったでしょうか?

 formタグとは?、labelタグとは?、inputタグとは?、textareaタグ、selectタグとoptionタグとは?などについて紹介してきました。

 この記事があなたにとって少しでもお役に立てればこれほど嬉しいことはありません。

以上です。

コメント

タイトルとURLをコピーしました