ウェブDeBLOG｜トライデントコンピュータ専門学校 Webデザイン学科

2014年10月28日にHTML5仕様がW3C勧告（W3C Recommendation）となりました。HTML5の話が聞かれ始めた当初には、勧告されたら全世界大騒ぎになるのかと思っていましたが、意外と普段通りでしたね。

これでHTML5は一段落ですが、引き続きHTML 5.1が2016年の勧告に向けて策定中であったりしますので、まだまだ進化は進みそうです。

さて本題。前回で最後と書きましたが、さらにform関連の要素や属性に関して具体的に使う場合、どのようなHTMLを書くと何が送られるのかなど、もう少しおさらいしたいと思います。

• form要素、label要素、fieldset要素、legend要素のおさらい（form関連要素編①）
• input要素のおさらい（form関連要素編②）
• textarea要素、option要素、select要素、button要素 他のおさらい（form関連要素編③）

基本はform要素で囲まれた中に書いていきます。form属性を利用するとform要素の外においても関連付けさせることができます。action属性で送信先のURLを指定し、input要素のtype属性がsubmit, imageもしくはbutton要素のtype属性submitで送信することができます。JavaScriptを利用すると他の要素やinput type="button"でも送信できますが、今回は説明しません。

……


送信する

form要素、label要素、fieldset要素、legend要素、input要素

受信するPHPファイルに下記のようなプログラムを記述します。type="file"は送信する画像から受け取るデータが複数あり表示させてあります。

textarea要素、option要素、select要素、output要素、keygen要素、button要素

これで、具体的な利用がイメージできるのではないでしょうか。

本州を縦断した台風18号の影響で、午前中の授業が休講になってしまいましたが、皆さんの地域では大丈夫でしたでしょうか。

さて、table要素に続き、あまり得意でない要素にform要素などがあります。簡単な投稿システムやCMSのカスタマイズ、お問い合わせフォームなど、使う機会も多々あるのですが、一概にform要素のみではなく、label要素やinput要素、各要素の属性などが複雑に組み合わさったりしており、面倒でついついコピペで済ませていたりします。

HTML5では、かなり追加や変更のあった要素（属性）なので、ここでおさらいなどしておきたいと思います。

form要素

formは、テキストフィールド、ボタン、チェックボックス、レンジコントロール、またはカラーピッカーなど、フォームコントロールを持つウェブページのコンポーネントである。
さらなる処理（たとえば、検索または計算結果を返す）に対してサーバーに送信できるデータを提供して、ユーザーはそのようなフォームで情報を交換できる。
スクリプトがユーザーエクスペリエンスを補強するか、またはサーバーにデータを送信する以外の意義に対してフォームを使用できるようなAPIが利用可能であるが、多くの場合クライアント側のスクリプトは必要ない。
すべてのフォームは、内部にコントロールを配置されたform要素で始まる。ほとんどのコントロールは、デフォルトで1行のテキストフィールドを提供するinput要素によって表される。
コントロールをラベル付けするために、label要素が使用される。ラベルテキストおよびコントロール自身は、label要素の中に入る。
フォームの各部分は段落とみなされ、通常はp要素を使用して他の部分から分離される。

Customer name: 

フォームに入力されたデータは、送信ボタンを押すことでWebサーバーへ送信されます。 その際、属性と値でWebサーバーへ送信されるデータの処理や数値などが設定されます。
例えば、送信先URLはaction属性で、データの送信方法はmethod属性で、送信するデータの形式はenctype属性でという具合です。

■属性値

accept-charset属性

送信するデータの文字エンコーディングを指定（UTF-8・Shift_JIS・EUC-JPなど）

action属性

送信先URLを指定

autocomplete属性（初期値はon）

オートコンプリートのオン/オフを指定（on・off）

enctype属性

送信するデータの形式を指定（application/x-www-form-urlencoded・multipart/form-data・text/plain）

初期値はapplication/x-www-form-urlencoded

method属性

送信方法（HTTPメソッド）を指定

get：get送信されるデータは、action 属性で指定された URI にクエリ文字列 として付加された状態で送信されます （初期値）

post：post送信データは本文として送信されます。大きなデータを送信するのに向いています。通常、サーバ側のプログラムで受け取るデータはこの post メソッドを使用します

name属性

フォームの名前を指定

novalidate属性

入力されたデータの妥当性を確認しない（novalidate）

target属性

フォーム送信するターゲット先を指定（_blank：新規のウィンドウに表示, _self：現在のウィンドウ（フレーム）に表示, _parent：親ウィンドウ（フレーム）に表示, _top：フレームを解除してウィンドウ全体に表示）

label要素

label要素は、フォーム部品と項目名（ラベル）を関連付ける際に使用できます。一般的な利用方法として、

Customer name: 

とlabel要素で内包させて関連付けをします。ただし、for属性によって内包されているフォームと違う関連要素に変更した場合（後に説明※１）は間違いになります。

Customer name: 
※これはまちがい

また、label要素内に複数のラベル付け可能なフォーム部品をおいた場合は、最初の要素が対象になるそうです。

■属性値

for属性

フォーム部品とラベルを関連付ける

form属性

form要素とラベルを関連付ける

for属性をつかってラベルと関連させる場合（※１）は、input要素のid属性値を、label要素のfor属性値に指定することで関連させることができます。

注文を受け付けました。

これで、項目名であるテキストをクリックすることで選択できるように関連付けすることができました。

さらに、HTML5から新しくform属性が加わりました。フォーム関連要素は、デフォルトでは、その直近の祖先となるform要素と関連づけられますがform属性を指定すれば、これより優先させることができます。
たとえば任意のform要素にid属性値を指定し、同じ値をもつform属性値を入力コントロールなど（label要素、input要素）に指定すれば関連付けることができます。
これを利用するとform要素の外に入力コントロールがあったとしても、送信などが可能になります。

ご注文内容でいいですか？

filedset要素

fieldset要素は、フォームをグループ化することができます。fieldsetの名前はlegend要素によって与えられる。disabled属性は指定された場合、無効にするためにfieldset要素の所有する最初のlegend要素の子に属する子孫であるものを除き、fieldset要素の全フォームコントロールの子孫をもたらす。
form属性は、フォームの所有者とfieldset要素を明示的に関連付けるために使用される。name属性は要素の名前を表す。

■属性値

disabled属性

グループ内のフォーム部品を無効にする（disabled）

form属性

どのフォームと関連付けるかを<form>のid名で指定

name属性

<fieldset>に名前を付ける

legend要素

legend 要素は fieldset 要素によってまとめられたグループの見出しを表します。
legend 要素は、fieldset要素の最初の子要素としてひとつだけ配置しなくてはなりません。

input要素は、属性がたくさんありますので、次のエントリーで書きたいと思います。今回説明した要素や属性などで、下記のようなformの基本的な構文はできるのではないでしょうか？

Customer name: 
 

  
 Pizza Size 
  
  Small 
  
  Medium 
  
  Large 
 

と表示されます。

フォームまわりの要素は、button要素やselect要素、output要素などたくさんありますので、まだまだ続きます。