Webサイトからデータを送信するためには、何を、どこに、どうやって送るかを指定する必要があります。フォームはこのための手段を提供します。
フォームの要素や属性は、HTML5から新しいものがたくさん加わって、以前よりシンプルに色々なことができるようになりました。
今回から、データ送信のために使用するHTMLのフォームについて紹介していきたいと思います。
今回は、フォームの概要についてまとめます。
HTML 【フォーム】1 ~ フォームの概要とform要素の属性一覧( 本ページ )
HTML 【フォーム】2 ~ form要素の使い方
HTML 【フォーム】3 ~ form要素で使う主な属性の使い方
HTML 【フォーム】4 ~ fieldset要素とlegend要素
HTML 【フォーム】5 ~ input要素(1)フォーム部品一覧
HTML 【フォーム】5 ~ input要素(2)テキスト入力部品
HTML 【フォーム】5 ~ input要素(3)ラジオボタンとチェックボックス
HTML 【フォーム】5 ~ input要素(4)日時の入力部品
HTML 【フォーム】5 ~ input要素(5)数値の入力部品
HTML 【フォーム】5 ~ input要素(6)レンジ(range)の入力部品
HTML 【フォーム】5 ~ input要素(7)色(color)の入力部品
HTML 【フォーム】5 ~ input要素(8)ファイル送信のための部品
HTML 【フォーム】5 ~ input要素(9)隠し情報(hidden)
HTML 【フォーム】5 ~ input要素(10)ボタン(submit、reset、button)
HTML 【フォーム】5 ~ input要素(11)画像ボタン(image)
HTML 【フォーム】6 ~ button要素で作るボタン
HTML 【フォーム】7 ~ ボタンの作り方比較とJavaScriptでアラート表示
HTML 【フォーム】8 ~ セレクトリスト
HTML 【フォーム】9 ~ 入力候補(datalist)
HTML 【フォーム】10 ~ テキストエリア(textarea)
HTML 【フォーム】11 ~ ラベル(label)
HTML 【フォーム】12 ~ 出力欄(output)
HTML 【フォーム】13 ~ 数量や割合のゲージ(meter)
HTML 【フォーム】14 ~ 進捗状況を示すプログレスバー(progress)
HTML 【フォーム】15 ~ キーを発行して暗号化(keygen)
HTML 【フォーム】16 ~ CSSでフォームを整える
なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3%で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。
フォーム(form)とは、英語で型式、書式、帳票類などの意味です。
Webの場合は、ユーザがブラウザで情報を送る仕組みをフォームといいます。
記入して送信するアンケートのフォームやサイトの読者登録など、お馴染みのものです。
HTMLの他の要素と違うのは、form要素だけではフォームとして動作しないところです。
form要素以外に、フォームのデータを処理するためのプログラムが必要です。
フォームが送信したデータは、wwwサーバを経由してプログラムに渡されます。
サーバとプログラムの間のやり取りの手順を、CGI (Common Gateway Interface) と呼びます。
プログラムがさらにデータベースなどの外部プログラムを実行することが考えられたため、橋渡し役(Gateway)とのやり取りのルール(Interface)という名前が付いているのです。
この手順によって実行されるプログラムをCGIプログラム、あるいは単にCGIと呼んでいます。
CGIプログラムは、受け取ったデータを自分だけで処理することもできますし、前述のようにさらにデータベースなどの別のプログラムに渡すこともできます。
処理結果は、サーバを経由してHTMLデータなどの形で呼び出したブラウザに返されます。
データの流れは次のようになります。
CGIプログラムは、PerlやCなどのプログラム言語を使って作成します(Perlなどはプログラムをスクリプトと呼ぶので、それに合わせてCGIスクリプトと呼ぶこともあります)。
アクセスカウンタやフォーム内容のメール送信といった一般的なものは、プロバイダで提供されることもあります。また、自作のCGIプログラムをアップロードして利用できるプロバイダもあります。
属性 | それを使用するフォームの部品 | |
---|---|---|
accept | ファイルを受け取るとき、サーバが受付可能なMIMEタイプを指定 | <input type=file> |
accept-charset | 送信時に使う文字コード | <form> |
action | フォームの送信先のURL | <form> |
alt | <input type=image>での画像の代替テキスト | <input type=image> |
autocomplete | オートコンプリート(入力予測機能)のON, OFF | <form><input> <form>が優先 = <form>でOFFなら<input>でONにしても無効 |
autofocus | HTML文書のロード後すぐに、自動的にフォーカス(アクティブになる) | <input> <textarea> <button> <select> <keygen> |
challenge | 公開鍵と一緒に送るチャレンジ文字列 | <keygen> |
checked | ラジオボタン、チェックボックスを「選択された状態」にする | <input> (radio, checkbox のみ) |
cols | 1行の文字数(ボックス幅) | <textarea> |
dirname | 文字の書式方向の送信に使う名前 | <input><textarea> |
disabled | 使用不可にする | <input><textarea><button><select> <option> <optgroup> <fieldset> <keygen> |
enctype | 送信時のデータ形式をMIMEタイプで指定 | <form> |
for | フォーム部品の id名を呼び出して関連づける | <label> <output> |
form | フォーム部品を<form>の外に出し <form>要素のID名で関連づける | <input><textarea><button> <select> <fieldset> <label> <output> <keygen> |
formaction | <form>のaction属性の指定を上書き | <input type=submit> <input type=image> <button type=submit> |
formenctype | <form>のenctype属性の指定を上書き | <input type=submit> <input type=image> <button type=submit> |
formmethod | <form>のmethod属性の指定を上書き | <input type=submit> <input type=image> <button type=submit> |
formnovalidate | <form>のnovalidate属性の指定を上書き | <input type=submit> <input type=image> <button type=submit> |
formtarget | <form>のtarget属性の指定を上書き | <input type=submit> <input type=image> <button type=submit> |
high | 高い値の境界点 | <meter> |
height | <input type=image>での画像の高さ | <input type=image> |
keytype | 生成される鍵の種類(RSA) | <keygen> |
label | 選択肢のグループ名、または選択肢として表示するテキスト | <option> <optgroup> <datalist>と併用する<option> |
list | <datalist>要素のID名と関連づけ、リストを表示する | <input> (type=hidden, password, checkbox, radio とプッシュボタン類は使用不可) |
low | 低い値の境界点 | <meter> |
max | 数値の最大値 | <input type=datetime, datetime-local, date, month, week, time> <input type=number> <input type=range> <meter> <progress> |
maxlength | 最大文字数(それ以上は入力不可になる) | <input>(type=text, search, tel, url, email, password の場合のみ) <textarea> |
method | フォーム内容の送信方法を、get または post で指定 | <form> |
min | 数値の最小値 | <input type=datetime, datetime-local, date, month, week, time> <input type=number> <input type=range> <meter> |
multiple | 複数入力できるようにする | <input type=email> <input type=file> <select> |
name | フォーム部品に固有の名前を付ける | <input><form> <textarea><button> <select><fieldset><output> <keygen> |
novalidate | バリデーション(入力内容の妥当性のチェック)をオフにする | <form> |
optimum | 最適な値 | <meter> |
pattern | 正規表現を指定(指定以外の書き方ではアラートが出る) | <input> (type=text, search, tel, url, email, password の場合のみ) |
placeholder | 入力見本 | <input> (type=text, search, tel, url, email, password の場合のみ) <textarea> |
readonly | 読み取り専用(リードオンリー)にする | <input> (type=checkbox, radio, range, color, file, submit, reset, button, image, hidden では無効) <textarea> |
required | 入力必須にする(入力せずに送信ボタンを押すとアラートが出る) | <input> (type=range, color, submit, reset, button, image, hidden では使用不可) <textarea><select> |
rows | 行数(ボックスの高さ) | <textarea> |
selected | セレクトメニューで、選択肢の1つを最初から選択された状態で表示する | <option> |
size | 1行のテキストフィールド、またはセレクトメニューの幅を文字数で指定 | <input> (type=text, search, tel, url, email, password の場合のみ) <select> |
src | <input type=image>での画像のURL | <input type=image> |
step | 数値の入力の間隔(ステップ) | <input type=datetime, datetime-local, date, month, week, time> <input type=number> <input type=range> |
target | 処理結果を表示するウィンドウ(またはフレーム) | <form> |
type | フォーム部品のタイプ | <input> <button> |
value | 初期値を指定 | <input><button><option> <meter> <progress> |
width | <input type=image>での画像の幅 | <input type=image> |
wrap | 送信時に改行するかどうかを指定 | <textarea> |
INTERNOUS,inc. All rights reserved.