はじめに
Webページ上で次のページを閲覧する際にパスワードを入力したり、ECサイトで商品を購入する際、自分の住所や支払い方法を選択した経験があると思います。
入力した (入力された) 値に応じて次の処理を定義する方法について学んでいきます。
Step1: 概念を知る
HTML (Hyper Text Markup Language)
ウェブページを作成するためのマークアップ言語。
画像や表を見れるようにするために、文字に印 (タグ) をつけていくのが特徴。
フォーム
パソコンの操作画面における、ユーザーからの入力を受け付ける部分を指す。
氏名やアドレスを入力する部分を入力フォームなどと呼ぶことがある。
HTMLフォーム
<input> タグ、<form> タグを使用し、 データを入力、送信するための項目を表示させる。
<input> タグ、 <form> タグ内の属性を変更することで様々な種類を使い分ける。
<input> タグで入力部分や選択部分を作成し、 <form> タグで送信ボタンの作成、 送信の設定を行う。
Step2: 使い方を知る
HTMLフォームの表記方法を紹介します。
全てを紹介することはできないので、 代表的なものに絞っています。
送信
後述する、<input> タグで作成された入力フォームに入力されたデータを受け取って、サーバーに送信します。
method属性で指定した転送方法で、action属性 に指定したアクション処理を行います。
テキストボックス (1行)
1行分のテキスト入力欄を作成します。
name属性 :フォーム部品名および、 サーバへ送信するリクエストパラメータ名のパラメータ名になります。
form属性 : データが送信される際、 name属性で指定した名前と入力された値が一組になって送信されます。
size属性 : テキストボックスの表示サイズを指定します。
maxlength属性 入力できる最大文字数を指定します。
テキストボックス (2行以上)
2行以上文のテキスト入力欄を作成します。
パスワード入力欄
入力したテキストがアスタリスク (*) などに置き換えて表示されます。
ただし、 データを受け取れば見ることができますので、
完全に暗号化されるわけではない点に注意してください。
チェックボックス
複数選択可能なチェックボックスを作成します。
checked属性を指定すると、その項目についてはあらかじめチェックの付いた状態となります。
ラジオボタン
1つしか選択できないラジオボタンを作成します。
ラジオボタンも checked属性を指定すると、その項目についてはあらかじめチェックの付いた状態となります。
ファイル送信(アップロード)
サーバーへファイルを送信するための、ファイル名の入力欄と [参照]ボタンを作成します。
汎用ボタン
用途に合わせて使える汎用ボタンを作成します。
JavaScript等とあわせて、ボタン押下時にブラウザ上でさまざまな処理を行います。
画像ボタン
画像をクリックできるボタンをつくります。
使用する画像ファイルは src属性で指定します。
alt属性が必須となります。
また、 alt属性は画像が表示されなかった際の代替テキストになります。
リセットボタン
それまでに入力した情報をキャンセルして初期状態に戻します。
