HTML 【フォーム】1 ~ フォームの概要とform要素の属性一覧

Design of the website form for email subscribe.

Webサイトからデータを送信するためには、何を、どこに、どうやって送るかを指定する必要があります。フォームはこのための手段を提供します。
フォームの要素や属性は、HTML5から新しいものがたくさん加わって、以前よりシンプルに色々なことができるようになりました。
今回から、データ送信のために使用するHTMLのフォームについて紹介していきたいと思います。
今回は、フォームの概要についてまとめます。

目次

1.フォームとは
2.form要素の属性一覧

1.フォームとは

フォーム(form)とは、英語で型式、書式、帳票類などの意味です。
Webの場合は、ユーザがブラウザで情報を送る仕組みをフォームといいます。
記入して送信するアンケートのフォームやサイトの読者登録など、お馴染みのものです。

HTMLの他の要素と違うのは、form要素だけではフォームとして動作しないところです。
form要素以外に、フォームのデータを処理するためのプログラムが必要です。

フォームが送信したデータは、wwwサーバを経由してプログラムに渡されます。
サーバとプログラムの間のやり取りの手順を、CGI (Common Gateway Interface) と呼びます。
プログラムがさらにデータベースなどの外部プログラムを実行することが考えられたため、橋渡し役(Gateway)とのやり取りのルール(Interface)という名前が付いているのです。
この手順によって実行されるプログラムをCGIプログラム、あるいは単にCGIと呼んでいます。
CGIプログラムは、受け取ったデータを自分だけで処理することもできますし、前述のようにさらにデータベースなどの別のプログラムに渡すこともできます。
処理結果は、サーバを経由してHTMLデータなどの形で呼び出したブラウザに返されます。
データの流れは次のようになります。

ブラウザ(フォーム)
 ↓ ↑
wwwサーバ
 ↓ ↑
CGIプログラム
 ↓ ↑
データベースなど

CGIプログラムは、PerlやCなどのプログラム言語を使って作成します(Perlなどはプログラムをスクリプトと呼ぶので、それに合わせてCGIスクリプトと呼ぶこともあります)。
アクセスカウンタやフォーム内容のメール送信といった一般的なものは、プロバイダで提供されることもあります。また、自作のCGIプログラムをアップロードして利用できるプロバイダもあります。

▲目次へ戻る

2.form要素の属性一覧

属性 それを使用するフォームの部品
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>

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です