はじめに
HTML&CSS入門講座の第二十五弾として、【HTML】 formタグの 初心者向けの使い方について紹介します。
この記事を読むと次の疑問について知ることができます。
- formタグとは?
- labelタグとは?
- inputタグとは?
- textareaタグ、selectタグとoptionタグとは?
ここでは、【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タグとは?などについて紹介してきました。
この記事があなたにとって少しでもお役に立てればこれほど嬉しいことはありません。
以上です。
コメント