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

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

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

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

form要素

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

W3C HTML5 仕様書より

Customer name: 

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属性は要素の名前を表す。

W3C HTML5 仕様書より

■属性値

disabled属性

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

form属性

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

name属性

<fieldset>に名前を付ける

legend要素

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

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

Customer name: 
 

  
 Pizza Size 
  
  Small 
  
  Medium 
  
  Large 
 

Customer name:

Pizza Size

Small

Medium

Large

と表示されます。

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

名古屋から遠くはなれた山形県の山形市総合スポーツセンターで「第9回 若年者ものづくり競技大会 ウェブデザイン職種」が開催されています。当初は、飛行機でピュ～っと1時間程度の空の旅の予定でしたが、なぜか機体整備で突如、欠航となり、急遽、新幹線で5時間の旅路となりました。



それでも「やまびこ」と「つばさ」の連結を堪能したり、豪華な駅弁を食べたりと、トラブルもなく山形県に到着しました。灼熱の名古屋に比べると昼間も涼しく、朝晩はちょっと肌寒くもあります。

そんな訳で、初日の課題説明および機材（PC)環境の確認のため、会場である山形市総合スポーツセンターへ行ってきました。会場は普通の体育館内で、この会場で4競技（電子回路組立て、機械製図（CAD）、グラフィックデザイン、ウェブデザイン）が行われます。技能五輪や若年者ものづくり大会では、それほど珍しいことではありません。





最初に、席順を決めます。今年は宇野くんが11番と石原さんが18番で、なかなか良い番号ではないでしょうか。この番号が、そのまま明日のプレゼンの順番になります。



課題の内容も、事前に発表された課題と近いものでしたので、淡々と一通り機材の確認と質疑応答を終えホテルに戻ります。
ホテルでは、明日に備えてちょっと対策をします。（ちょっとになるのか、だいぶになるのかはわかりません。）



いよいよ、明日が競技本番です。この3か月の頑張りと実力が発揮していきましょう。

若年者ものづくり競技大会本番当日です。



当日のスケジュールは、
8:30　集合
8:45～10:30　競技開始
10:30～10:40　休憩
10:40～12:25　競技
12:25～13:15　昼食
13:15～14:30　競技
14:30～14:40　休憩
14:40～　プレゼンテーション
となります。



4時間45分の制作時間となります。集中して頑張りましょう。





名古屋では、猛暑のこの時期ですが盛岡でも暑い日でした。会場は空調がなく、大型扇風機がウワンウワン唸っていましたが参加者は集中して制作作業に没頭していました。さすがです。





制作終了後、作品のプレゼンテーションです。制作コンセプトや工夫をした部分、実装した機能など3分間で自分の作品をアピールします。他の選手のプレゼンを見ながら、同じ制作時間、課題内容ですので、自分の力も認識できます。それにしてもレベルが上がっていますね。



結果は、8月9日に若年者ものづくり競技大会のWebサイトで発表になります。最近、Webサイトでの発表なので少し寂しいですね。結果発表されしだい、こちらでもお知らせします。

第8回若年者ものづくり競技大会 ウェブデザイン職種

賞	氏名	所属
1位/厚生労働大臣賞	長屋　めぐみ	名古屋市工芸高等学校
2位	佐野 梓	名古屋市立工芸高等学校
3位	安味　里紗	日本電子専門学校
敢闘賞	勝呂　なつき	ヒューマンアカデミー 横浜校

入賞者のみなさん、おめでとうございます！

いよいよ、8月8日（木）に岩手県の紫波郡矢巾町にある岩手県立産業技術短期大学校 矢巾校で第8回若年者ものづくり競技大会（ウェブデザイン職種）が開催されます。
Webデザイン学科から出場する水野君と田中君も、元気よく名古屋を出発しました。



盛岡駅に到着するとそうそう名物“わんこそば”に挑戦してきました！

「はい、じゃーんじゃん」「どーんどん」とお椀の中におそばが入れられます。男性の平均が50杯ほどだそうですが、無事3人で330杯を達成し、ひとりで100杯以上食べるともらえるお札をゲットしました。そして担当してくれたお給仕さんと記念撮影。

さて、大会初日は競技課題の発表と制作環境の確認のため、会場の岩手県立産業技術短期大学校矢巾校に向かいます。今年は前回までと違って同会場は「機械製図（CAD）職種」「グラフィックデザイン職種」の3職種となります。


いざ、競技会場へ。競技設備はノートPCとなります。競技者番号は、田中君が1番、水野君が4番と若い番号になりました（今大会参加者は19名）。そして、今年の課題は「城南大学のマンション管理士対策講座のサイト」となりました。明日、Topページと模擬試験のページを5時間弱で制作します。





まだ授業で習っていないことなど、一生懸命、練習をしてきましたので成果がでると良いですね。
頑張りましょう！

先日行われた第8回ウェブデザイン技能競技大会の結果、トライデントコンピュータ専門学校から1年生の田中くんと水野くんが8月に行われる第8回若年者ものづくり競技大会に出場することになりました。
おめでとうございます！

第8回若年者ものづくり競技大会
日程：平成25年8月7日(水)～8月8日(木)
8月 7日（水） 競技会場下見等、開会式（競技職種ごとに競技会場にて実施）
8月 8日（木） 職種別競技、採点及び技術委員会
8月 9日（金） 成績発表（厚生労働省、中央職業能力開発協会のホームページにて発表予定。）
競技会場：・岩手県立産業技術短期大学校 矢巾校（岩手県紫波郡矢巾町大字南矢幅10-3-1）



大会に向けて全力で頑張るのはもちろん、昨年に引き続き、岩手県ということで会場は北三陸ではないですが「あまちゃん」も放送されていますので、とても楽しみにです。
事前課題やその他の競技の日程などは、中央職業能力開発協会のWebサイトに公開されています。