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

トライデントWebデザイン学科の最新情報を紹介しています。学生へのインタビュー記事から学生作品の解説、Webデザイン・マークアップ・プログラミングの授業風景、プロジェクト発表会、名古屋のWeb制作会社情報、イベント参加レポートやWeb制作の技術解説記事などWeb制作に関連する記事を掲載しています。トライデントコンピュータ専門学校は、いま話題の名古屋駅から地下街を歩いて3分です。 

2014.11.01 [土] 実際にformをどうやって使うの?(form関連要素おまけ)

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

html5logo.jpg

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




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


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

……

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


fieldset

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
  • input type radio

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


datalist

output 0 100 + = 60

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

keygen

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


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

2014.10.06 [月] form要素、label要素、fieldset要素、legend要素のおさらい(form関連要素編①)

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

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

form要素

formは、テキストフィールド、ボタン、チェックボックス、レンジコントロール、またはカラーピッカーなど、フォームコントロールを持つウェブページのコンポーネントである。さらなる処理(たとえば、検索または計算結果を返す)に対してサーバーに送信できるデータを提供して、ユーザーはそのようなフォームで情報を交換できる。スクリプトがユーザーエクスペリエンスを補強するか、またはサーバーにデータを送信する以外の意義に対してフォームを使用できるようなAPIが利用可能であるが、多くの場合クライアント側のスクリプトは必要ない。

すべてのフォームは、内部にコントロールを配置されたform要素で始まる。ほとんどのコントロールは、デフォルトで1行のテキストフィールドを提供するinput要素によって表される。コントロールをラベル付けするために、label要素が使用される。ラベルテキストおよびコントロール自身は、label要素の中に入る。フォームの各部分は段落とみなされ、通常はp要素を使用して他の部分から分離される。
W3C HTML5 仕様書より


のように表示されます。

フォームに入力されたデータは、送信ボタンを押すことで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要素は、フォーム部品と項目名(ラベル)を関連付ける際に使用できます。一般的な利用方法として、
とlabel要素で内包させて関連付けをします。ただし、for属性によって内包されているフォームと違う関連要素に変更した場合(後に説明※1)は間違いになります。

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

■属性値
for属性
フォーム部品とラベルを関連付ける
form属性
form要素とラベルを関連付ける

for属性をつかってラベルと関連させる場合(※1)は、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の基本的な構文はできるのではないでしょうか?



Pizza Size





Pizza Size


と表示されます。

フォームまわりの要素は、button要素やselect要素、output要素などたくさんありますので、まだまだ続きます。
検索フォーム
熊本地震 支援・募金まとめ
募集イベントバナー(1年生制作)
BananaAd Banner
プロフィール

担当:Webデザイン学科+

名古屋駅から歩いて6分、トライデントコンピュータ専門学校のWebデザイン学科を紹介します。

トライデントロゴ

質問などはLINEでどうぞ。

友だち追加数
Webデザイン学科実績
<プレゼン>
WCAN 2016 Springに参加してきました。
WCAN 2015 Winterに参加しました。
建設業入職者増加プロジェクトの発表会に参加
WCAN 2015 Summerに参加してきました。
WCAN 2013 Winterに参加
WCAN(秋)に参加しました。
無事、発表が終わりました【WordFes Nagoya 2013】
WCAN 2013 Summerに参加してきました。
WCAN 2011 Winter LT&LOGO
学生がライトニングトークで話しました。
<展示会>
1年生進級展「お母さんの2度見展」を開催中です。
「うぇ~~~~~~~ぶ2016」終了しました。ご来場ありがとうございました!
「うぇ〜〜〜〜〜ぶ!!」終了。ご来場ありがとうございました!
<コンテスト>
NCF2014(スマホアプリ開発テーマ2) 準グランプリ獲得!
最優秀賞!HTML5スマートアプリ&クリエイティブコンテスト
NCF2013グランプリ受賞!!!
<Webサイト制作>
建設業入職者増加プロジェクト発表会
Webサイト制作発表会2014
99eagle Webサイトリニューアル公開
99eagle Webサイト公開
「Bloom*Block」Webサイト公開
セントレア「日本の四季 キルト展」Webサイト公開
かっぱ商店街サイト制作
ココストア共同企画「アサココ!」公開
<技能五輪全国大会>
第53回技能五輪全国大会(ウェブデザイン職種)その3
第52回技能五輪全国大会が開催されました。
銀メダル・銅メダル獲得【第51回技能五輪全国大会】
第49回技能五輪全国大会結果発表 敢闘賞受賞
第48回技能五輪全国大会結果発表(銀賞・敢闘賞受賞)
第47回技能五輪閉会式 & 結果発表
第46回技能五輪
<若年者ものづくり競技大会>
第11回若年者ものづくり競技大会 2日目&結果
第9回若年者ものづくり競技大会2日目(競技日)
第8回若年者ものづくり競技大会2日目
第7回若年者ものづくり大会
第6回若年者ものづくり大会2日目
第5回若年者ものづくり大会
第4回若年者ものづくり競技大会閉会式
Instagram
学生ブログリンク
<1年生ブログ>

