フォームとは？
フォームとは、ユーザーが入力した情報を送信する為の仕組みです。
お問合せや会員登録時に使用します。
フォームの要素と各属性
フォーム要素にはセットで使用する各属性が存在します。
役割を含めて載せていきます。
form
フォーム使用時の親要素となります。
formの中にこの後に載せている各要素を記述して専用フォームを作成していきます。
<form>…</form>
action
actionは、データの送信先ページを指定する属性です。
PHPやGoogleフォームなど、意図する内容を記述します。
空白のままは自分自身に送信してしまう為、必ず指定してあげましょう。
<form action=”send.php”>…</form>
method
methodは、データの送信方法を指定する属性です。
以下の内、どちらかを指定してあげます。
基本的には「post」がおすすめです。（個人情報の取扱いやURLデータ非表示、文字数制限のなし等の理由から）
get
getを指定した場合、URLに表示される特徴があります。
検索を主な用途とします。
基本的にはpostを使用した方がいいですが、検索を使用する際はgetを使用しましょう。
post
postを指定した場合、URLに表示されない特徴があります。
問い合わせを主な用途とします。
フォーム内で使用する各要素と属性
フォーム内では各要素と属性を用途別に応じて使えるパーツ要素が存在します。
それぞれ載せています。
input要素+type属性
input要素とtype属性をフォーム内に記述することで、「文字の入力」や「数字の入力」、「選択」などの様々な情報を付与すること出来ます。
<input type=”text”>
↑例えばこれは、文字を入力することが出来るエリアを設置出来ます。
他にも、以下のような情報をtype属性に指定出来ます。
- email（メールアドレス）
- password（パスワード）
- tel（電話番号）
- number（数字）
- checkbox（複数選択）
- radio（単一選択）
- submit（送信）
- hidden（非表示データ）
- url（URL）
- image（画像。src・altの記述で送信ボタンの装飾が可能）
input要素+type属性+name属性
フォーム内のinput要素とtype属性に、name属性を記述することで、送信時の項目名を付与することが出来ます。name属性が無くてもフォーム内の入力は出来ますが、データが送信されなくなる為、必須の属性となります。
<input type=”text” name=”username”>
↑nameに指定する名称に決まりはありません。
同じフォーム内に複数のinput要素がある場合、name属性に同名称を設定するとグループとなります。
input要素+value属性
フォーム内のinput要素にvalue属性を記述することで、表示名に使用したり、データ送信時の情報に使用したり、ボタン名に表示させたり、組み合わせる要素や属性によって使い方を変えることが出来ます。
画面表示名に使用
<input type=”text” value=”田中太郎”>
↑入力欄に初期値として表示させることが出来ます。ユーザーが変更可能です。
以下を指定する際のvalueの動きとなります。
- text
- password
- number
- search
- data
データ送信時に使用
<input type=”checkbox” name=”color” value=”赤”>赤色です
↑valueにしてした「赤」はデータ送信時に使用。実際の表示名は「赤色です」となります。
以下を指定する際のvalueの動きとなります。
- checkbox
- radio
- hidden
ボタン名の表示に使用
<input type=”submit” value=”送信する”>
↑ボタン系の場合は、valueに指定した内容がボタン名に表示されます。
- submit
- button
- reset
label要素とfor属性・id属性
label要素とfor属性・id属性を記述することで、チェックボックスやラジオボタンだけではなく、関連するテキスト部分もクリック対象範囲に広げることが出来ます。
スマホなどの小さな画面上では、テキスト部分までクリック出来た方が使い勝手が良くなります。
<input type=”checkbox” name=”travel” value=”日本国内” id=”japan”>
<label for=”japan” >日本国内</label>
↑チェックボックスだけでなく、関連する「日本国内」のテキストまでクリック可能になる。
※ id名の重複は出来ない為、同じファイル名に1つにしましょう
textarea要素
textarea要素を記述することで、複数行にわたるテキスト入力が出来ます。
お問合せ内容などに使用します。
<textarea name=”messge”></textarea>
select要素とoption要素 ※確認
select要素とoption要素を記述することで、セレクトボックス（プルダウン選択式の項目）を作成することが出来ます。
都道府県や年齢を選択する際に使用します。
<select name=”pref”>
<option value=”tokyo”>東京</option>
<option value=”osaka”>大阪</option>
</select>
select要素のmultiple属性
select要素にmultiple属性を指定すると、複数のセレクトボックスを選択可能になります。
<select multiple>
option要素のselected属性
option要素にselected属性を指定すると、最初から選択された状態に出来ます。
<option value=”不明” selected>不明</option>
input要素に記述をオススメする属性
ほぼ必須となる、input要素に記述をオススメする属性を載せています。
required属性
未入力時に送信不可にすることが出来ます。
<input type=”text” required>
placeholder属性
ユーザーがクリックして入力しようとすると、予め用意したテキストが消え文字を入力出来ます。
<input type=”text” placeholder=”苗字 名前”>
コメント