皆さんが新しくショッピングサイトに会員登録するときなどには、個人情報を入力します。その際に、氏名や性別・血液型など、様々な情報を入力します。会員登録や企業の問い合わせフォームなど、様々な情報を入力して管理者に送る際の記入欄などを「フォーム」といいます。
フォームには以下の図のようにいくつかの種類があります。今回・次回と2回にわたり、フォームの種類と作成方法について解説していきます。
フォームの作成
フォームランを作成するには、様々な入力欄やボタンのコードを<form>タグで囲みます。
<from action="example.php" method="post" name="contact-form">
ここに入力欄やボタンのコードを入力する
</form>各属性について
action属性：データの送信先ファイルを指定する
method属性：データの送信方法をgetかpostで指定します。基本的に秘匿性の高い情報が含まれる場合はpostです。
name属性：フォームの名前を指定します。受取先のファイルにて使用します。
テキスト入力欄
テキストの入力欄を作成する際には<input type=”〇〇”>を使用します。テキスト入力欄の属性値は以下の通りです。
text：1行のテキスト。
password：パスワードの入力欄。文字を入力すると「●」が表示され、入力内容が外から見えなくなります。
serch：検索する際のテキストを入力。
email：メールアドレス入力欄。
url：WebサイトのURLを入力する。
また、placehoruda属性を使用し、あらかじめ入力欄にテキストを入力しておくこともできます。冒頭のイラストのテキスト入力欄を作成するためのコードは以下の通りです。
名前：<input type="text" placeholder="氏名"><br>
パスワード<input type="password"><br>ラジオボタン
いくつかの選択肢の中から一つだけ選択できるようなボタンを、ラジオボタンと呼びます。Webサイトでは「〇」クリックすることで選択ができるようになっています。サンプルのようなラジオボタンを作成するためのコードは次のように、type属性にradioを指定します。
性別：
<input type="radio" name="gender" value="男">男
<input type="radio" name="gender" value="女">女
<input type="radio" name="gender" value="その他" checked>その他<br>name属性：ラジオボタンの名前を指定。送信先のファイルで変数名として使用します。
value属性：送信される選択肢の値。name属性とセットで送信先のファイルにて使用します。
chacked：指定すると最初から指定された状態となります。
まとめ
フォームを使用することでWebサイトで入力した情報を管理者に送信することができます。今回紹介したもの以外にも種類がありますので、また次回紹介させていただきます。
コメント