WF1でBLOG 2017

<Webデザイン学科2年生ブログ>
タグリスト 改

トライデントコンピュータ専門学校Webデザイン学科WCAN業界研究技能五輪ウェブデザイン職種ウェブデザイン2013若年者ものづくり競技大会名古屋WebサイトポートフォリオECCコンピュータ専門学校映画Winter2009学生ブログWebデザインWebサイト制作WordPress2011JavaScript礒田優かっぱ商店街矢野りん技能五輪全国大会NagoyaWordpresscms2014入学式卒業制作展a-blogライトニングトーク石黒雄介Webオープンキャンパスホームページ・ビルダーテンプレート作成瀬川大勝AutumnSummer若年者ものづくり大会面白法人カヤックCGイラスト学科アクアリング20102012第48回技能五輪全国大会miniWeb制作会社東京研修html520151年生進級展アクセス解析GIOIIJFlashin体験入学杉本拓也Japan名古屋駅あいちカレーラーメンコンテストHCDココストアウェブデザイン技能競技会大阪Adobe田中睦翔情報デザインマール上村水月プレゼンテーションHTML599eagleセントレアブログパーツ情報デザインフォーラムCentOS人間中心設計ラーメン企業訪問合同企業展卒業制作水野裕太Springgifアニメ成田篤紀専門学校ウェブデザイン技能検定愛知県CSS3BananaAd卒展プロジェクトWebワークショップ学生Google静岡2008まぼろしナゴヤドームトライデント知多みるくUXjbstyle戸田芳裕AnalyticsparticleForumYahoo!Japancanvasウェブデザイン技能競技大会長屋めぐみレイアウトlegend要素fieldset要素鷹野雅弘カリキュラムCMS岩手県label要素form要素Boxたこ焼き空気人形LikeWebデザインギャラリー名商連SEOinput要素塚本碧アンティー・ファクトリー真鍋大度iPhoneFICCスマホアプリ1年生作品展中日ドラゴンズイラストマップWEBサイト制作者のためのHCDの理解in名古屋option要素textarea要素output要素select要素茂森仙直堀尾真衣うぇーぶ名古屋開府400年祭笈瀬本通りAdvent5T(ファイヴティー)モンキーワークス写真アサココ!ディプロスサーティファイCSSWebクリエイター能力認定試験導入授業WordCampCSSNiteメ~テレ産学協同会社訪問卒業式ワークショップRunstant就職活動StoreスマートフォンDTPWORLD情報デザイン基礎Apple佐藤歩名古屋市科学館学生インタビューCalendar企業課題ポートフォリオサイト作品集熊谷佳紀林田実樹MarkupjQuery幕張メッセ結果発表閉館日グループ制作ビジュアルエディタコミュニケーションデザインワークショップ阿部淳也豊田市美術館初期設定サイバーエージェントカメラF-site謹賀新年トライデント合同企業展和みWordFes鎌倉福みつThenウェブリテラシー協会第一回セミナーSalsa石井研二夢プロジェクト2009・成果報告会IA2010キックオフセミナーWCAN46浜松餃子WasThere横浜中華街箱根合宿森川眞行新横浜ラーメン博物館慶華飯店AndNIKE会社見学知多半島iPhone4シナリオペルソナ広島弁柴乃櫂人AndrioidITCIRCUS1→10design細川太郎アクセシビリティ名駅経済新聞名古屋メディアボンド金シャチ商店街タロヲ商店街WEBサイト制作者のためのHCD(人間中心設計)の理解チタハン10GAみの治商店Twitter三蔵Ultimate商店サイト制作プチ・フレーズ愛知商業高校グラフィクデザイン笈瀬本通名古屋グランパス名古屋クリエイターフットサルCODEポスターデザイン・コンペディション名チャリ中級編サーバーポートピア名古屋フナ犬ネスカフェゴールドブレンドGoogleAnalyticsプロ野球ブラザー工業株式会社株式会社アクアリング大沢たかお求人名古屋おもてなし武将隊武豊アニメーションフェスティバル武将都市ナゴヤ新世界道頓堀中部国際空港株式会社スタジオジブリ・レイアウト展伊藤頼子増田悟ビジュアルデベロップメント名古屋サイト改善研究会IAYORKE.プロトコル分析WEBサイト制作者のためのHCDの理解unoplus松坂屋美術館カメラワーク技能五輪予選小林信次CODEポスターデザイン・コンペティションTAFFITホワイトボックスFINALアートアニメーション武豊町TAFF'09FANTASYVIICOMPLETECHILDRENADVENT広告批評WCAN×CSSNiteWebリテラシーデッサンDesign造形基礎HTML+CSS基礎西村真里子プレゼン演習ActionScript基礎TokyoLabuatファルコム音楽フリー宣言音楽ゲーム荒俣宏UNIQLOヤノベケンジカスタマイズセミナーCALENDAR日本ファルコム□□□switch「ヤノベケンジ-ウルトラ」展BlogUTZOOMワークスコーポレーションGENOウィルス山村浩二デコクレセキュリティCS4サムライStefanW+KTokyo(+CRUZ)QubibiArtlessSagmeisterHelvetica2008WinterWebDirectionEast'08デザインのへそNam丹下紘希WEBウェブデザイン部門カンファレンスTHECONTESTHPデザインデザインコンテスト01XRAYSIGGRAPHCollegeFLEXFLASHNightSakaeTEXTURE中村勇吾佐藤可士和MAXデザイナーのためのプログラミング入門鳥取VideopuppetryASIA鳥取砂丘デザインPHP愛知県美術館アンドリュー・ワイエスウルトラ展黒い太陽映画のオープニング閉会式ゆるキャラFlash-Gamesマクロマリオネットマークアップ演習FITCCREAMごはんとFlashwonderflKyotoストリートビューJAPANインターネットクリエイティブアワードYahoo!カラーAutumindotFesHCDプロセスブランディングロゴ公募教育勉強会おかだよういちペルソナ/シナリオ法情報デザイン教育勉強会浅野智ペルソナ&シナリオ法横浜デジタルアーツ専門学校3校合同発表会クリ博就職フェスタウェブDeBLOGヨウイチコピーライティング小野裕子#infoedu山崎デザイン事務所スーパーエレメンツイラストコンテストデュエル・マスターズ長谷川恭久世界のCMフェスティバル横浜デジタルアーツコマ撮りアニメ電信柱エレミの恋ウサビッチカナバングラフィックスソバットシアターCMS特集今井佳子アイディグラフィックス学生参加富岡聡学科国家検定インターネットスキル認定普及協会ライブペイント西田幸司ヱヴァンゲリヲン新劇場版:破旭食品サンプル製作所食品サンプルActionScriptグラフィックデザインガンダムナゴヤデザインウィーク2009UNIQLOCKギレン総帥是枝裕和監督人喰いの大鷲トリコPHP勉強会大富豪スコアシート東京ゲームショウ2009LPO第4回アックゼロヨン・アワードMozorama後期入賞アニメーションescalatorCG・イラストコンテストモーション演習animation日本電子専門学校3松田洋樹3DCG東京コスモクリスマスCGスペシャリスト味仙Dmm.com岡田陽一FlexibleBoxFlexbox熊﨑彩第53回ScrollMagicScrollmagic八木智章竹中民男Velocity.jsWebアクセシビリティワクワク建設タウン建設経営者倶楽部アクセシビリティからはじめる、WebサイトのUXデザイUXデザイン源賢司うぇ~~~~~~~ぶワイヤーフレーム仕事UIウェブアートデザイナーレスポンシブWebデザイン学位出席率職業実践専門課程バイドゥ平野健太郎グロースハックPlatformKaizenアクティビティシナリオグロースハッカー14ポートフォリオアイデア帳採用担当者の心に響く高校夏麺フェア飯田淳介type属性紅茶専門店Liyn-anアイテムカンパニーネイルサロンマウアoptgroup要素keygen要素HTMLbutton要素datalist要素授業アイチータ西岡克真AnimationAO特別授業加藤ひとみ山田拓生結団式愛知県選手団青山敬司第52回技能五輪全国大会オリエンタルHighlighterSyntaxCrayon2015年度森田霞マークアップエンジニアフロントエンドエンジニア木村哲朗アップルップル新入生WF1でBLOGNCF2014新年のご挨拶親孝行麺の匠NTTドコモ東海名古屋駅麺通りインターンシップスマートフォンサイトUI図鑑CSS3&jQueryで作る専門士合同制作合宿NodeList美大芸大水野怜美HTMLCollectionappendChild()学習進級展マイクロソフトWebプログラミング初級講座株式会社LIG料理いな世驛麺通り再進学学園祭醐りょうドラマInstagramインスタグラムお母さんの二度見展ライデントコンピュータ専門学校鈴木雄太フォトアルバムスタジオディテイルズ服部友厚山川綾那株式会社エイチーム尾鷲高校衣台高校梅澤朝樹佐藤洋介ターミナル制作合宿ES2015ES6ECMAScriptSyntaxHighlighterv4.0.1学校ProxyWCAN2017Spring情報系MonacaIA/UXプラクティス平野秀幸坂本貴史制作実績カークスヴィル沼田啓助プログラムクイズAO入試河地芳明津田直明2016Web制作のおしごと懇親会合宿合同制作WebディレクターWebデザイナー原一浩坂本邦夫WebプログラマーCodePenJSBinジムナストコロン日清食品グループタカガールサイト水曜日のカンパネラ夏休み夏季閉館日学生作品集沖縄トライデント祭りプラネタリアンResurgencejsdo.itCodeplyPlunkerJSFiddle涼麺駅麺通りDay:Independenceクイズ青空学区名古屋市営地下鉄東京ゲームショウ神戸神戸国際展示場ゲーム大賞アマチュア部門Ohanaツインメッセ静岡静岡県ロゴマークメールマガジン鈴木プラネタリウムGATEDRAGONドラゴンゲート愛知淑徳大学ゴールデンウィークGoogleロゴライアン・ウッドワードマーサ・グレアム5月11日敢闘賞迎春GAMETOKYO東京ゲームショウ2012第7回若年者ものづくり競技大会SHOWベースキャンプ名古屋IllustratorSVGFacebookページ尾花大輔Bloom*BlockFuturedocomoドコモ2011年度StationNHNBloosumTeamイマジンカップみつけもの恵那市岩村キルターズフェスティバル2011笈瀬本通商店街名古屋市中村区FLAVER3.0放課後のプレアデスSUBARU日本の四季中部国際空港GAINAXFLV8341-3:2010PluginLoadLazy大西健太forSlimbox2XJISウェブリテラシー協会キルト展愛知県立芸術大学北岡弘至伊達千代DTPの勉強部屋ablogcmsMagnumJAPANWORLDCUPプロジェクションマッピングバルサマン出張講座トライデントカレッジCustomSmilies絵文字円JOY!map卒業・修了制作展KtaistyleぬいぐるみのラパンUntitled!!!!!!!!英国王のスピーチ卒業制作・研究発表会2011長野結果parseInt()DesignergoogleGWDparseFloat()備忘録道家陽介concrete5栗山聡一F81教室トライデント合同企業説明会HTML5スマートアプリ&クリエイティブコンテストモテ声ボーダーlist-itemdisplayKDDIジョルテ10日でおぼえるLinuxサーバー入門教室卒業研究制作展最優秀賞中村健太ランチアロチ本家和歌山中華そば熊野三山大門坂丸高丸田屋柏木祥太スパルタキャンプ岩出本店那智の大滝本州最南端tableテーブル宇野剛志石原愛実名古屋マークアップ勉強会マカベン串本八鬼山熊野古道list-style-typeNTTドコモ東海支社木下健太郎就職東京佐藤ねじThree.jsプレゼンRhizomatiks田代豊たにぐちまことみんなのICTウェブアクセシビリティ画像をチェックボタンにする張山大祐JQuery第50回MuseWeb制作合宿モリサワFacebookたこ焼きパーティinspiredbyNEXT高橋雅人カレーラーメン麺やOKCOMMUNICATIONAWARDNCF2013美術大学芸術大学麺屋ココイチフジ家55あいちトリエンナーレ2013そこにいない。展PARTYPerfumeWebデザイン演習第51回技能五輪全国大会さかなや晴れやか嵐が如く田中稚妃呂

メールフォーム

名前:
メールアドレス:
件名:
本文:

東京コスモ
トライデントコンピュータ専門学校
Pagetop