PHP工房トップ

HOME > フォーム（input、select、textarea）の基礎知識

フォーム（input、select、textarea）の基礎知識

2015/10/27

inputタグ、textareaタグ、selectタグ

フォームの基本について解説しています。

フォームとは・・・ここで言うフォームとは、お問い合わせページなどで入力したり選択したりを行う（または行わせる）ページでそのページ内の<form>タグから</form>タグまでのことを指します。
※実際には<form>タグから</form>タグまでが「フォーム」としての機能を持つためです。

またフォームは主にプログラム側にデータを渡すために使用されます。
フォーム側（入力側）はHTMLファイルでOKですが、渡す側（送信先）はPHPなどのプログラムになるわけです。

要するに必ずPHPなどのプログラムとセットになるということですね。
HTML単体では残念ながらフォームデータを取り扱うことができないのです。
これがフォーム関連のタグが難しいと感じる理由の1つかもしれません。

ここではフォームで一般的でかつ実際に使われるもののみ掲載していますので、
フォーム関連についてすべての説明を行なっているわけではありませんのでご了承下さい。

ただ、実際にはこのページの知識だけでフォームについては事足ります。
要するにここに掲載しているものが実務で実際に使うものであって、逆に実務で使うもの以外は覚える必要がありませんよね。

以下をご覧いただくにあたり、実際にフリー版のメールフォームをダウンロードいただき、contact.htmlの記述を参考いただくとより分かりやすいと思います。

formタグについて

フォームを使用する場合には必須のタグです。フォーム全体をこのタグで囲みます。

よく「で、どこに記述すればいいの？」と言われますが、結論を言ってしまうとどこでもいいです。
あくまでも送信ボタンを含み「フォーム全体」をなんとなく囲んでいればOKなので、極端な話<form>タグを<body>の直後、</form>タグを</body>タグの直前でもOKです。

<form>～</form>の間にtableタグだろうが、見出しタグだろうが他のタグが入り込んでいようが影響ありません。あくまでもinputタグなど、フォーム関連のタグのみを抽出してくれますので。逆に問題があればすぐに気づくので間違いようが無いと言ってもいいかもしれません。
※formタグ自体を入れ子にすることはできません。

<form>タグは実際には必須の属性が2つあります。

基本的な記述例：<form method="post" action="mail.php">

action属性

送信先のファイルのパスを指定します。送信ボタンを押した際にここで指定したファイルにデータの送信と同時に遷移（移動）を行います。

method属性

どういった方法でデータを送信するかを指定します。詳細はここでは必要ないので割愛しますが基本的には「post」とします。特にメールフォームでは必ず「post」として下さい。

その他ファイル添付機能（input type="file"）を使用する場合には「 enctype="multipart/form-data"」が必須になります。（ただし、これだけではファイル添付は不可能ですので注意下さい　※下記「type="file"」部参照）

使えるタグについて

フォーム内で使えるタグは決まっています。初めてフォーム関連のタグを目にすると、なんでこんなに種類があるんだろうとちょっと戸惑われることもあるかもしれません。

ただ実際には至ってシンプルでまったく難しいものではありません。
実際に使われるのはinput、select、textareaの3つだけです。（これらを絶対に使えってことではありません）

よりシンプルに考え、極論を言ってしまうとすべてのフォーム項目を1行の入力フィールドである、
<input type="text" name="○○" size="">
のみで対応してもOKなんですね。以下のようなものです。

ではなぜその他のフォーム関連のタグがあるのか。それは必要に迫られたからですね。
想像してみてください。たとえば、フォームで「性別」を知りたい場合にフォーム内で上記のような入力フィールドだったらどうなるでしょう。
受け取る側は当然「男」か「女」かを知りたいわけですが、自由入力にしてしまうと、中には理解できないようなことを入力される可能性があります。（例「男でも女でもない」）こうなると困るわけですね。

そのため事前に用意した複数の項目から選択させる「ラジオボタン」があるわけです。
※この場合、「男」か「女」の選択肢しかありませんので解決しますね。
その他のフォーム関連のタグもすべて必要に迫られて存在しているわけです。

inputタグ

実際には以下のように記述します。終了タグはありません。
<input type="○○" name="○○" value="" size="○○">

type属性（type="○○"）　※必須

これはその名のとおりタイプ（種類）を指定するものでinputタグのみに存在し、必須の属性です。
主に使われるものは以下の種類があります。

