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


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

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

担当: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年生進級展「お母さんの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回若年者ものづくり競技大会閉会式
学生ブログリンク
<1年生ブログ>

WF1でBLOG 2017

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

トライデントコンピュータ専門学校Webデザイン学科WCAN業界研究技能五輪ウェブデザイン職種ウェブデザイン2013若年者ものづくり競技大会名古屋Webサイト映画ECCコンピュータ専門学校ポートフォリオWinter2009学生ブログWebデザインJavaScript2011Webサイト制作WordPress礒田優かっぱ商店街矢野りん卒業制作展ライトニングトークa-blog入学式技能五輪全国大会2014WordpressNagoyacms石黒雄介テンプレート作成若年者ものづくり大会WebSummerAutumn面白法人カヤック瀬川大勝アクアリングホームページ・ビルダーCGイラスト学科オープンキャンパス体験入学東京研修2010ウェブデザイン技能競技会1年生進級展杉本拓也Flashinhtml5mini2012大阪IIJWeb制作会社GIOJapanHCDアクセス解析ココストア第48回技能五輪全国大会名古屋駅あいちカレーラーメンコンテスト2015Adobe卒業制作CentOSプレゼンテーション水野裕太卒展BananaAd専門学校ラーメンCSS3マール情報デザインフォーラム田中睦翔学生企業訪問99eagleGoogle人間中心設計情報デザイン合同企業展Webワークショップ上村水月gifアニメHTML5ブログパーツ愛知県セントレアプロジェクトSpring成田篤紀ウェブデザイン技能検定カリキュラムoption要素select要素output要素グループ制作textarea要素input要素fieldset要素label要素legend要素Box企業課題LikeCMS学生インタビュー知多みるくまぼろしうぇーぶアンティー・ファクトリーcanvasFICCサイバーエージェントparticle1年生作品展真鍋大度Analytics長屋めぐみform要素塚本碧中日ドラゴンズスマホアプリナゴヤドームWEBサイト制作者のためのHCDの理解in名古屋Webデザインギャラリーモンキーワークススマートフォン2008鷹野雅弘茂森仙直トライデント合同企業展産学協同ワークショップ5T(ファイヴティー)堀尾真衣和みCalendarAdventカメラ写真WordFes笈瀬本通りレイアウトビジュアルエディタたこ焼き空気人形名商連佐藤歩CSSiPhone結果発表イラストマップUXForumトライデント作品集SEO岩手県会社訪問幕張メッセjQuery静岡Webクリエイター能力認定試験WordCampRunstantCSSNite就職活動閉館日名古屋市科学館謹賀新年ポートフォリオサイト名古屋開府400年祭熊谷佳紀林田実樹導入授業MarkupサーティファイF-siteDTPWORLDAppleStoreコミュニケーションデザインワークショップ阿部淳也メ~テレ豊田市美術館卒業式情報デザイン基礎初期設定アサココ!戸田芳裕ディプロスウェブデザイン技能競技大会Yahoo!JapanjbstyleWasThereThenSalsa中部国際空港株式会社チタハン10IA2010キックオフセミナーブラザー工業株式会社CODEポスターデザイン・コンペティション小林信次WEBサイト制作者のためのHCD(人間中心設計)の理解夢プロジェクト2009・成果報告会Andrioidウェブリテラシー協会第一回セミナー名古屋メディアボンド新横浜ラーメン博物館細川太郎広島弁柴乃櫂人箱根合宿1→10design横浜デジタルアーツシナリオ会社見学森川眞行ペルソナ横浜中華街タロヲ商店街AndITCIRCUS金シャチ商店街NIKE慶華飯店GoogleAnalytics石井研二カメラワーク浜松株式会社アクアリング愛知商業高校ポスターデザイン・コンペディション鎌倉iPhone4グラフィクデザインWEBサイト制作者のためのHCDの理解ネスカフェゴールドブレンド大沢たかお名古屋クリエイターフットサルCODE新世界求人フナ犬ポートピア名古屋松坂屋美術館みの治商店スタジオジブリ・レイアウト展知多半島プチ・フレーズTwitterプロ野球技能五輪予選商店サイト制作unoplusプロトコル分析伊藤頼子名チャリ名駅経済新聞三蔵サーバーGAアクセシビリティ名古屋グランパス福みつ増田悟名古屋サイト改善研究会中級編WCAN46TAFFUltimateYORKE.道頓堀ビジュアルデベロップメントナゴヤ笈瀬本通武豊アニメーションフェスティバル名古屋おもてなし武将隊武将都市IA餃子ITホワイトボックス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日本電子専門学校バルサマンFlexbox味仙CGスペシャリスト松田洋樹FlexibleBox岡田陽一アクティビティシナリオ源賢司UXデザインDmm.com3DCG東京コスモアクセシビリティからはじめる、WebサイトのUXデザイWebアクセシビリティVelocity.jsScrollMagic建設経営者倶楽部ワクワク建設タウンクリスマス熊﨑彩第53回KaizenPlatform職業実践専門課程レスポンシブWebデザインウェブアートデザイナーうぇ~~~~~~~ぶ出席率学位合同制作合同制作合宿専門士ワイヤーフレーム仕事高校14グロースハッカーグロースハック採用担当者の心に響くポートフォリオアイデア帳UIバイドゥ平野健太郎Scrollmagic八木智章keygen要素optgroup要素type属性紅茶専門店Liyn-andatalist要素button要素麺の匠オリエンタル第52回技能五輪全国大会HTMLアイテムカンパニーネイルサロンマウア山田拓生加藤ひとみ西岡克真Animation青山敬司愛知県選手団授業アイチータ結団式親孝行新年のご挨拶アップルップルマークアップエンジニア森田霞Highlighter木村哲朗フロントエンドエンジニア竹中民男夏麺フェア飯田淳介SyntaxCrayonCSS3&jQueryで作る名古屋駅麺通りNTTドコモ東海NCF2014スマートフォンサイトUI図鑑インターンシップ2015年度新入生WF1でBLOG合宿懇親会Webプログラミング初級講座appendChild()HTMLCollectionNodeListマイクロソフト進級展ECMAScriptライデントコンピュータ専門学校お母さんの二度見展学習美大芸大インスタグラム醐りょういな世Instagramドラマ水野怜美株式会社LIG料理ES6ES2015梅澤朝樹株式会社エイチーム山川綾那鈴木雄太衣台高校尾鷲高校夏休みの課題ノートPC貸与出張講座フォトアルバムスタジオディテイルズWCAN2017Springv4.0.1SyntaxHighlighter制作合宿Proxy学校服部友厚佐藤洋介ターミナル驛麺通り再進学河地芳明沼田啓助カークスヴィルIA/UXプラクティスAO入試プログラムクイズJSFiddleJSBinCodePen平野秀幸坂本貴史WebプログラマーWebデザイナーWebディレクターWeb制作のおしごと坂本邦夫原一浩制作実績津田直明2016PlunkerCodeplyトライデント祭り夏季閉館日夏休みジムナストコロン沖縄学生作品集学園祭情報系Monaca日清食品グループタカガールサイトクイズ駅麺通り涼麺jsdo.itIndependenceDay:水曜日のカンパネラプラネタリアンResurgenceAO特別授業ゲーム大賞アマチュア部門東京ゲームショウ神戸神戸国際展示場Ohanaメールマガジン敢闘賞ツインメッセ静岡静岡県ロゴマーク鈴木ゴールデンウィークGATEDRAGONドラゴンゲートGoogleロゴ5月11日プラネタリウムライアン・ウッドワードマーサ・グレアム迎春2011年度SHOWGAMETOKYO東京ゲームショウ2012ベースキャンプ名古屋Facebookページ長野IllustratorSVG第7回若年者ものづくり競技大会尾花大輔StationFuturedocomoドコモNHNイマジンカップBloom*BlockBloosumTeam愛知淑徳大学みつけもの放課後のプレアデスキルターズフェスティバル2011笈瀬本通商店街名古屋市中村区SUBARUGAINAXキルト展日本の四季中部国際空港FLAVER3.0FLVforPluginLoadLazySlimbox2ウェブリテラシー協会8341-3:2010XJIS愛知県立芸術大学卒業・修了制作展Magnum北岡弘至伊達千代DTPの勉強部屋JAPANWORLDCUP3恵那市岩村プロジェクションマッピングスクラップブックablogcmsKtaistyleCustomSmilies絵文字円JOY!mapぬいぐるみのラパン卒業制作・研究発表会2011トライデントカレッジUntitled!!!!!!!!英国王のスピーチ結果第50回parseFloat()parseInt()Designergoogle備忘録栗山聡一ランチ中村健太道家陽介concrete5GWDF81教室KDDIHTML5スマートアプリ&クリエイティブコンテストモテ声ボーダーlist-itemジョルテ最優秀賞トライデント合同企業説明会10日でおぼえるLinuxサーバー入門教室卒業研究制作展石原愛実宇野剛志丸田屋丸高アロチ本家和歌山中華そば岩出本店スパルタキャンプ青空学区名古屋市営地下鉄柏木祥太熊野三山大門坂マカベン名古屋マークアップ勉強会tableテーブル熊野古道八鬼山那智の大滝本州最南端串本displaylist-style-typeThree.js木下健太郎就職東京プレゼンたにぐちまことinspiredRhizomatiks田代豊佐藤ねじみんなのICTMuse画像をチェックボタンにする張山大祐JQueryWeb制作合宿たこ焼きパーティウェブアクセシビリティモリサワFacebookbyPerfumeCOMMUNICATIONNEXT高橋雅人カレーラーメンAWARD芸術大学NTTドコモ東海支社NCF2013美術大学麺やOK麺屋ココイチWebデザイン演習あいちトリエンナーレ2013そこにいない。展PARTY第51回技能五輪全国大会嵐が如くフジ家55さかなや晴れやか大西健太

メールフォーム

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

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