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

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

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

最終更新:2020.01.16Webサイト制作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 ※これを押すと送信されます。


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

検索フォーム
新型コロナウイルス感染症に関連する関係省庁のお役立ち情報

首相官邸のWebサイト内「新型コロナウイルス感染症に関連する関係省庁のお役立ち情報」へのリンクです。

プロフィール

担当: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デザインWinter1年生進級展2009Webサイト制作JavaScript2011技能五輪全国大会WordPressかっぱ商店街卒業制作展入学式オープンキャンパスアクアリング礒田優2014ライトニングトークWordpressアクセス解析Nagoyaa-blog卒展矢野りんcmsWeb石黒雄介卒業制作Summer若年者ものづくり大会体験入学ホームページ・ビルダー瀬川大勝テンプレート作成合同企業展Autumn面白法人カヤックWeb制作会社CGイラスト学科CSSウェブデザイン技能競技会HTML5mini杉本拓也閉館日大阪あいちカレーラーメンコンテストhtml5in学生インタビューFlash佐藤歩名古屋駅HCDAdobeウェブデザイン技能競技大会ココストアIIJ東京研修20122010Japanプレゼンテーション2015GIO第48回技能五輪全国大会北濱大輔ラーメンdisplay:gridウェブデザイン技能検定プロジェクトGridLayout学生林田実樹gifアニメBananaAd制作合宿情報デザインフォーラム夏季閉館日トライデント祭りフォトアルバムjQueryCSS3セントレア99eagle上村水月サイバーエージェント夏休みブログパーツグリッドレイアウト2018情報デザインWebワークショップGoogleWebデザインギャラリー専門学校UX愛知県SpringCentOS水野裕太Webクリエイター能力認定試験人間中心設計企業訪問COMMUNICATION田中睦翔マールNEXT成田篤紀鷹野雅弘写真label要素茂森仙直幕張メッセマークアップエンジニア結果発表form要素fieldset要素就職活動空気人形和み会社訪問株式会社LIG水野怜美Yahoo!Japanドラマワークショップサーティファイモンキーワークスカメラ沖縄アップルップル初期設定AWARDスマートフォンWebデザイナーカリキュラムCSSNiteCMSCalendarRunstantAnalyticsSEOlegend要素5T(ファイヴティー)2008飯田淳介愛知県選手団iPhoneForumフロントエンドエンジニアAdventモリサワイラストマップ笈瀬本通りたこ焼きトライデントナゴヤドーム塚本碧岩手県メ~テレLikeアサココ!NTTドコモ東海スマホアプリ鈴木優太導入授業BoxディプロスWEBサイト制作者のためのHCDの理解in名古屋WordCamp中日ドラゴンズDTPWORLD静岡output要素select要素StoreAppleoption要素企業課題textarea要素ビジュアルエディタFICCエイチーム長屋めぐみ情報デザイン基礎謹賀新年真鍋大度アンティー・ファクトリーinput要素Webリテラシー名古屋市科学館知多みるくコミュニケーションデザインワークショップウェブアクセシビリティjbstyle阿部淳也熊谷佳紀出張講座卒業式canvas作品集particleWordFes産学協同名商連進級展学習ES2015ES6グループ制作ポートフォリオサイトMarkupWebアプリまぼろし信州アプリコンテスト[ゼロ]Plugin豊田市美術館1年生作品展うぇーぶ堀尾真衣アプリコンテストレイアウト2017名古屋開府400年祭ウェブDeBLOG久保怜也トライデント合同企業展戸田芳裕F-siteタロヲ大沢たかお商店街スタジオジブリ・レイアウト展松坂屋美術館unoplus技能五輪予選ネスカフェゴールドブレンド知多半島ポートピア名古屋フナ犬プロ野球WEBサイト制作者のためのHCDの理解プロトコル分析サーバーアクセシビリティ名古屋メディアボンドIAYORKE.伊藤頼子ビジュアルデベロップメント金シャチ商店街CODEポスターデザイン・コンペティション放課後のプレアデスキルターズフェスティバル2011笈瀬本通商店街名古屋市中村区SUBARUGAINAXキルト展日本の四季中部国際空港FLAVER3.0FLVforLoadLazySlimbox2ウェブリテラシー協会8341-3:2010XJIS愛知県立芸術大学卒業・修了制作展伊達千代DTPの勉強部屋ablogcms北岡弘至Magnumバルサマン3JAPANWORLDCUPトライデントカレッジCustomSmilies絵文字円JOY!mapKtaistyleぬいぐるみのラパンUntitled!!!!!!!!英国王のスピーチ卒業制作・研究発表会2011大西健太田中稚妃呂名古屋クリエイターフットサル笈瀬本通名古屋グランパスCODEポスターデザイン・コンペディションみの治商店Twitterグラフィクデザインチタハン10WEBサイト制作者のためのHCD(人間中心設計)の理解シナリオペルソナ1→10designiPhone4広島弁AndrioidITCIRCUS柴乃櫂人三蔵プチ・フレーズブラザー工業株式会社中部国際空港株式会社求人株式会社アクアリングカメラワーク横浜デジタルアーツGoogleAnalytics石井研二小林信次増田悟GAUltimate商店サイト制作愛知商業高校名チャリ名古屋サイト改善研究会中級編名駅経済新聞細川太郎情報デザイン教育勉強会BlogUTZOOMLabuatTokyo「ヤノベケンジ-ウルトラ」展ワークスコーポレーション山村浩二デコクレセキュリティGENOウィルスCOMPLETECHILDRENTAFF'09広告批評WCAN×CSSNite西村真里子武豊町アートアニメーションADVENTVIIFANTASYFINAL□□□switch日本ファルコムActionScriptヱヴァンゲリヲン新劇場版:破西田幸司国家検定食品サンプル旭食品サンプル製作所ウサビッチカナバングラフィックス富岡聡学科インターネットスキル認定普及協会ライブペイント荒俣宏ファルコム音楽フリー宣言音楽ゲームUNIQLOCALENDAR黒い太陽ウルトラ展ヤノベケンジカスタマイズセミナープレゼン演習ActionScript基礎HelveticaSagmeisterStefanW+KTokyo(+CRUZ)デザインのへそWebDirectionEast'08ASIASIGGRAPHXRAY2008WinterQubibiArtlessTHEWEBウェブデザイン部門カンファレンスCONTEST01Nam丹下紘希HPデザインデザインコンテストVideopuppetry鳥取TEXTURE中村勇吾佐藤可士和SakaeサムライCS4HTML+CSS基礎造形基礎デッサンDesignNightCollege愛知県美術館アンドリュー・ワイエスデザイン鳥取砂丘PHPデザイナーのためのプログラミング入門FLEXFLASHMAX電信柱エレミの恋コマ撮りアニメクリ博就職フェスタペルソナ&シナリオ法浅野智おかだよういち3校合同発表会横浜デジタルアーツ専門学校森川眞行会社見学鎌倉日本電子専門学校ペルソナ/シナリオ法プロジェクションマッピングコピーライティング小野裕子#infoedu教育勉強会山崎デザイン事務所スーパーエレメンツヨウイチイラストコンテストデュエル・マスターズ長谷川恭久箱根合宿横浜中華街WCAN46福みつ餃子浜松TAFF武豊アニメーションフェスティバル道頓堀ナゴヤ武将都市名古屋おもてなし武将隊IA2010キックオフセミナー夢プロジェクト2009・成果報告会AndNIKE慶華飯店新横浜ラーメン博物館ThenThereウェブリテラシー協会第一回セミナーSalsaWasロゴ公募FITC第4回アックゼロヨン・アワードCG・イラストコンテストモーション演習animationLPOギレン総帥人喰いの大鷲トリコ是枝裕和監督ナゴヤデザインウィーク2009UNIQLOCKescalatorアニメーションアイディグラフィックス学生参加CMS特集ソバットシアター今井佳子グラフィックデザインMozorama後期入賞ガンダム東京ゲームショウ2009大富豪スコアシートゆるキャラFlash-GameswonderflKyoto閉会式映画のオープニングCREAMごはんとFlashマークアップ演習マクロマリオネットdotFesHCDプロセスYahoo!世界のCMフェスティバルITホワイトボックスPHP勉強会JAPANインターネットクリエイティブアワードストリートビューブランディングAutuminカラー新世界長野WCAN2017SpringProxyv4.0.1SyntaxHighlighterECMAScript学校ターミナル鈴木雄太スタジオディテイルズ服部友厚佐藤洋介お母さんの二度見展マイクロソフトInstagram料理インスタグラム醐りょう芸大美大Webプログラミング初級講座appendChild()HTMLCollectionNodeList山川綾那株式会社エイチームフォントおじさんミス・ユニバース・ジャパン岐阜大会関口浩之堀川友章安藤志維NCF2017安藤WWW(Welcome友章堀川志維ContentsofノートPC貸与夏休みの課題尾鷲高校衣台高校梅澤朝樹スクラップブックD3.jsTableTOCAWARDS出身高校いな世驛麺通り2016津田直明原一浩坂本邦夫Webプログラマー制作実績坂本貴史沼田啓助カークスヴィルIA/UXプラクティス平野秀幸WebディレクターWeb制作のおしごと職業実践専門課程出席率レスポンシブWebデザインウェブアートデザイナーうぇ~~~~~~~ぶ学位専門士懇親会合宿合同制作合同制作合宿河地芳明AO入試タカガールサイト日清食品グループ水曜日のカンパネラプラネタリアンResurgenceジムナストコロン学生作品集再進学学園祭情報系MonacaDay:IndependenceJSFiddleJSBinCodePenプログラムクイズPlunkerCodeplyクイズ駅麺通り涼麺jsdo.ittoWorld)落合祐介信州アプリコンテストゼロ杉浦麻紀ライフスタイル冬休み足立丈也、平子卓哉、増田隼也eatスポーツアナリティクスエペフェンシングmarker仙直茂森株式会社アンティー・ファクトリー松本渚PhotoshopCS6祐司株式会社スタメン髙橋コンテストソレコン☆ポスコン2019茜音株式会社LIGHTzclasses2020進級制作フロントエンドマイクロインタラクションICSOriginalTshirt.st株式会社COTS2020アカデミー賞企業賞進級制作展第3回専門学校HTML5作品アワード池田泰延MILKあけましておめでとう新年2019年令和2年HappyNewメンバーズ三瓶Year髙橋茜音STUDIOOculusGOVRカルタ東京ゲームショウ2018出前授業第56回沖縄県第56回技能五輪全国大会srcsetsourcepicture青山高校新城高校脆弱性なんと読む?韓国期末テストWebデザインスペシャルデー北川パーヤンホ・ジヘHEO冨田伴成イークリエイト藤井英一JIHYEEC事業cyma日本総合ビジネス専門学校株式会社MTG2020新卒線の群生Figma企業見学新入生オリエンテーションLIGCBCTBSわたし、定時に帰ります。ツールUIデザインコーヒー用品前川元成NextDoor斉藤洸貴メーカー・ブランド平成31年牧野史門桝田草一株式会社サイバーエージェントあけおめワイヤーフレーム仕事PARTYそこにいない。展Perfumebyinspiredあいちトリエンナーレ2013Webデザイン演習さかなや晴れやか嵐が如く第51回技能五輪全国大会Rhizomatiks田代豊みんなのICT佐藤ねじFacebookたこ焼きパーティWeb制作合宿東京就職たにぐちまことプレゼンThree.js木下健太郎フジ家55麺屋ココイチ卒業研究制作展10日でおぼえるLinuxサーバー入門教室最優秀賞ジョルテKDDIトライデント合同企業説明会F81教室parseInt()DesignergoogleGWDHTML5スマートアプリ&クリエイティブコンテストモテ声ボーダー芸術大学高橋雅人カレーラーメン麺やOK美術大学NCF2013list-itemdisplaylist-style-typeNTTドコモ東海支社Muse画像をチェックボタンにするゲーム大賞アマチュア部門Ohana東京ゲームショウ神戸神戸国際展示場メールマガジンロゴマーク迎春敢闘賞ツインメッセ静岡静岡県鈴木DRAGONGATEドラゴンゲート愛知淑徳大学みつけものゴールデンウィークGoogleロゴプラネタリウムライアン・ウッドワードマーサ・グレアム5月11日2011年度ドコモFacebookページSVGベースキャンプ名古屋SHOWGAMEIllustratorパラサイト張山大祐JQuery第50回結果TOKYO東京ゲームショウ2012NHNStationFuturedocomoイマジンカップTeam第7回若年者ものづくり競技大会尾花大輔Bloom*BlockBloosumparseFloat()備忘録ScrollmagicScrollMagic八木智章竹中民男夏麺フェアVelocity.jsWebアクセシビリティ第53回ワクワク建設タウン建設経営者倶楽部アクセシビリティからはじめる、WebサイトのUXデザイ木村哲朗森田霞スマートフォンサイトUI図鑑インターンシップCSS3&jQueryで作る名古屋駅麺通りNCF2014WF1でBLOG新入生HighlighterSyntaxCrayon2015年度熊﨑彩クリスマスグロースハッカー14グロースハックPlatformKaizen高校採用担当者の心に響くUIバイドゥ平野健太郎ポートフォリオアイデア帳アクティビティシナリオ源賢司CGスペシャリスト松田洋樹3DCG東京コスモ味仙FlexboxUXデザインDmm.com岡田陽一FlexibleBox新年のご挨拶親孝行大門坂熊野三山那智の大滝本州最南端串本和歌山中華そばアロチ本家スパルタキャンプ岩出本店丸田屋丸高八鬼山熊野古道中村健太ランチ道家陽介concrete5栗山聡一石原愛実宇野剛志マカベン名古屋マークアップ勉強会tableテーブル柏木祥太名古屋市営地下鉄optgroup要素keygen要素type属性紅茶専門店Liyn-anアイテムカンパニーdatalist要素button要素麺の匠オリエンタル第52回技能五輪全国大会HTMLネイルサロンマウア授業AnimationAO特別授業青空学区西岡克真加藤ひとみアイチータ結団式青山敬司山田拓生恵那市岩村

メールフォーム

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

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