type="text" 1行の入力フィールド。最も使われる頻度が高いと思います。
例　名前、電話番号、メールアドレス、住所などなど。
表示：
type="radio" ラジオボタン。複数の選択肢から1つのみを選択させたい場合などに使用します。例　性別、お問い合わせ内容、参加、不参加など。
表示：
type="checkbox" チェックボックス。複数の選択肢から複数選択可能なものに使用します。
例　当サイトを知ったきっかけ、該当するものすべてにチェック下さいなど。
表示：
type="submit" 送信ボタン。フォーム内容をプログラム側に送信するためのボタンです。
基本的には必ず必要です。ボタンを押すと<form>タグから</form>タグ内にある各フォーム関連タグをすべてまとめて送信します。
表示：
※ボタンのためname属性は不要です。
type="reset" リセットボタン。フォームの入力内容などをリセットする場合用のボタンです。
個人的にはこれは無くていいと思っています。これは主に送信ボタンの隣に置いてありますが、想像して下さい。すべて入力後にいよいよ送信ボタンを押そうと思ったら間違ってリセットボタンを押してしまった。。ユーザー側は「ウォーーーっ！！」となりすよね。。嫌になって出てってしまうかもしれません。
果たしてあえてリセットする機会ってあるんだろうかとこの存在意義自体に疑問を感じてます。
表示：
※ボタンのためname属性は不要です。
type="file" ファイルを添付する場合などに使用されます。ただし、単純にこれを指定しただけではファイルを添付できません。プログラム側でかなり特殊な処理が必要になりますのでご注意ください。（フリー版のメールフォームプログラムも非対応です）
表示：
これはブラウザによっても見た目が異なります。
type="hidden" 非表示要素。意味合い的には上記のものとなんら変わりありませんが、ブラウザ上に表示されないという性質を持っています。隠し要素とも呼ばれます。
ただ、当サイトのお問い合わせフォームでは使用する機会はほぼ無いでしょう。これは主にPHPでシステムを制作する際などに使用することが多いです。
※CMSであれば固有のIDやトークンを渡すために使ったりします。
type="button" ボタン用。これは主に戻るボタンやリンクボタンなどとして使用されますので、お問い合わせフォームではほぼ使用されません。あるってことだけ覚えておけばOKでしょう。
表示：
※ボタンのためname属性は不要です。

その他type属性についてはHTML5でかなり追加されましたがブラウザが対応していない可能性もあるため使用する場合には事前の情報収集や動作チェックが必須です。たとえば、数字入力専用の入力フィールドやメールアドレス入力用の入力フィールドなどがあります。まぁそれらをあえて使わずとも良い気がしますが。
詳しく知りたい方は以下のページなどが参考になります。
http://www.htmq.com/html5/input.shtml

name属性　※必須

これが非常に大事な要素です。プログラム側に送る際の目印となるものになります。
たとえば
<input type="text" name="お名前" value="" size="30">

と記述すると実際にブラウザ上では以下の様な表示になります。

この場合、name属性の値と入力されたデータ（またはvalue属性の値）がセットでプログラム側に送られます。
要するにたとえば、「テスト太郎」と入力したら「お名前」と「テスト太郎」がセットになるということです。
逆にこのname属性が無いと「どの」入力データであるのかがプログラム側で判断できませんので必須になります。

ちなみにPHP側では以下のような記述でデータを取得します。
$_POST['お名前']
これを変数（グローバル変数）と呼びますが、これを出力すると「テスト太郎」と表示されます。
これからも分かる通り、name属性は非常に重要、というか無くてはならないものだとお分かりになるでしょう。

ただし、送信ボタン、リセットボタンなどには不要です。逆に付けてしまうとそれも送信されてしまうので困りますので付けないことを強くオススメします。

※当サイトのメールフォームプログラムではチェックボックスのみイレギュラーな記述で、contact.htmlの記述を見ていただくと分かりますが、 name="○○[]"　 のように後ろに[]が付いているのがわかると思います。 チェックボックスの場合のみname属性の値の後ろに[]を記述するルールが有りますのでご注意下さい。

value属性　（入力フィールド以外は必須）

実際にはname属性の値とセットでプログラム側に送られます。え？ちょっとややこしいかもしれませんが、
input type="text"の場合、ユーザーによって入力されたデータは実際にはvalue属性の値（value="○○"の○○部分）に反映されているわけです。

そのためinput type="text"の場合には、value属性の値は空（value=""）、またはvalue属性自体を省略してもOKですが、その他のラジオボタン、チェックボックス、プルダウンでは必須になります。（配布版のcontact.htmlを参考下さい）

要するにユーザーがキーボードで文字などを入力する項目は入力されたものがvalue属性の値として扱われますので空、または省略OKですが、それ以外の項目ではその性質上必ず必要になるということですね。

このあたりは実際にフォームを複数回ほど送信してみれば自然に身につきます。
またフリー版のメールフォームのcontact.htmlを参考下さい。

ちなみに使用頻度は低いですが、
<input type="text" name="お名前" value="テスト太郎" size="30">
のように予めvalue属性の値に文字列をセットしておくと、以下のようになります。

ただ、これをあえて使う機会はあまりないでしょう。多くの場合単に入力の邪魔です（笑
よく「カタカナで入力下さい」のように薄い文字を表示させて、カーソルを合わせると文字が消えるというようなものがありますが、あれはこれではありませんので注意下さい。たまに誤解されて使っている方がおります。
これはplaceholder属性というものを使います。 下記「placeholder属性」を参照下さい。

