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

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

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

最終更新:2014.11.03Webサイト制作Tips

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関連要素編①)

最終更新:2017.10.26Webサイト制作Tips

本州を縦断した台風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要素などたくさんありますので、まだまだ続きます。

検索フォーム
プロフィール

担当:Webデザイン学科

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

トライデントロゴ

質問などはLINEでどうぞ。

Instagram
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年生進級展2018「線の群生」終了しました。
1年生進級展「WWW(Welcome to Web World)」を開催しました。
1年生進級展「お母さんの2度見展」を開催中です。
「うぇ~~~~~~~ぶ2016」終了しました。ご来場ありがとうございました!
「うぇ〜〜〜〜〜ぶ!!」終了。ご来場ありがとうございました!
<コンテスト>
信州アプリコンテスト0 [ゼロ] 2019 KDDI賞受賞!
第5回 ソレコン☆ポスコン特別賞受賞
「第1回 専門学校 HTML5作品アワード」技術賞を受賞しました!
NCF2017でグランプリを受賞しました!
信州アプリコンテスト0 [ゼロ] KDDI賞受賞!
NCF2014(スマホアプリ開発テーマ2) 準グランプリ獲得!
最優秀賞!HTML5スマートアプリ&クリエイティブコンテスト
NCF2013グランプリ受賞!!!
<Webサイト制作>
ミス・ユニバース・ジャパン岐阜大会公式Webサイトを作成しました。
建設業入職者増加プロジェクト発表会
Webサイト制作発表会2014
99eagle Webサイトリニューアル公開
99eagle Webサイト公開
「Bloom*Block」Webサイト公開
セントレア「日本の四季 キルト展」Webサイト公開
かっぱ商店街サイト制作
ココストア共同企画「アサココ!」公開
<技能五輪全国大会>
第56回技能五輪全国大会(ウェブデザイン職種)敢闘賞受賞!
第53回技能五輪全国大会(ウェブデザイン職種)その3
第52回技能五輪全国大会が開催されました。
銀メダル・銅メダル獲得【第51回技能五輪全国大会】
第49回技能五輪全国大会結果発表 敢闘賞受賞
第48回技能五輪全国大会結果発表(銀賞・敢闘賞受賞)
第47回技能五輪閉会式 & 結果発表
第46回技能五輪
<若年者ものづくり競技大会>
第14回若年者ものづくり競技大会
第11回若年者ものづくり競技大会 2日目&結果
第9回若年者ものづくり競技大会2日目(競技日)
第8回若年者ものづくり競技大会2日目
第7回若年者ものづくり大会
第6回若年者ものづくり大会2日目
第5回若年者ものづくり大会
第4回若年者ものづくり競技大会閉会式
月別アーカイブ
タグリスト 改

