HTMLの便利タグについての記事はこちら
フォームとは
会員登録や、お問い合わせなど、ユーザー側で入力できる登録内容の入力欄や、送信ボタンのことをフォームという。
フォームを作成するときは
- 文章を入力できるテキストボックス
- 選択肢から一つを選ぶラジオボタン
- 選択肢から一つを選ぶセレクトボックス
- 上記フォーム内容の送信ボタン
上記、複数のフォームを組み合わせて作成します。
入力フォームの種類
formタグ
formタグを記述し、ここからここまでがフォームであることを宣言する。
テキストボックスなどの各種フォームは、このformタグの中に記述する。
See the Pen Untitled by AIZAWA (@marumatosb) on CodePen.
inputタグ(テキストボックス)
テキストボックスは文字を入力できるフォームのことで、1行のみ入力できる。
テキストボックスを作るには、inputタグを使用しtype属性で種類を指定する。
ラベル
フォームの各種パーツにつける項目名。
名前を入力する欄には「名前」、メールアドレスを入力する欄には「MAIL」などと表示できる。
See the Pen Untitled by AIZAWA (@marumatosb) on CodePen.
selectタグ(セレクトボックス)
セレクトボックスはプルダウンで複数の選択肢の中から、一つ選ばせることができる。
optionタグ
selectタグの中にoptionタグを記述し、それぞれの選択肢を作成。
セレクトボックスを作成するには、selectタグとoptionタグを組み合わせて記述する。
See the Pen Untitled by AIZAWA (@marumatosb) on CodePen.
textareaタグ(テキストエリア)
長い文章を入力するためのフォームのこと。
複数行の入力が可能で、textareaタグを記述して作成する。
See the Pen Untitled by AIZAWA (@marumatosb) on CodePen.
inputタグ(ラジオボタン)
inputタグのtype属性にradioを指定することで、ラジオボタンが作成できます。
ラジオボタンは、複数の選択肢の中から、1つだけを選択できるフォームです。
セレクトボックスと違い、すべての選択肢がブラウザに表示されるため、性別などの選択肢が少ない場合に使用するとよい。
name属性
要素に名前を付けて区別するために指定する。
ラジオボタンは、name属性をすべて統一する必要がある。性別であればgenderなど、わかりやすい名前にする。
See the Pen Untitled by AIZAWA (@marumatosb) on CodePen.
inputタグ(チェックボックス)
利用規約の同意や、メルマガ購読の希望など、2択で選択できるフォームの作成に使用する。
inputタグのtype属性にcheckboxを指定することで、チェックボックスが作成できます。
See the Pen Untitled by AIZAWA (@marumatosb) on CodePen.
inputタグ(送信ボタン)
フォームの入力内容を送信する為のボタン。
送信先はformタグのaction属性に指定したURLになる。(phpの内容に絡むので割愛)
inputタグのtype属性にsubmitを指定することで、送信ボタンが作成できます。
value属性
value属性に記述した文字が、送信ボタンの表示される文字になる。
See the Pen Untitled by AIZAWA (@marumatosb) on CodePen.
今日の積み上げ
- HTML基礎
