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


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

検索フォーム
Yahoo!基金
台風21号で被災されたみなさま、また、北海道を震源とする地震で被災されたみなさまに、心からお見舞い申し上げます。
プロフィール

担当: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年生進級展「WWW(Welcome to Web World)」を開催しました。
1年生進級展「お母さんの2度見展」を開催中です。
「うぇ~~~~~~~ぶ2016」終了しました。ご来場ありがとうございました!
「うぇ〜〜〜〜〜ぶ!!」終了。ご来場ありがとうございました!
<コンテスト>
「第1回 専門学校 HTML5作品アワード」技術賞を受賞しました!
NCF2017でグランプリを受賞しました!
信州アプリコンテスト0 [ゼロ] KDDI賞受賞!
NCF2014(スマホアプリ開発テーマ2) 準グランプリ獲得!
最優秀賞!HTML5スマートアプリ&クリエイティブコンテスト
NCF2013グランプリ受賞!!!
<Webサイト制作>
ミス・ユニバース・ジャパン岐阜大会公式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回若年者ものづくり競技大会閉会式
学生ブログリンク
タグリスト 改

トライデントコンピュータ専門学校Webデザイン学科WCAN業界研究技能五輪ウェブデザイン職種ウェブデザインWebサイト映画若年者ものづくり競技大会2013名古屋ECCコンピュータ専門学校ポートフォリオ学生ブログWinter2009WebデザインWebサイト制作技能五輪全国大会WordPressJavaScript2011かっぱ商店街礒田優cms2014入学式a-blog矢野りんNagoyaWordpressライトニングトーク卒業制作展Webアクアリング1年生進級展オープンキャンパステンプレート作成CGイラスト学科ホームページ・ビルダーSummer面白法人カヤック瀬川大勝石黒雄介AutumnCSS若年者ものづくり大会アクセス解析大阪HCDあいちカレーラーメンコンテスト体験入学第48回技能五輪全国大会合同企業展IIJinGIO卒展Web制作会社mini20152010ココストアFlash東京研修html5卒業制作ウェブデザイン技能競技会杉本拓也2012JapanAdobe名古屋駅GooglegifアニメWebワークショップ専門学校佐藤歩サイバーエージェント人間中心設計田中睦翔HTML5学生インタビューCSS3水野裕太成田篤紀情報デザインプレゼンテーション学生情報デザインフォーラムjQueryCentOSマール閉館日ラーメンウェブデザイン技能検定ブログパーツ愛知県ウェブデザイン技能競技大会99eagle北濱大輔セントレアプロジェクトSpringグリッドレイアウトdisplay:gridGridLayout上村水月企業訪問BananaAd1年生作品展スマホアプリNTTドコモ東海うぇーぶトライデント産学協同canvasAnalyticsまぼろし名古屋市科学館select要素ポートフォリオサイト5T(ファイヴティー)阿部淳也iPhone長屋めぐみコミュニケーションデザインワークショップCOMMUNICATIONNEXTCMSカリキュラムYahoo!Japanメ~テレ林田実樹ビジュアルエディタ幕張メッセPluginSEOマークアップエンジニアCalendarAdventparticle空気人形就職活動堀尾真衣卒業式会社訪問option要素名商連UXLikeBoxForum写真岩手県ワークショップカメラ笈瀬本通りレイアウトトライデント合同企業展ナゴヤドーム中日ドラゴンズ知多みるく作品集スマートフォンWEBサイト制作者のためのHCDの理解in名古屋戸田芳裕塚本碧モンキーワークスinput要素和み愛知県選手団FICCtextarea要素CSSNite静岡イラストマップlegend要素fieldset要素たこ焼きアンティー・ファクトリー真鍋大度Webデザインギャラリー結果発表label要素form要素WordFesoutput要素茂森仙直Webクリエイター能力認定試験鈴木優太Runstant鷹野雅弘制作合宿フォトアルバム夏休みStoreアサココ!初期設定豊田市美術館導入授業出張講座サーティファイWordCampWebデザイナーディプロス進級展名古屋開府400年祭Webリテラシー謹賀新年企業課題株式会社LIG情報デザイン基礎DTPWORLDMarkupグループ制作2008水野怜美トライデント祭り夏季閉館日F-sitejbstyleApple熊谷佳紀FLASHアクセシビリティFLEXサーバーIAYORKE.商店街シナリオペルソナiPhone4広島弁柴乃櫂人PHP1→10designデザイナーのためのプログラミング入門金シャチ商店街名古屋メディアボンドビジュアルデベロップメントタロヲ細川太郎MAXSakaeネスカフェゴールドブレンド大沢たかおフナ犬ポートピア名古屋デッサンプロ野球求人新世界ActionScript基礎プレゼン演習HTML+CSS基礎造形基礎道頓堀DesignCS4Night佐藤可士和技能五輪予選WEBサイト制作者のためのHCDの理解プロトコル分析College中村勇吾unoplus知多半島サムライスタジオジブリ・レイアウト展松坂屋美術館TEXTURE伊藤頼子鳥取砂丘丹下紘希石井研二カメラワークGoogleAnalyticsHPデザイン01横浜デジタルアーツデザインコンテストNamArtlessCODEポスターデザイン・コンペティション小林信次増田悟Qubibi中部国際空港株式会社株式会社アクアリングブラザー工業株式会社CONTEST田中稚妃呂8341-3:2010XJISFLVFLAVER3.0カンファレンス名古屋市中村区ウェブリテラシー協会ウェブデザイン部門LoadLazy大西健太THEWEBSlimbox2for名古屋サイト改善研究会W+KTokyo(+CRUZ)名古屋クリエイターフットサルASIA笈瀬本通CODEポスターデザイン・コンペディションSIGGRAPHグラフィクデザインVideopuppetry鳥取WEBサイト制作者のためのHCD(人間中心設計)の理解Andrioid愛知県美術館アンドリュー・ワイエスチタハン10名古屋グランパスデザインXRAY2008WinterGAUltimateStefan愛知商業高校名チャリ中級編名駅経済新聞Sagmeister商店サイト制作WebDirectionEast'08みの治商店Twitter三蔵プチ・フレーズHelveticaデザインのへそITCIRCUS武豊町ウルトラ展Autumin黒い太陽ヤノベケンジ笈瀬本通商店街カスタマイズセミナーブランディングカラーライブペイントITホワイトボックスインターネットスキル認定普及協会PHP勉強会世界のCMフェスティバルYahoo!ストリートビューJAPANインターネットクリエイティブアワードHCDプロセスCALENDAR映画のオープニング閉会式ゲームマクロマリオネット日本ファルコムごはんとFlashマークアップ演習音楽ファルコム音楽フリー宣言KyotodotFesUNIQLOwonderflFlash-Games荒俣宏ゆるキャラ国家検定西田幸司アニメーションMozorama電信柱エレミの恋escalatorウサビッチモーション演習animation後期コマ撮りアニメCMS特集今井佳子アイディグラフィックスグラフィックデザインガンダム入賞ソバットシアターCG・イラストコンテスト第4回アックゼロヨン・アワードActionScript食品サンプル是枝裕和監督人喰いの大鷲トリコ東京ゲームショウ2009ヱヴァンゲリヲン新劇場版:破大富豪スコアシート旭食品サンプル製作所ナゴヤデザインウィーク2009LPOカナバングラフィックス富岡聡ギレン総帥学科UNIQLOCKCREAM□□□switch夢プロジェクト2009・成果報告会ウェブリテラシー協会第一回セミナーSalsaIA2010キックオフセミナーCOMPLETEADVENTCHILDRENWasThereUTZOOMNIKE慶華飯店AndLabuatThenTokyoVII浜松TAFF'09名古屋おもてなし武将隊武豊アニメーションフェスティバル広告批評WCAN×CSSNite武将都市西村真里子TAFF学生参加福みつ餃子FANTASYFINALWCAN46アートアニメーション新横浜ラーメン博物館横浜中華街デュエル・マスターズ長谷川恭久スーパーエレメンツイラストコンテストヨウイチ情報デザイン教育勉強会ウェブDeBLOGデコクレ山崎デザイン事務所教育勉強会ロゴ公募FITC#infoedu小野裕子山村浩二コピーライティングペルソナ/シナリオ法おかだよういちBlog日本電子専門学校「ヤノベケンジ-ウルトラ」展鎌倉会社見学箱根合宿森川眞行横浜デジタルアーツ専門学校3校合同発表会GENOウィルスセキュリティ浅野智ペルソナ&シナリオ法クリ博就職フェスタワークスコーポレーションナゴヤ東京ゲームショウ合同制作合同制作合宿専門士学位合宿懇親会坂本邦夫WebプログラマーWebディレクターWeb制作のおしごと出席率職業実践専門課程バイドゥ平野健太郎ポートフォリオアイデア帳採用担当者の心に響くUI仕事レスポンシブWebデザインウェブアートデザイナーうぇ~~~~~~~ぶワイヤーフレーム原一浩2016CodeplyPlunkerJSFiddleJSBinjsdo.it涼麺Day:Independenceクイズ駅麺通りCodePenプログラムクイズ平野秀幸坂本貴史制作実績津田直明IA/UXプラクティスカークスヴィルAO入試河地芳明沼田啓助高校14飯田淳介フロントエンドエンジニア木村哲朗アップルップル夏麺フェア竹中民男Velocity.jsScrollMagicScrollmagic八木智章森田霞HighlighterインターンシップスマートフォンサイトUI図鑑CSS3&jQueryで作る名古屋駅麺通りWF1でBLOG新入生SyntaxCrayon2015年度Webアクセシビリティアクセシビリティからはじめる、WebサイトのUXデザイUXデザインDmm.com岡田陽一FlexibleBox源賢司アクティビティシナリオグロースハッカーグロースハックPlatformKaizenFlexbox味仙熊﨑彩第53回ワクワク建設タウン建設経営者倶楽部クリスマス東京コスモCGスペシャリスト松田洋樹3DCGResurgenceプラネタリアン信州アプリコンテスト[ゼロ]アプリコンテストミス・ユニバース・ジャパン岐阜大会フォントおじさんNCF2017Webアプリ友章堀川志維安藤関口浩之久保怜也出身高校D3.jsスクラップブック夏休みの課題AWARDS2017ContentsofTableTOCWWW(Welcometo出前授業青山高校新城高校冨田伴成東京ゲームショウ2018VRカルタ沖縄県第56回GOOculusイークリエイト藤井英一期末テストWebデザインスペシャルデー北川パーヤンWorld)脆弱性なんと読む?韓国JIHYEHEOホ・ジヘノートPC貸与尾鷲高校インスタグラム醐りょういな世InstagramドラマNodeList美大芸大料理驛麺通り再進学ジムナストコロン日清食品グループタカガールサイト水曜日のカンパネラ沖縄学生作品集学園祭情報系MonacaHTMLCollectionappendChild()服部友厚佐藤洋介ターミナル学校スタジオディテイルズ鈴木雄太衣台高校梅澤朝樹株式会社エイチーム山川綾那ProxyWCAN2017Springお母さんの二度見展学習マイクロソフトWebプログラミング初級講座ECMAScriptES6v4.0.1SyntaxHighlighterES2015NCF2014新年のご挨拶Bloom*BlockBloosumTeamイマジンカップ尾花大輔第7回若年者ものづくり競技大会SHOWGAMETOKYO東京ゲームショウ2012NHNStationツインメッセ静岡静岡県ロゴマークメールマガジン敢闘賞迎春Futuredocomoドコモ2011年度ベースキャンプ名古屋FacebookページみんなのICTウェブアクセシビリティモリサワFacebook佐藤ねじ東京プレゼンThree.js木下健太郎就職たこ焼きパーティWeb制作合宿結果長野IllustratorSVG第50回JQueryMuse画像をチェックボタンにする張山大祐Ohanaゲーム大賞アマチュア部門英国王のスピーチ卒業制作・研究発表会2011ぬいぐるみのラパンKtaistyleUntitled!!!!!!!!トライデントカレッジ伊達千代DTPの勉強部屋ablogcmsCustomSmilies絵文字中部国際空港GAINAXSUBARU放課後のプレアデス日本の四季キルト展円JOY!map卒業・修了制作展愛知県立芸術大学北岡弘至Magnumライアン・ウッドワードマーサ・グレアム5月11日Googleロゴプラネタリウム鈴木2018神戸神戸国際展示場ゴールデンウィークGATEプロジェクションマッピングバルサマン3JAPANWORLDCUP恵那市岩村みつけものDRAGONドラゴンゲート愛知淑徳大学たにぐちまこと田代豊丸高アロチ本家和歌山中華そば熊野三山丸田屋岩出本店青空学区名古屋市営地下鉄柏木祥太スパルタキャンプ大門坂那智の大滝名古屋マークアップ勉強会tableテーブル宇野剛志マカベン熊野古道本州最南端串本八鬼山特別授業AOdatalist要素keygen要素optgroup要素type属性button要素HTML親孝行麺の匠オリエンタル第52回技能五輪全国大会紅茶専門店Liyn-anアイテムカンパニー山田拓生加藤ひとみ西岡克真Animation青山敬司結団式ネイルサロンマウア授業アイチータ石原愛実ランチ麺やOK麺屋ココイチフジ家55さかなやカレーラーメン高橋雅人NCF2013美術大学芸術大学AWARD晴れやか嵐が如くPerfumebyinspiredRhizomatiksPARTYそこにいない。展第51回技能五輪全国大会Webデザイン演習あいちトリエンナーレ2013NTTドコモ東海支社list-style-typeparseInt()DesignergoogleGWDparseFloat()備忘録中村健太道家陽介concrete5栗山聡一F81教室トライデント合同企業説明会HTML5スマートアプリ&クリエイティブコンテストモテ声ボーダーlist-itemdisplayKDDIジョルテ10日でおぼえるLinuxサーバー入門教室卒業研究制作展最優秀賞キルターズフェスティバル2011

メールフォーム

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

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