トライデントコンピュータ専門学校Webデザイン学科業界研究WCAN技能五輪ウェブデザイン職種若年者ものづくり競技大会ウェブデザインWebサイト2013映画ECCコンピュータ専門学校ポートフォリオ名古屋学生ブログWebデザインWinter2009Webサイト制作2011WordPress1年生進級展技能五輪全国大会JavaScript礒田優かっぱ商店街入学式アクアリングオープンキャンパスa-blog2014cmsWordpressライトニングトーク矢野りんWebNagoya卒業制作展CSS体験入学合同企業展テンプレート作成面白法人カヤックCGイラスト学科若年者ものづくり大会Web制作会社瀬川大勝卒展卒業制作Autumnホームページ・ビルダーアクセス解析石黒雄介SummerIIJ2010大阪HCD第48回技能五輪全国大会html5杉本拓也inウェブデザイン技能競技大会GIOHTML5mini佐藤歩2015閉館日学生インタビューココストアAdobeJapanあいちカレーラーメンコンテストFlash名古屋駅東京研修2012ウェブデザイン技能競技会企業訪問セントレアプロジェクトWebデザインギャラリー夏季閉館日トライデント祭りBananaAd愛知県制作合宿NEXTCentOSSpringラーメン水野裕太フォトアルバムgifアニメサイバーエージェント上村水月99eagle専門学校COMMUNICATIONグリッドレイアウト学生マール夏休みdisplay:gridGridLayout成田篤紀Google情報デザインWebワークショッププレゼンテーション田中睦翔CSS3情報デザインフォーラムウェブデザイン技能検定ブログパーツ北濱大輔Webクリエイター能力認定試験林田実樹2018jQuery人間中心設計particle和みCalendar飯田淳介幕張メッセ熊谷佳紀謹賀新年Yahoo!Japan5T(ファイヴティー)アップルップルフロントエンドエンジニアAdventマークアップエンジニアスマートフォンlegend要素愛知県選手団UXinput要素fieldset要素Forumたこ焼きform要素label要素textarea要素option要素1年生作品展うぇーぶまぼろしAWARDスマホアプリNTTドコモ東海output要素select要素長屋めぐみcanvas堀尾真衣カリキュラムSEO空気人形CMSjbstyle名古屋開府400年祭MarkupiPhone結果発表トライデント合同企業展笈瀬本通り写真カメラモンキーワークスワークショップF-site豊田市美術館グループ制作Apple企業課題茂森仙直2008鷹野雅弘StoreWebリテラシーWordCamp導入授業ディプロスアサココ!情報デザイン基礎DTPWORLDイラストマップトライデントFICCアンティー・ファクトリー静岡ポートフォリオサイトコミュニケーションデザインワークショップ阿部淳也真鍋大度岩手県ウェブアクセシビリティ作品集モリサワレイアウトLikeBox名古屋市科学館就職活動知多みるく戸田芳裕ナゴヤドーム中日ドラゴンズ名商連WEBサイト制作者のためのHCDの理解in名古屋CSSNiteAnalytics卒業式会社訪問メ~テレビジュアルエディタ産学協同PluginWordFes塚本碧2017Runstant信州アプリコンテスト[ゼロ]Webデザイナーサーティファイ鈴木優太ドラマ株式会社LIG水野怜美エイチーム久保怜也進級展アプリコンテスト学習出張講座沖縄初期設定ウェブDeBLOG情報デザイン教育勉強会北川パーヤンWorld)おかだよういちペルソナ/シナリオ法ヨウイチ長谷川恭久ウェブリテラシー協会第一回セミナースーパーエレメンツtoSalsaイラストコンテストデュエル・マスターズ浅野智ペルソナ&シナリオ法森川眞行会社見学鎌倉箱根合宿横浜中華街慶華飯店新横浜ラーメン博物館AndThen横浜デジタルアーツ専門学校3校合同発表会クリ博就職フェスタ日本電子専門学校WasThereWebデザインスペシャルデーNIKE小野裕子ストリートビューJIHYEJAPANインターネットクリエイティブアワードYahoo!カラーHEOブランディングホ・ジヘAutumin世界のCMフェスティバルITホワイトボックス藤井英一ナゴヤデザインウィーク2009イークリエイトUNIQLOCK是枝裕和監督人喰いの大鷲トリコPHP勉強会大富豪スコアシート東京ゲームショウ2009HCDプロセス韓国ロゴ公募FITCCREAMごはんとFlash教育勉強会#infoedu期末テストコピーライティング夢プロジェクト2009・成果報告会マークアップ演習マクロマリオネットwonderflKyotodotFesFlash-Gamesゆるキャラ映画のオープニング閉会式脆弱性なんと読む?山崎デザイン事務所志維ITCIRCUS柴乃櫂人広島弁iPhone4TOCAndrioid名古屋グランパスチタハン10WEBサイト制作者のためのHCD(人間中心設計)の理解シナリオペルソナ名古屋メディアボンドアクセシビリティサーバーIA金シャチ商店街商店街1→10design細川太郎タロヲAWARDS笈瀬本通愛知商業高校GAUltimateD3.js名チャリ名駅経済新聞名古屋サイト改善研究会スクラップブック中級編商店サイト制作プチ・フレーズポスターデザイン・コンペディションCODE名古屋クリエイターフットサルグラフィクデザイン出身高校三蔵みの治商店TwitterYORKE.ビジュアルデベロップメント名古屋おもてなし武将隊武豊アニメーションフェスティバルTAFFWCAN46武将都市ナゴヤ求人新世界道頓堀NCF2017Webアプリ堀川友章WWW(Welcomeギレン総帥浜松安藤福みつ餃子大沢たかおネスカフェゴールドブレンドofunoplusContents松坂屋美術館技能五輪予選WEBサイト制作者のためのHCDの理解伊藤頼子プロトコル分析Tableスタジオジブリ・レイアウト展知多半島フナ犬フォントおじさんミス・ユニバース・ジャパン岐阜大会ポートピア名古屋プロ野球安藤志維堀川友章関口浩之IA2010キックオフセミナー第4回アックゼロヨン・アワードCollegeFLEXFLASHCBCNightTBSSakae新入生オリエンテーションわたし、定時に帰ります。LIGMAX祐司PhotoshopCS6愛知県美術館アンドリュー・ワイエス髙橋茜音STUDIOデザイナーのためのプログラミング入門PHP佐藤可士和中村勇吾西村真里子線の群生2020新卒プレゼン演習WCAN×CSSNite広告批評アートアニメーション武豊町TAFF'09ActionScript基礎HTML+CSS基礎企業見学CS4サムライTEXTUREDesignデッサン造形基礎日本総合ビジネス専門学校株式会社MTGデザイン鳥取砂丘冬休みライフスタイルHPデザインデザインコンテスト仙直茂森2019ソレコン☆ポスコンコンテスト01CONTESTウェブデザイン部門足立丈也、平子卓哉、増田隼也カンファレンスeat信州アプリコンテストゼロ落合祐介THEWEB杉浦麻紀茜音丹下紘希松本渚株式会社スタメンXRAY2008Winter株式会社アンティー・ファクトリーSIGGRAPH鳥取VideopuppetryASIAWebDirectionEast'08デザインのへそQubibiArtlessNamW+KTokyo(+CRUZ)Stefan髙橋HelveticaSagmeisterFINALFANTASYVRカルタOculus旭食品サンプル製作所食品サンプル学科富岡聡電信柱エレミの恋ウサビッチカナバングラフィックスGOActionScript第56回黒い太陽ウルトラ展ヤノベケンジライブペイントインターネットスキル認定普及協会ヱヴァンゲリヲン新劇場版:破西田幸司国家検定コマ撮りアニメソバットシアターescalatorアニメーションMozorama新城高校animationモーション演習冨田伴成増田悟CG・イラストコンテスト後期青山高校アイディグラフィックス学生参加CMS特集東京ゲームショウ2018今井佳子グラフィックデザイン入賞ガンダム出前授業沖縄県pictureあけおめBlogUTZOOMLabuat平成31年「ヤノベケンジ-ウルトラ」展GENOウィルスメーカー・ブランドワークスコーポレーション株式会社サイバーエージェントTokyoCOMPLETECHILDRENADVENTVIIFigmaツール桝田草一牧野史門UIデザインセキュリティコーヒー用品cyma斉藤洸貴CALENDARUNIQLOEC事業第56回技能五輪全国大会sourceカスタマイズセミナーsrcset荒俣宏NextDoor前川元成山村浩二デコクレ□□□switch日本ファルコムファルコム音楽フリー宣言音楽ゲームLPO株式会社アクアリング本州最南端串本八鬼山熊野古道那智の大滝大門坂アロチ本家和歌山中華そば熊野三山マカベン名古屋マークアップ勉強会河地芳明AO入試中村健太道家陽介ランチ石原愛実tableテーブル宇野剛志丸高丸田屋青山敬司山田拓生加藤ひとみ西岡克真IA/UXプラクティス平野秀幸津田直明制作実績坂本貴史カークスヴィルAnimation柏木祥太スパルタキャンプ岩出本店名古屋市営地下鉄青空学区AO特別授業沼田啓助concrete5プログラムクイズNTTドコモ東海支社NCF2013駅麺通り美術大学涼麺list-style-typeモテ声ボーダーlist-itemdisplay芸術大学クイズ麺屋ココイチフジ家55Resurgenceさかなや麺やOKカレーラーメンIndependenceDay:高橋雅人HTML5スマートアプリ&クリエイティブコンテストKDDIDesignergoogleGWDF81教室parseInt()parseFloat()栗山聡一CodePen備忘録トライデント合同企業説明会JSBin卒業研究制作展最優秀賞ジョルテjsdo.itCodeply10日でおぼえるLinuxサーバー入門教室JSFiddlePlunker結団式アイチータバイドゥアクセシビリティからはじめる、WebサイトのUXデザイWebアクセシビリティVelocity.js建設経営者倶楽部ワクワク建設タウン熊﨑彩平野健太郎第53回ScrollMagicScrollmagicワイヤーフレーム木村哲朗うぇ~~~~~~~ぶウェブアートデザイナー仕事夏麺フェア八木智章竹中民男UIクリスマスポートフォリオアイデア帳アクティビティシナリオ源賢司UXデザインDmm.comKaizenPlatform14グロースハッカーグロースハック岡田陽一高校採用担当者の心に響く3DCG東京コスモ松田洋樹CGスペシャリストFlexibleBoxFlexbox味仙森田霞レスポンシブWebデザインHTMLbutton要素datalist要素keygen要素WebディレクターWeb制作のおしごと麺の匠オリエンタル第52回技能五輪全国大会Webプログラマーoptgroup要素アイテムカンパニーネイルサロンマウア授業紅茶専門店Liyn-an2016坂本邦夫原一浩type属性親孝行新年のご挨拶WF1でBLOG職業実践専門課程出席率学位新入生2015年度HighlighterSyntaxCrayonインターンシップスマートフォンサイトUI図鑑合宿懇親会NCF2014名古屋駅麺通り合同制作CSS3&jQueryで作る専門士合同制作合宿晴れやか嵐が如くDTPの勉強部屋ablogcmsWCAN2017SpringProxy伊達千代北岡弘至3JAPANWORLDCUPMagnumトライデントカレッジ佐藤洋介ぬいぐるみのラパンKtaistyleCustomSmilies卒業制作・研究発表会2011英国王のスピーチUntitled!!!!!!!!学校ターミナルバルサマンプロジェクションマッピングSyntaxHighlighterプラネタリウムv4.0.1ライアン・ウッドワードES2015鈴木神戸国際展示場ES6マーサ・グレアム5月11日愛知淑徳大学みつけもの恵那市岩村ドラゴンゲートDRAGONGoogleロゴゴールデンウィークGATE絵文字服部友厚大西健太田中稚妃呂梅澤朝樹横浜デジタルアーツLazyLoadSlimbox2for株式会社エイチーム衣台高校尾鷲高校中部国際空港株式会社夏休みの課題CODEポスターデザイン・コンペティションブラザー工業株式会社ノートPC貸与GoogleAnalytics石井研二カメラワークウェブリテラシー協会JISキルト展日本の四季中部国際空港GAINAX鈴木雄太愛知県立芸術大学スタジオディテイルズ円JOY!map卒業・修了制作展SUBARU放課後のプレアデスFLV8341-3:2010XFLAVER3.0名古屋市中村区キルターズフェスティバル2011山川綾那笈瀬本通商店街神戸ECMAScriptみんなのICT再進学驛麺通りFacebook学園祭佐藤ねじ情報系就職東京たこ焼きパーティWeb制作合宿Muse画像をチェックボタンにする張山大祐JQueryInstagramインスタグラムいな世醐りょう木下健太郎Three.js第51回技能五輪全国大会Webデザイン演習学生作品集Monacaジムナストコロン日清食品グループプラネタリアン水曜日のカンパネラタカガールサイトあいちトリエンナーレ2013そこにいない。展田代豊たにぐちまことプレゼンRhizomatiksinspiredPARTYPerfumeby第50回結果ドコモWebプログラミング初級講座2011年度マイクロソフトdocomoFutureHTMLCollectionappendChild()Station迎春敢闘賞ゲーム大賞アマチュア部門東京ゲームショウお母さんの二度見展Ohanaメールマガジンツインメッセ静岡静岡県ロゴマークNodeListNHNベースキャンプ名古屋SHOWGAMETOKYO料理Facebookページ長野IllustratorSVG東京ゲームショウ2012第7回若年者ものづくり競技大会Teamイマジンカップ美大BloosumBloom*Block芸大marker尾花大輔小林信次

メールフォーム

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

東京コスモ
トライデントコンピュータ専門学校
教務課のびのび日記
Pagetop