いよいよHTMLの基本のレッスンも大詰め。
今回はタグを使って「入力フォーム」をつくる方法を見ていきます。
WEBデザイナーやエンジニアを目指す人には、とても大切な部分です。
フォームを作るには、「コントロール」と呼ばれる小さな部品を組み立てていきます。
もくじ
入力フォームの役割は？
そもそもフォームとは何のためにあって、送った情報はどこにいってるのでしょうか？
フォームの入力内容は、そのホームページが置いてあるサーバーに送信されています。
もしデータを送信後、サーバーにリアクションとしてのプログラムがある場合、こちら側に結果が返ってくることもあります。
GOOGLEで検索したときを思い浮かべてみると、検索したいワードを入力してボタンを押すと検索結果が表示されますよね？
このようにフォームとは、こちらの情報を送信したいときや、逆に入力内容をもとになにか情報を得たいとき、相手側とのデータのやり取りの橋渡し的な役割をもっているのです。
・入力した情報を送る
・入力した内容を元に情報を得る
フォーム作成の基本
HTMLでフォームを作るには、コントロールと呼ばれるフォームやボタンなどの小さな部品を組み立てていきます。
種類がたくさんありますが、１つ１つ見ていきましょう。
基本のformタグ
formタグは名前の通り、フォームそのものを表しています。
いちばん外側を<form></form>で囲み、その中にそれぞれの部品を入れていきます。
部品をまとめてフォームとして機能させる箱のようなものです。
どんなに部品を並べても、この「form」という箱に入っていなければ動作しません。
formにはたくさんの属性がありますが、こちらでは基本的な２種類の属性について説明します。
*これから説明するaction属性とmethod属性は、PHPなどのサーバー側の知識と繋がってきます。
「とりあえず見た目だけ作れればいいよ」という方は次のinputタグに読み飛ばしても大丈夫です。
送信先を指定するaction属性
- action属性は送信するデータの宛先（ファイル名）を指定する
action属性は、入力されたデータをどこに送信するのか指定する属性です。
データの宛先といったところです。
具体的に宛先は、送信先のURLやファイルのパスを指定します。
*ファイルパスの書き方について、こちらで詳しく解説していますので、書き方をマスターしておきましょう。
今回は相対パスと絶対パスの書き方のちがいを、わかりやすく図を見ながら学んでいきます。 一回理解するとそんなに難しくないのに、初心者のうちはなかなかわかりづらいのが、このパスの概念です。 パスとはどんな役割があって、それぞ[…]
サーバーとも関わってくるところなので、いまはちょっとイメージしづらいかもしれません。
フォームを機能させるためには、PHPなどでサーバ側のプログラムを書いていきます。
例えば送信されたお客さんの連絡先をデータベース登録したいときなどは、PHPでcontact.phpのような名の登録処理をするファイルをつくり、以下のように指定します。
<form action="contact.php"></form>送信方法を表すmethod属性
- method属性はGETかPOSTで指定する
- GETはURLからデータが見えて、POSTは見えない
method属性はデータをサーバーにどのように送信するかの指定をします(HTTPリクエストメソッドと呼ばれます)。
送信方法には２種類あり、GETかPOSTを指定することになります。
GETメソッドは、送信の際に入力した内容がURLの後ろに追加されるという特徴があります。
Googleを例にGETの特徴を見ていきましょう。
フォームに検索したいワードを入れて検索ボタンを押してみます。
暗号のような文字列がURLの後ろにくっついています。
これは検索した’入力フォーム html’という言葉がGoogle独自のルールで変換された文字列です。
サーバの処理によって入力内容の言葉がそのままURLにくっついたり、このように文字列に変換されたり、いろいろなケースがあります。
一方、POSTメソッドでは内容はURLからは見ることが出来ません。
そのため、URLから個人情報など見られると問題があるような内容の場合はPOSTを指定、とくに見られても差し支えない内容の場合はGETを指定するということです。
「見られても大丈夫な情報って？」と思ったかもしれませんが、たとえば不特定多数が使う検索フォームや、会社の人だけが使う業務用のフォームなどです。
グーグルで検索したとき、ものすごくURLが長くなったりしますよね？
これも検索のための様々な情報がURLの後ろにくっついているからなのです。
ここで注意しなければいけないのが、たとえPOSTにして見えなくしたとしても、セキュリティは万全ではないということです。
このあたりもサーバーサイドを掘り進めていくと、触れていくところですので「今はこんな方法があるのだな」、くらいで大丈夫ですよ。
method属性の指定
<form method=”post”></form> : URLから見える方法でデータが送信される
<form method=”get”></form> : URLからデータは見ることは出来ない
変幻自在のinputタグ
それではここから主要なフォームのパーツである、inputタグについて学んでいきます。
とても大事なタグなのですが、このinputタグのいちばんの特徴として、type属性によっていろいろなタイプのフォームに、忍者のように七変化するのです。（その数ゆうに１０種類以上！）
<input type=”●●●●”>のように指定して、閉じタグは必要ありません。
よく使うものは限られるので、まったりと見ていきましょう。
超基本のtextタイプ
type=”text”とすると１行だけのフォームが表示されます。
inputのデフォルトの型がこのtextで、なにも指定しなくても同じになります。
<form>
なまえ: <input type="text">
</form>
1行だけ入力可能なフォームが表示されました。
試しに名前を打ってみてください！
パスワードを作るpassword
これはよく見るのではないでしょうか？
ログイン時などにパスワードを入力するときに表示される●●●●●です。
type=”password”と指定されていたんですね！
<form>
パスワード: <input type="password">
</form>
入力してみると●で文字が隠れています。
カレンダーが便利なdate
type=”date”と指定すると日付選択フォームになって、クリックするとカレンダーから選べるようになります。
よく乗り物のチケットやホテルを予約するときに使いますよね。
<form>
日付: <input type="date">
</form>
横のアイコンをクリックするとカレンダーが表示されて日付を選ぶことができます
ファイルがアップロードできるfile
type=”file”を指定すると’ファイルを選択’のボタンが登場しました。
実際にクリックすると、選択画面が開きますね。
これもおなじみではないでしょうか？
<form>
<input type="file">
</form>
ボタンを押すと選択画面でファイルを選ぶことができます。
複数項目から1つ選択ができるradio
複数の選択肢から1つだけチェックできる機能をもつのがradioです。
昔のラジオの丸いボタンの形をしているので、ラジオボタンと呼ばれています。
項目をグループ化するには、同じname属性値を指定します。 (name属性については次の章で詳しく説明しています。)
<form>
性別の選択<br>
<input type="radio" name="gender">男性
<input type="radio" name="gender">女性
</form>
性別を選択できるラジオボタンが表示されました。
radioでは複数選択はできません。
複数項目を選択できるcheckbox
選択肢から1つだけチェックできるradioに対して、複数項目を選択できるのがcheckboxです。
多くのブラウザでは四角い選択ボックスが表示されます。
こちらも項目をグループ化するには、同じname属性値を指定します。
<form>
好きな食べ物を選んでください<br>
<input type="checkbox" name="food">ラーメン
<input type="checkbox" name="food">カレー
<input type="checkbox" name="food">パスタ
</form>
checkboxで表示される選択ボックスは複数選択することが可能です。
それぞれのスペシャリスト number, email, url
それでは３つ一気に紹介していきます。
名前のとおり、numberは数字、emailはメールアドレス、urlはアドレスに特化しています。
具体的にどのように特化しているのかというと、例えばemailに@（アットマーク）を入れなかったり、urlで日本語などのアルファベットではない文字を入れてエンターキーを押すと、注意のメッセージが出ると思います。
それぞれどんな動作をするか、入力の文字を変えて試してみてください。
number型
<form>
数字: <input type="number">
</form>
右のボタンや直接数字を入力できます。
数字以外だとリセットされます。
email型
<form>
e-mail: <input type="email">
</form>
@がなかったり、 アルファベット以外だとエラーになっている場所を教えてくれます。
url型
<form>
URL: <input type="url">
</form>
こちらもきちんとURLの形式でないとメッセージが出てデータが送信されません
このように適切にtype属性を指定しておくと、まちがったデータが送信されないように自動的にブロックして注意をしてくれます。
この機能をバリデーションといいます。
プログラミングではこのバリデーションがとても大切で、いろいろなエラーの原因となるパターンを予測して自分でバリデーション機能を加えることがよくあります。
HTMLのフォームでは基本的なバリデーションは自動で行ってくれるので、とても便利ですね！
ここでは紹介しきれなかった主なtype属性を以下の表にまとめています。
どのように表示されるのか、実際にtypeを変えてみていろいろ試してみてください。
| 種類 | typeの値 | 説明 |
| 文字列 | search | 検索文字列 |
| 数値 | range | スライダーが表示される |
| 特殊 | color | 色が選択できる |
| hidden | 非表示の値（プログラミングで使用） |
inputタグのそのほかの属性
inputタグはtype属性値によって、さまざまな種類のフォームに変化するのを見てきました。
type属性以外にもいろいろな属性がありますので、見ていきましょう。
必須のname属性、後で指定ができるid属性
コントロールを設置する際には必ずname属性を指定する必要があります。
nameはそのフォームがどんなデータなのかを任意で半角英数字で名前をつけます。
例えば名前の送信する項目ではname=”name”
住所を送信する項目はname=”address”
のように指定すると受け取った先のファイルやページで、何を示しているか分かりやすくなります。
ここでつけた名前が、入力したデータの内容やvalue属性値（後述）とセットで、action属性で指定した送信先に飛んでいくイメージです。
データの封筒のようなものですね。
受け取った側はこのname属性の名前を見て、「これは名前のデータだな、これはメールアドレスだな」とデータの判別をするのです。
ここで注意なのですが、name属性は必ず他では使っていない名前をつけてあげます。
（このような“唯一”という意味でプログラミングの世界では”一意“や”ユニーク“と呼ばれます）
たしかに、同じ名前で中身が違う封筒があったら混乱してしまいますよね？
*ラジオボタンやチェックボックスはそれぞれの項目が１つのグループになっているので、同じname属性を指定します。
一方、必須ではないのですが、後々CSSやJavaScriptでその要素を指定する必要がある場面ではid属性も記述していきます。
こちらも半角英数字で、他のid属性で使っていないユニークなネーミングをする必要があります。
id属性とname属性は同じ名前にする、とルールを決めると名前を考えずに済むので現場でもよく使われています。
ただradioやcheckboxは1つのグループで同じnameがあり、idは項目ごとに付けなければいけないので先のラジオボタンを例にすると
<input radio name=”gender” id=”man”>
<input radio name=”gender” id=”woman”>
のように分けて考えます。
このid属性は、特にCSSでデザインを指定するときによく出ますので、CSSのレッスンで詳しく触れていく予定です。
入力例を表示するplaceholder属性
placeholder属性はユーザーの人に「こんな風に入力してくださいね」、とわかりやすく例を表示してくれます。
<form>
なまえ: <input type="text" placeholder="例: やまだたろう">
</form>
デフォルトで入力例が表示されています。
文字を入れると自然と無くなります。
入力値を入れておくvalue属性
表示はplaceholder属性と似ているのですが、あらかじめvalue属性で指定してフォームに実際のデータを入れておくことができます。
placeholderはあくまで’例’として表示されるだけなのに対して、valueで指定した値は何も変更しなければ、そのままデータとして送信されます。
また先ほど見たようにradioボタンやチェックボックスのように、ユーザが直接入力しない項目では、こちら側でvalue属性で項目ごとに値を設定する必要があります。
<form>
なまえ: <input type="text" value="やまだたろう">
</form>
もし変更しなかった場合’やまだたろう’が、名前のデータとして送信されます。
フォームの長さを指定するsize属性
size=”半角文字数”で指定すると、その文字数が表示できる分だけフォームの横の長さが変化します。
デフォルトでは（何も指定しなければ）半角文字数２０文字になっています。
注意なのが、あくまでも表示上の長さで文字数の制限ではないこと。
加えて半角文字数とは言ったものの、厳密には文字数がブラウザによって異なるため、目安くらいに考えたほうがいいということです。
住所など、入力する内容が長くなりそうであれば、こちらで長めに指定すると便利ですね。
<form>
住所: <input type="text" size="40">
</form>
これまで見てきたフォームのちょうど倍の長さになっています。
入力文字数を制限するmaxlengthとminlength属性
先ほどのsize属性は見た目のフォームの長さだけが指定できるのでした。
この２つの属性は、実際の入力文字の最大文字数と最小文字数を指定することができます。
- maxlength = max（最大の）length（長さ）
- minlength = minimum（最小の）length（長さ）
の略になります。
maxlength=”最大文字数”minlength=”最小文字数”のように記述します。
それぞれ片方だけ指定してもいいですし、「何文字以上 何文字以下」のように２つの属性を組み合わせて使うことも可能です。（組み合わせるときはminlengthを先に書きます）
<form>
テキスト: <input type="text" minlength="5" maxlength="10">
</form>
５文字以上、１０文字以下の条件で指定しました。
１０文字以上は入力できなくなり、５文字以下だとメッセージが現れます。
読み取り専用データを指定するreadonly属性
変更されたくないデータを指定するには、readonly属性を記述します。
属性値は必要ありません。
value属性値に送りたいデータの内容を指定します。
<form>
変更不可: <input type="text" value="読み取りデータ" readonly>
</form>
読み取りデータになったのでクリックしても変更することができなくなりました。
inputを完全に無効化するdisabled属性
readonlyに似た機能としてdisabled属性があります。
どちらもフォームでデータを変更できなくなるのですが、readonlyとの違いはdisableのデータは送信されず、無効となるということです。
なぜこんな機能があるのかというと、もし特定のフォームに入力があって、このフォームは必要なくなったなどの場合、プログラムで無効化するようなときに使用されます。
こちらも属性値は必要なく、value属性値に表示したい内容を指定します。
<form>
: <input type="text" value="無効化データ" disabled>
</form>
disabledで無効化されたデータは送信されません。
必須項目を指定するrequired属性
どうしても省略できない、必須で送信したいフォームにはrequired属性を指定します。
書き方はreadonly, disabledと同じように、属性値が必要ありません。
<form>
必須項目: <input type="text" required>
</form>
requiredを指定したので、空のままエンターキーを押すと注意メッセージが現れます。
button要素はデータを制御するスイッチ
このレッスンでは本当にたくさんのフォームの種類を見てきました。
これまではデータを入力したり選択したりするだけで、まだ実際にデータは送信されていませんでした。
すべてのデータの送信のきっかけを作る機能をもつのが、このbutton要素になります。
名前の通り、ボタンをクリックすることで送信が行われます。
送信の他にも、機能を持つボタンのタイプがありますので、こちらで見ていきましょう。
データを送信する基本のsubmit
<button type=”submit”>を指定したボタンをクリックすると、入力したデータがformタグのaction属性で指定した先に送信されます。
以下の例ではaction属性を自身のページを表す”#”で指定して、名前を必須項目としたフォームとボタンを作っていきます。
<form action="#">
名前: <input type="text" required>
<button type="submit">送信する</button>
</form>
文字列を入力後、ボタンをクリックするとデータが送信されます。
入力値を初期値に戻すreset
<button type=”reset”>を指定すると、いったん入力した値をリセットしてくれるボタンが表示されます。
placeholderやvalue属性で初期値を指定していた場合には、その値に。
何も指定していなければ、空の値に戻されます。
<form>
<input type="text" placeholder="例: やまだたろう" required>
<button type="reset">リセット</reset>
</form>
なんらかの文字列を入力後、リセットボタンを押すとデータが初期値に戻ります。
まとめ
- 入力フォームはサーバとクライアント（ユーザ）のデータのやり取りの橋渡し役
- フォームタグの中にコントロールと呼ばれるそれぞれの項目となる部品を入れて組み立てる
- action属性はデータの送信先を指定する
- method属性はURLから情報が見えるget, 見えないpostのどちらかを指定する
- inputのtype属性によってさまざまな形の項目に変化し、それぞれに特化した機能を持っている
- 各コントロールにはname属性が必要となり、送信先で指定した名前を参照してデータが取り出される
- 送信ボタンをクリックすることでデータやり取りのきっかけとなる
- ユーザの入力しやすいフォームを意識して、機能を組み立てることが大切！
次回は入力フォームについて応用的な新しいタグを学びつつ、フォームの作り方を実践していきます。