ウェブ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 ※これを押すと送信されます。


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

検索フォーム
熊本地震 支援・募金まとめ
募集イベントバナー(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デザイン2011JavaScriptWebサイト制作WordPress礒田優かっぱ商店街a-blogWordpress技能五輪全国大会ライトニングトークNagoyacms矢野りん2014卒業制作展入学式瀬川大勝Summer面白法人カヤックCGイラスト学科若年者ものづくり大会Webオープンキャンパスホームページ・ビルダーアクアリング石黒雄介テンプレート作成AutumnJapan体験入学mini1年生進級展Flashinhtml52010杉本拓也ウェブデザイン技能競技会2015大阪アクセス解析あいちカレーラーメンコンテスト名古屋駅HCDWeb制作会社IIJAdobe第48回技能五輪全国大会2012東京研修ココストアGIOCentOS合同企業展プレゼンテーションマールBananaAdラーメン専門学校卒展水野裕太人間中心設計情報デザインフォーラム卒業制作企業訪問田中睦翔学生プロジェクトGoogle情報デザイン99eagleCSS3gifアニメWebワークショップ上村水月HTML5ウェブデザイン技能検定愛知県セントレア成田篤紀ブログパーツSpringlegend要素fieldset要素label要素form要素CMS塚本碧岩手県SEOたこ焼きカリキュラムCSSNite名商連Webデザインギャラリー真鍋大度input要素Runstant長屋めぐみWEBサイト制作者のためのHCDの理解in名古屋スマホアプリうぇーぶ1年生作品展ビジュアルエディタグループ制作佐藤歩企業課題textarea要素option要素select要素output要素FICC空気人形モンキーワークス和みワークショップWordFesスマートフォン作品集鷹野雅弘堀尾真衣Calendar産学協同写真2008カメラAdvent5T(ファイヴティー)トライデント合同企業展茂森仙直トライデントイラストマップ学生インタビューBoxまぼろしLike笈瀬本通りForumレイアウト結果発表AnalyticsiPhoneUXCSSサイバーエージェントアンティー・ファクトリー名古屋市科学館会社訪問閉館日林田実樹F-site幕張メッセウェブデザイン技能競技大会卒業式Markup名古屋開府400年祭阿部淳也コミュニケーションデザインワークショップ静岡情報デザイン基礎ディプロス初期設定アサココ!サーティファイWebクリエイター能力認定試験WordCamp導入授業豊田市美術館謹賀新年DTPWORLD就職活動jQuery熊谷佳紀メ~テレ知多みるくAppleStorecanvasナゴヤドームjbstyleポートフォリオサイトparticle中日ドラゴンズ戸田芳裕AndThenNIKE慶華飯店iPhone4広島弁サーバー名古屋サイト改善研究会増田悟IA中級編名駅経済新聞小林信次CODEポスターデザイン・コンペティションWasSalsa新横浜ラーメン博物館フナ犬There中部国際空港株式会社プロ野球ブラザー工業株式会社細川太郎クリ博就職フェスタアクセシビリティペルソナ&シナリオ法商店街金シャチ商店街株式会社アクアリング名古屋メディアボンド3校合同発表会1→10designポートピア名古屋横浜中華街名チャリペルソナ箱根合宿森川眞行横浜デジタルアーツ専門学校日本電子専門学校鎌倉会社見学シナリオウェブリテラシー協会第一回セミナーチタハン10武将都市ナゴヤ柴乃櫂人名古屋おもてなし武将隊名古屋グランパスWCAN46TAFF武豊アニメーションフェスティバル大沢たかおunoplusITCIRCUSWEBサイト制作者のためのHCD(人間中心設計)の理解道頓堀タロヲグラフィクデザイン浅野智Andrioid求人Twitter松坂屋美術館スタジオジブリ・レイアウト展みの治商店三蔵笈瀬本通IA2010キックオフセミナー名古屋クリエイターフットサル伊藤頼子ビジュアルデベロップメント夢プロジェクト2009・成果報告会GAYORKE.Ultimate新世界プロトコル分析CODE技能五輪予選ポスターデザイン・コンペディションプチ・フレーズネスカフェゴールドブレンド知多半島福みつ商店サイト制作WEBサイト制作者のためのHCDの理解浜松餃子愛知商業高校大富豪スコアシートTAFF'09広告批評WCAN×CSSNite武豊町アートアニメーションVIIFANTASYFINAL西村真里子プレゼン演習DesignCS4サムライデッサンWebリテラシーActionScript基礎HTML+CSS基礎造形基礎ADVENTCHILDREN日本ファルコム□□□switch山村浩二ゲーム音楽UNIQLO荒俣宏ファルコム音楽フリー宣言デコクレセキュリティLabuatTokyoCOMPLETEUTZOOMBlogGENOウィルスワークスコーポレーション「ヤノベケンジ-ウルトラ」展TEXTURE中村勇吾W+KTokyo(+CRUZ)QubibiArtlessStefanSagmeisterWebDirectionEast'08デザインのへそHelveticaNam丹下紘希WEBウェブデザイン部門カンファレンスTHECONTESTHPデザインデザインコンテスト012008WinterXRAYFLASHMAXデザイナーのためのプログラミング入門FLEXCollege佐藤可士和SakaeNightPHP愛知県美術館VideopuppetryASIASIGGRAPH鳥取鳥取砂丘アンドリュー・ワイエスデザインCALENDARカスタマイズセミナーKyotodotFesHCDプロセスwonderflFlash-Games映画のオープニング閉会式ゆるキャラブランディングAutuminITホワイトボックスPHP勉強会東京ゲームショウ2009世界のCMフェスティバルYahoo!カラーストリートビューJAPANインターネットクリエイティブアワードマクロマリオネットマークアップ演習デュエル・マスターズ長谷川恭久スーパーエレメンツイラストコンテストヨウイチペルソナ/シナリオ法情報デザイン教育勉強会ウェブDeBLOG山崎デザイン事務所コピーライティングFITCCREAMごはんとFlashロゴ公募教育勉強会小野裕子#infoedu人喰いの大鷲トリコ是枝裕和監督富岡聡学科旭食品サンプル製作所カナバングラフィックスウサビッチソバットシアターコマ撮りアニメ電信柱エレミの恋食品サンプルActionScript黒い太陽ウルトラ展ヤノベケンジライブペイントインターネットスキル認定普及協会ヱヴァンゲリヲン新劇場版:破西田幸司国家検定CMS特集学生参加CG・イラストコンテストモーション演習animation第4回アックゼロヨン・アワードLPOナゴヤデザインウィーク2009UNIQLOCKギレン総帥escalatorアニメーショングラフィックデザイン今井佳子アイディグラフィックスガンダム入賞Mozorama後期おかだよういちDTPの勉強部屋建設経営者倶楽部アクセシビリティからはじめる、WebサイトのUXデザイWebアクセシビリティVelocity.jsワクワク建設タウン第53回東京コスモクリスマス熊﨑彩ScrollMagicScrollmagicフロントエンドエンジニア木村哲朗アップルップルマークアップエンジニア飯田淳介夏麺フェア八木智章竹中民男Yahoo!Japan3DCG松田洋樹高校14グロースハッカーグロースハック採用担当者の心に響くポートフォリオアイデア帳UIバイドゥ平野健太郎PlatformKaizenFlexibleBoxFlexbox味仙CGスペシャリスト岡田陽一Dmm.comアクティビティシナリオ源賢司UXデザイン森田霞Highlighter結団式愛知県選手団青山敬司山田拓生アイチータ授業紅茶専門店Liyn-anアイテムカンパニーネイルサロンマウア加藤ひとみ西岡克真柏木祥太スパルタキャンプ岩出本店丸田屋名古屋市営地下鉄青空学区AnimationAO特別授業type属性optgroup要素インターンシップスマートフォンサイトUI図鑑CSS3&jQueryで作る名古屋駅麺通りWF1でBLOG新入生SyntaxCrayon2015年度NTTドコモ東海NCF2014HTMLbutton要素datalist要素keygen要素第52回技能五輪全国大会オリエンタル新年のご挨拶親孝行麺の匠仕事ワイヤーフレームドラマInstagramインスタグラム醐りょう料理株式会社LIG美大芸大水野怜美いな世学生作品集沖縄ジムナストコロン日清食品グループMonaca情報系驛麺通り再進学学園祭NodeListHTMLCollectionProxyWCAN2017Springv4.0.1SyntaxHighlighter学校ターミナルスタジオディテイルズ服部友厚佐藤洋介制作合宿ES2015進級展マイクロソフトWebプログラミング初級講座appendChild()学習お母さんの二度見展ES6ECMAScriptライデントコンピュータ専門学校タカガールサイト水曜日のカンパネラWebプログラマーWebデザイナーWebディレクターWeb制作のおしごと坂本邦夫原一浩制作実績津田直明2016懇親会合宿職業実践専門課程レスポンシブWebデザインウェブアートデザイナーうぇ~~~~~~~ぶ出席率学位合同制作合同制作合宿専門士坂本貴史平野秀幸駅麺通り涼麺jsdo.itCodeplyクイズIndependenceプラネタリアンResurgenceDay:PlunkerJSFiddle沼田啓助カークスヴィルIA/UXプラクティス河地芳明AO入試JSBinCodePenプログラムクイズ丸高アロチ本家鈴木プラネタリウムライアン・ウッドワードマーサ・グレアム神戸国際展示場ゲーム大賞アマチュア部門東京ゲームショウ神戸5月11日Googleロゴみつけもの恵那市岩村プロジェクションマッピングバルサマン愛知淑徳大学ドラゴンゲートゴールデンウィークGATEDRAGONOhanaメールマガジンBloom*BlockBloosumTeamイマジンカップ尾花大輔第7回若年者ものづくり競技大会GAMETOKYO東京ゲームショウ2012NHNStation敢闘賞ツインメッセ静岡静岡県ロゴマーク迎春2011年度Futuredocomoドコモ3JAPANWORLDCUPFLV8341-3:2010XJISFLAVER3.0名古屋市中村区放課後のプレアデスキルターズフェスティバル2011笈瀬本通商店街ウェブリテラシー協会Slimbox2田中稚妃呂横浜デジタルアーツGoogleAnalytics石井研二大西健太LazyforPluginLoadSUBARUGAINAXトライデントカレッジUntitled!!!!!!!!英国王のスピーチablogcmsフォトアルバムMagnum北岡弘至伊達千代卒業制作・研究発表会2011ぬいぐるみのラパン愛知県立芸術大学キルト展日本の四季中部国際空港卒業・修了制作展円JOY!mapKtaistyleCustomSmilies絵文字SHOWベースキャンプ名古屋10日でおぼえるLinuxサーバー入門教室卒業研究制作展最優秀賞ジョルテトライデント合同企業説明会F81教室DesignergoogleGWDKDDIHTML5スマートアプリ&クリエイティブコンテストNCF2013美術大学芸術大学AWARDNTTドコモ東海支社list-style-typeモテ声ボーダーlist-itemdisplayparseInt()parseFloat()串本八鬼山熊野古道マカベン本州最南端那智の大滝和歌山中華そば熊野三山大門坂名古屋マークアップ勉強会table道家陽介concrete5栗山聡一備忘録中村健太ランチテーブル宇野剛志石原愛実COMMUNICATIONNEXTウェブアクセシビリティモリサワFacebookたこ焼きパーティみんなのICT佐藤ねじ木下健太郎就職東京Web制作合宿Muse長野IllustratorSVGFacebookページ結果第50回画像をチェックボタンにする張山大祐JQueryThree.jsプレゼンさかなや晴れやか嵐が如く第51回技能五輪全国大会フジ家55麺屋ココイチ高橋雅人カレーラーメン麺やOKWebデザイン演習あいちトリエンナーレ2013Rhizomatiks田代豊たにぐちまことinspiredbyそこにいない。展PARTYPerfumeカメラワーク

メールフォーム

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

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