2014.11.01 [土] 実際にformをどうやって使うの？（form関連要素おまけ）

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要素

formの外

formの内

fieldset

Small

Medium

Large

input type hidden

input type text

input type search

input type tel

input type url

input type email

input type password

input type datatime

input type data

input type month

input type week

input type time

input type datatime-local

input type number

input type range

input type color

• input type chekubox
• AAAAA
• BBBBB
• CCCCC

• input type radio
• AAAAA
• BBBBB
• CCCCC

input type file

input type submit ※押すとデータが送信されます。

input type image ※こちらも押すと送信されます。働きはtype="submit"と同じです。

input type reset

input type button

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

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

text area HTML5が勧告されましたね。

select 都道府県を選択してください 北海道 青森県 岩手県 宮城県 秋田県 山形県 福島県 群馬県 栃木県 茨城県 埼玉県 千葉県 東京都 神奈川県 新潟県 長野県 富山県 石川県 福井県 愛知県 岐阜県 静岡県 三重県 大阪府 兵庫県 京都府 滋賀県 奈良県 和歌山県 鳥取県 島根県 岡山県 広島県 山口県 徳島県 香川県 愛媛県 高知県 福岡県 佐賀県 長崎県 熊本県 大分県 宮崎県 鹿児島県 沖縄県

datalist

output 0 100 + =

60

※output要素は表示させるためですので、値は送信されません。

keygen 名前

button Click me ※これを押すと送信されます。

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