size属性

type="text" のみに使用され、これは単純に入力欄のサイズ（横幅）です。これは必須ではありませんが、あまり狭いと入力しずらいですよね。

指定しない場合、ブラウザのデフォルト値が反映されますが、ブラウザにより異なったりもするので指定していたほうが無難でしょう。もちろん幅はCSSでも指定可能です。

その他属性「placeholder」

よく入力欄で「カタカナで入力下さい」のように薄い文字を表示させて、カーソルを合わせると文字が消えるというようなものがありますが、placeholder属性というものを使います。

placeholder="カタカナで入力下さい"
のように指定することで実現します。
（ただしこれはブラウザが対応している場合のみです。まぁ今現在ほとんどのブラウザが対応していると考えてOKだと思います。IEもIE9以上であれば対応していますので）

textarea

<textarea name="お問い合わせ内容" cols="50" rows="5"></textarea>
表示側：

これはtype="text" と同じようにユーザーがキーボードで文字などを入力できるフィールドです。
違いはtype="text"が1行のみの入力欄であるのに対して単純に複数行の入力欄になることだけです。
※inputタグとは違い、終了タグが必要なことに注意しましょう。
※当サイトのフォームプログラムでは改行も反映された状態でメール送信されます。

name属性については、上記に書いたとおりです。
textareaはちょっと特殊でvalue属性はありません。
<textarea name="お問い合わせ内容" cols="50" rows="5">
と
</textarea>
の間の部分がvalue属性扱いとなります。
実際には入力されたものがvalue属性の値になります。

独自の属性としてcolsとrowsがあります。
cols　＝　幅 （数値は自由ですが一般的なサイトであれば50～80程度が多いと思います）
rows ＝　高さ　（行数になります。5＝5行ということですね。ただしブラウザによって若干異なることもあり）
です。これの解釈がブラウザによって結構違っていたりします。厄介なのが幅を多く指定し過ぎるとページからはみ出てまで表示することですね。一度は見たことがあるかもしれません。

特にIEとそれ以外では結構見た目が異なりますのでチェックしたほうがいいでしょう。
そのためCSSで指定したほうが良いと言われてもいます。

select

いわゆるプルダウンメニューですね。以下のような記述になります。

<select name="ご用件">
<option value="">選択してください</option>
<option value="ご質問・お問い合わせ">ご質問・お問い合わせ</option>
<option value="リンクについて">リンクについて</option>
</select>
表示側：

name属性については上記の「name属性」を参照下さい。まったく同じです。
value属性に値が入っていることに注目下さい。このような選択する項目の場合、value属性が必須です。

実はこのoptionタグについてはvalue属性は省略できます。省略している人もいるようです。
※省略した場合、<option>○○</option>　の○○部分がvalue属性の値として解釈されます。
ただし、これは正規の方法ではありませんので推奨しません。
普通に考えて省略することのメリットはそんなに無いですよね。記述しておきましょう。

基本的には複数の項目から1つを選択させるという点でinput type="radio"（ラジオボタン）と同じです。
ただ、スペース的に小さいため、大量の選択項目がある場合などに主に使われます。
どっちを使おうがあくまでも使う側の自由です。ケースバイケースだったり好みだったりですね。ルールなどありません（笑

 

以上。
基本的にはたったこれだけです。簡単ですよね？

その他checked属性、 selected属性について

ラジオボタン、チェックボックス、プルダウンメニュー（selectタグ）の場合で、予めチェック、または選択済みにしておきたい場合がたまにあります。

ラジオボタン：<input type="radio" name="○○" value="" size="○○" checked="checked">
チェックボックス：<input type="checkbox" name="○○" value="" size="○○" checked="checked">
※ checked="checked"　はcheckedだけでもOKではありますが推奨されません。

プルダウンの場合、
<select name="ご用件">
<option value="" selected="selected">選択してください</option>
<option value="ご質問・お問い合わせ">ご質問・お問い合わせ</option>
<option value="リンクについて">リンクについて</option>
</select>
※ selected="selected"　はselectedだけでもOKではありますが推奨されません。
※プルダウンの場合でselected="selected"が未設定の場合、一番上のものが選択された状態になります。

以上。これだけです。

PHPメールフォーム（無料版）

PHPメールフォーム（有料版）

新着情報・更新履歴CMS（無料版）

投票・アンケートシステム（無料版）

テロップCMS（無料版）

写真ギャラリーCMS（無料版）

営業日カレンダーCMS（無料版）

営業日カレンダーCMS（有料版）

カレンダー予約フォーム（無料版）

カレンダー予約フォーム（有料版）

リンク集ページCMS（無料版）

アクセスカウンター（無料版）

ダウンロードカウンター（無料版）

その他

メールフォームの各種カスタマイズならお任せ下さい
業務効率化が可能なPHPオリジナルCMS制作します

役立つかも？なもの

豆知識や役立ち事など

PHPについて

各種情報