peeks-blog

自分用メモ

随時追記していく

※参考：HTMLとは？head要素やbody要素、属性について解説

form要素

入力フォームの項目（部品）は、全てform要素の中に書く
form要素は属性を使用して、データの送信先や送信方法を指定する

送信先の指定にはaction属性を使用し、
受け手となるプログラムなどへのパスを記載する
→「recieve.php」などのファイルを指定する？

method属性にはデータの追伸方法としてpostやgetを指定する
→本では今のところpostしか扱ってない

ID名は「entry」と指定する事が多い？

formタグで囲った中には、dl, dt, ddのリストを使用する
dd（定義リスト）の中に、input要素を書いていく

※参考：HTMLのリストとは？ ul, ol, dlの3種類をまとめ

input要素

フォームの各部品にはinput要素を使用する
この要素は、type属性が指定する値によって
様々な部品を作成する事ができる

type属性の値には以下のものがある

type=“button”：汎用ボタン
type=“checkbox”：チェックボックス
type=“radio”：ラジオボタン
type=“text”：テキスト入力欄（初期値）
type=“submit”：送信ボタン

こうしたtype属性以外にも、
部品の名前を指定するname属性など色々な属性を指定でき、
ユーザーに入力して欲しい項目に合わせて使い分ける

チェックボックス

input要素で設置できる部品
複数項目から選択するものなので、複数の部品をグループにする設定が必要

チェックボックスは複数の選択肢からいくつでも選択できる
（1つしか選べないのが、後述するラジオボタン）

チェックボックス、ラジオボタン共に
各input要素にname属性で同じ値を指定して、

グループである事を示す
また、value属性には、その項目が選択された時に
サーバーに送信される値を指定する

ラジオボタン

ラジオボタンとは、複数から１つだけを選ぶタイプのボタン
チェックボックスと異なり、ラジオボタンは複数の項目を選択できない

label属性を使用することで、項目名を
クリックで選択できるようになり、操作性が向上する

テキスト入力欄

名前のようにシンプルな1行の入力項目の際に使用する

「名前」の場合、type属性に「text」を指定する
「メールアドレス」を入力させる場合は、type属性に
メールアドレス用の「email」を指定する

また、入力必須項目であればrequired属性を付ける
この属性を指定すると、未送信のまま送信ボタンを押すと
ブラウザに警告が表示される

送信ボタン

送信ボタンはtype属性に「submit」を入れ、
id属性には「submit_button」というID名を指定し、
value属性に「送信する」という値を入力する

なお、送信ボタンは1つのフォームに1つ設置が原則

ボタンについてあれこれ

まずはinputとbuttonどちらを使うか。
続いて、タグ内のtype、name、value（値）属性をどう扱うか。
type属性については、submitとbuttonどちらを使うか。

「input type=“button”」と「buttonタグ」の違い

・inputタグは閉じタグがないのに対し、buttonタグは開始タグと閉じタグがある。
・buttonタグは子要素を持てる
→内側に好きなだけ書けるので、CSSでカスタマイズしやすい。

form内にあるtype、name、value属性について

type属性
→submit、button、resetといった、３つの属性を指定できる

name属性
→ボタンに名前をつける事のできる属性
（CSSのプロパティと似てる？）

value属性
→送信を押した時に、何かしらの値を送信できる。

type属性の、submitとbuttonの違いについて

submit
→押しただけで送信される
→「押した時の処理」を記述する必要はない

button
→クリックイベントで、送信を行うスクリプトを記述しておけば送信される
　何も指定しなければ、押すだけで送信される事はない
→タグであり、囲む事ができるので、ボタン上のテキスト表示をCSSで変更できる

セレクトボックス

都道府県や年齢といった選択肢の多い項目の場合、
ラジオボタンだと多くの項目が並んで使い勝手が悪いので、
select要素によって、プルダウン型のセレクトボックスを使用する

select要素はoption要素とセットで使用する
selectの中にoptionを入れ子として書いて選択肢リストを作成する

select要素の中には、name属性とid属性を記載する

テキストエリア

複数行を入力できるテキストエリアを設置する際は、
textarea要素を使用する

textarea要素は、rows属性とcols属性によって
入力フィールドの高さと横幅を指定できる
またCSSで大きさを指定する事も可能