column

ITコラム

Design of the website form for email subscribe

プログラミングノウハウ

2017.01.31

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

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%で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

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>

▲目次へ戻る

無料説明会

SHARE

最新記事

無料説明会に参加してみる

INTERNOUS,inc. All rights reserved.

無料オンライン説明会へ