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


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

2014.10.24 [金] textarea要素、option要素、select要素、button要素 他のおさらい(form関連要素編③)

涼しくなってきて過ごしやすい季節になりました。学校ではイベントの多い季節でもあり、トライデントコンピュータ専門学校でも学園祭が11月15日(土)に開催されます。

gakuensai2014.jpg

実行委員会も組織され、模擬店やビンゴ大会など楽しい催しなどもありますので、ぜひお越しください。

さて、3回にわけてまとめてきたHTMLのform関連要素ですが、今回で最終になります。
form要素、label要素、fieldset要素、legend要素のおさらい(form関連要素編①) input要素のおさらい(form関連要素編②)

textarea要素

textarea要素は、複数行のテキスト入力欄を作成します。

■属性値

autofocus属性
文書読み込み時、自動的にフォーカスさせます。HTML5
cols属性(初期値は「20」)
テキスト入力欄を表示する際の横幅を文字数で指定します。
dirname属性
送信データの書字方向に関するクエリ値のクエリ名を指定します。
disabled属性
入力コントールを無効にします。
form属性
任意のform要素に付与されたid属性値を指定することで関連付けを行います。HTML5
maxlength属性
入力可能な最大字数を指定します。HTML5
name属性
データが送信される際のクエリ名を指定します。
placeholder属性
ダミーテキスト(プレースホルダ)を設定します。HTML5
readonly属性
読み込み専用にします。(リードオンリー)
required属性
入力を必須にします。HTML5
rows属性(初期値は「2」)
テキスト入力欄を表示する際の高さを文字数で指定します。
wrap属性
入力欄における、折り返しの指定を行います。HTML5
値にsoftを指定すると入力欄の横幅で入力したテキストは自動的に折り返しますが、送信されるクエリには折り返しは反映されません。(初期値)
値にhardを指定すると入力欄の横幅で入力したテキストは自動的に折り返しますが、送信されるクエリにもその折り返しが反映されます。

のように表示されます。

optgroup要素

optgroup要素は、option要素で作成する選択肢をグループ化する際に使用します。 select 要素と、option 要素によって作成されるメニューで、その選択肢を任意のグループにまとめることができます。
これにより視認性や操作性を向上させることができます。

■属性値

label属性(必須属性)
選択肢グループにラベルを指定します。空ではない文字列を指定する必要があります。
disabled属性
この属性を指定された選択肢グループは、選択できない選択肢のグループになります。

option要素

option要素は、select要素で作成するセレクトボックスで入力候補リストの選択肢を指定する際に使用します。HTML5からや、 datalis要素の選択肢としても利用できるようになりました。
disabled属性は、選択肢を無効にする際に使用します。 option要素の親要素となるoptgroup要素にdisabled属性を指定すると、選択肢グループ全体を無効にすることができます。

■属性値

disabled属性
操作を無効にする(disabled)
label属性
選択肢にラベル(項目名)を付ける
selected属性
選択肢をあらかじめ選択済みにする(selected)
value属性
選択肢の値を指定

select要素

select要素は、セレクトボックスを作成する際に使用します。 一般的なブラウザでは、ドロップダウン式のセレクトボックスや、スクロール式のセレクトウィンドウとして表示されます。
select要素ででセレクトボックス全体を囲み、 その中にoption要素を配置して個々の選択肢リストを作成します。さらにそのoption要素の選択肢をoptgroup要素で囲むと、選択肢をグループ化することができます。

■属性値

disabled属性
入力コントールを無効にします。
autofocus属性
文書読み込み時、自動的にフォーカスさせます。HTML5
form属性
任意のform要素に付与されたid属性値を指定することで関連付けを行います。HTML5
multiple属性
複数の選択肢を選択を可能にします。
required属性
該当するselect要素を、必ず選択しなければならないプルダウンメニューとします。
name属性
データが送信される際のクエリ名を指定します。
size属性
閲覧者に表示する選択肢の数を指定します。初期値は、multiple属性が指定されている場合で「4」、multiple属性が指定されていない場合で「1」です。

select要素、optgroup要素、option要素を利用するとこのように表示されます。

datalist 要素

datalist要素は閲覧者に入力候補のデータリストを提供します。入力候補はoption 要素で提供することができます。要素および内包される要素は、画面上に表示されません。
datalist要素に付与された id 属性値とinput要素のlist属性の値を同じにして入力欄とデータリストを関連付けることができます。この場合、datalist要素はサジェストとして機能します。

output要素HTML5

output要素は計算の結果出力を表します。
JavaScript が実行できない環境では出力の表示ができず、output要素の内容が表示されます。

■属性値

form属性
任意のform要素に付与したid属性値を指定することで、そのフォームとoutput要素を関連付けます。
for属性
入力コントロールに付与したid属性値を指定することで、output要素と入力コントロールを関連付けます。
0 100 + =
0 100 + =

keygen要素HTML5

keygen要素は、key generatorの略で、フォーム送信時にキーを発行して暗号化する際に使用します。
UAは公開鍵をサーバに送信し、秘密鍵を閲覧者のローカル環境に保存します。サーバ側でクライアント証明書を生成したい場合などに利用できます。
keytypeパラメータは、生成する鍵の種類を指定します。有効な値は "RSA" (既定値)、"DSA"、"EC" です。name属性とchallenge 属性はすべての場合で必要です。

■属性値

autofocus属性
オートフォーカスする
keytype属性
暗号化の方式をキーワードで指定します。初期値は 「rsa」だが指定できる値はブラウザによる
disabled属性
キーを操作不能にする
form属性
要素と関連付ける
challenge属性
鍵ペアを生成する際に使用されるチャレンジ文字列を指定します。
name属性
キーに名前を付ける

button要素

button要素はボタンを表します。button要素でマークアップすることで、内包するテキストや画像などをボタンとして使用することができます。

■属性値

autofocus属性
自動フォーカスを指定する(autofocus)HTML5
disabled属性
操作を無効にする(disabled)
form属性
どのフォームと関連付けるかを
のid名で指定HTML5
formaction属性
送信先URLを指定HTML5
formenctype属性
送信するデータの形式を指定(application/x-www-form-urlencoded・multipart/form-data・text/plain)(初期値はapplication/x-www-form-urlencoded)HTML5
formmethod属性
送信方法(HTTPメソッド)を指定(get・post)(初期値はget)HTML5
formnovalidate属性
入力されたデータの妥当性を確認しない(formnovalidate)HTML5
formtarget属性
フォーム送信するターゲット先を指定(_blank・_self・_parent・_top・任意のターゲット名)HTML5
name属性
ボタンの名前を指定
type属性
ボタンの種類を指定(submit・reset・button)(初期値はsubmit)
value属性
値を指定

PHPなどサーバーサイドプログラムでシステムを構築する場合、データ入力インターフェースになりますので、すぐに書けるといいのですが、やはり手間ですよね。
そんな時はa-blog cmsのカスタムフィールドメーカーなどを利用して大まかに作ってからカスタマイズするのも良いかもしれません。
参考:a-blog cms の カスタムフィールドメーカーつくりました | maki-o memo

さらに、formを理解するために、PHPを使った簡単なシステムを作ってみようと思います。

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

担当: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業界研究技能五輪ウェブデザイン職種ウェブデザイン若年者ものづくり競技大会2013名古屋WebサイトECCコンピュータ専門学校映画ポートフォリオ2009学生ブログWinterWebサイト制作WebデザインJavaScriptWordPress2011礒田優かっぱ商店街卒業制作展Wordpressa-blog1年生進級展入学式技能五輪全国大会Nagoya矢野りんWebcmsライトニングトーク2014アクアリングSummerアクセス解析面白法人カヤック石黒雄介テンプレート作成瀬川大勝Autumnオープンキャンパス若年者ものづくり大会CGイラスト学科ホームページ・ビルダー第48回技能五輪全国大会2010HCD卒展大阪IIJGIOin杉本拓也あいちカレーラーメンコンテスト2015FlashJapan合同企業展mini体験入学Adobeココストア名古屋駅Web制作会社卒業制作CSS2012東京研修html5ウェブデザイン技能競技会成田篤紀99eagleプロジェクト上村水月BananaAdセントレア愛知県専門学校企業訪問ラーメンSpring情報デザインjQuery学生情報デザインフォーラムGoogleCSS3マールブログパーツウェブデザイン技能検定田中睦翔WebワークショップHTML5プレゼンテーション閉館日CentOS水野裕太人間中心設計gifアニメNTTドコモ東海長屋めぐみselect要素作品集スマホアプリ和み1年生作品展canvasparticleレイアウトまぼろしCOMMUNICATIONうぇーぶNEXToutput要素input要素Advent5T(ファイヴティー)Webデザインギャラリーたこ焼きCalendarForumUXform要素label要素textarea要素option要素Boxlegend要素スマートフォンfieldset要素WordFesCSSNiteカリキュラムSEOCMSjbstyle名古屋開府400年祭Markup空気人形iPhoneカメラ写真ワークショップモンキーワークス結果発表F-site豊田市美術館グループ制作Apple企業課題茂森仙直2008鷹野雅弘Store情報デザイン基礎WordCamp導入授業ディプロスアサココ!DTPWORLDトライデント合同企業展笈瀬本通りコミュニケーションデザインワークショップ阿部淳也就職活動会社訪問メ~テレ卒業式ポートフォリオサイト静岡塚本碧岩手県真鍋大度アンティー・ファクトリーFICCビジュアルエディタPluginWEBサイト制作者のためのHCDの理解in名古屋中日ドラゴンズ名商連トライデントイラストマップナゴヤドーム知多みるく産学協同堀尾真衣Analyticsウェブデザイン技能競技大会戸田芳裕Like名古屋市科学館謹賀新年制作合宿熊谷佳紀林田実樹幕張メッセ進級展初期設定佐藤歩Runstantサイバーエージェント学生インタビューWebクリエイター能力認定試験Yahoo!Japanサーティファイグリッドレイアウトdisplay:gridGridLayout#infoedu教育勉強会小野裕子コピーライティング驛麺通り山崎デザイン事務所いな世ロゴ公募FITC映画のオープニング閉会式マクロマリオネットマークアップ演習CREAMごはんとFlashスーパーエレメンツデュエル・マスターズクリ博就職フェスタペルソナ&シナリオ法浅野智3校合同発表会横浜デジタルアーツ専門学校会社見学鎌倉日本電子専門学校情報系学園祭ヨウイチイラストコンテストゆるキャラウェブDeBLOG情報デザイン教育勉強会おかだよういち再進学ペルソナ/シナリオ法長谷川恭久KyotoUNIQLOCKギレン総帥LPO株式会社LIGナゴヤデザインウィーク2009人喰いの大鷲トリコ是枝裕和監督料理水野怜美第4回アックゼロヨン・アワードアニメーションMozorama芸大escalatoranimationCG・イラストコンテストモーション演習東京ゲームショウ2009大富豪スコアシートブランディングインスタグラムAutuminHCDプロセス醐りょうwonderfl森川眞行dotFesInstagramカラー世界のCMフェスティバルITホワイトボックスPHP勉強会Yahoo!JAPANインターネットクリエイティブアワードストリートビュードラマFlash-Games箱根合宿技能五輪予選クイズunoplusWEBサイト制作者のためのHCDの理解駅麺通りビジュアルデベロップメント伊藤頼子プロトコル分析Independence松坂屋美術館水曜日のカンパネラプロ野球ポートピア名古屋プラネタリアンResurgenceスタジオジブリ・レイアウト展Day:知多半島YORKE.IA柴乃櫂人広島弁iPhone4ITCIRCUS涼麺toWEBサイト制作者のためのHCD(人間中心設計)の理解Andrioidシナリオペルソナ名古屋メディアボンドアクセシビリティサーバー金シャチ商店街商店街1→10design細川太郎タロヲフナ犬タカガールサイトIA2010キックオフセミナー夢プロジェクト2009・成果報告会ウェブリテラシー協会第一回セミナーウェブデザイン部門学生作品集浜松トライデント祭り沖縄MonacaSalsa慶華飯店新横浜ラーメン博物館横浜中華街NIKEAndWasThereThen餃子福みつ道頓堀ジムナストコロンカンファレンス新世界求人日清食品グループネスカフェゴールドブレンド大沢たかおナゴヤ武将都市WWW(Welcome夏休み夏季閉館日WCAN46TAFF名古屋おもてなし武将隊武豊アニメーションフェスティバル後期ガンダム中村勇吾佐藤可士和SakaeTEXTUREサムライDesign夏休みの課題CS4スクラップブックD3.jsAWARDS2017MAXFLASHFLEX出身高校NightCollegeデッサンノートPC貸与TAFF'09広告批評WCAN×CSSNite武豊町アートアニメーションVIIFANTASYFINAL西村真里子尾鷲高校HTML+CSS基礎造形基礎WebリテラシーデザインコンテストActionScript基礎出張講座プレゼン演習TOCデザイナーのためのプログラミング入門HPデザインW+KTokyo(+CRUZ)QubibiStefanSagmeisterデザインのへそミス・ユニバース・ジャパン岐阜大会HelveticaArtlessNam安藤志維堀川WebアプリNCF2017丹下紘希アプリコンテスト信州アプリコンテスト[ゼロ]WebDirectionEast'082008Winter愛知県美術館アンドリュー・ワイエスデザイン久保怜也ContentsPHPTableof鳥取砂丘鳥取関口浩之フォントおじさんXRAY北濱大輔SIGGRAPHVideopuppetryASIAADVENT01西田幸司国家検定インターネットスキル認定普及協会ヱヴァンゲリヲン新劇場版:破ActionScript旭食品サンプル製作所食品サンプルマイクロソフトライブペイント黒い太陽カスタマイズセミナーES6ES2015ECMAScriptお母さんの二度見展ウルトラ展ヤノベケンジ学習Webプログラミング初級講座appendChild()アイディグラフィックス学生参加チタハン10今井佳子グラフィックデザイン入賞友章NodeListCMS特集HTMLCollectionカナバングラフィックス富岡聡学科ウサビッチ電信柱エレミの恋ソバットシアターコマ撮りアニメWEBSyntaxHighlighterUTZOOMLabuatフォトアルバムBlogスタジオディテイルズワークスコーポレーション「ヤノベケンジ-ウルトラ」展服部友厚Tokyo鈴木雄太衣台高校COMPLETECHILDRENCONTEST梅澤朝樹山川綾那株式会社エイチーム佐藤洋介GENOウィルスProxyファルコム音楽フリー宣言音楽荒俣宏UNIQLOv4.0.1WCAN2017SpringCALENDARゲーム日本ファルコムデコクレターミナルセキュリティ山村浩二THE□□□switch学校美大CODENTTドコモ東海支社NCF2013Flexbox味仙CGスペシャリストlist-itemdisplaylist-style-type美術大学芸術大学麺屋ココイチフジ家55岡田陽一麺やOKカレーラーメンAWARDFlexibleBox高橋雅人モテ声ボーダーHTML5スマートアプリ&クリエイティブコンテストDesignergoogleGWDparseInt()parseFloat()栗山聡一クリスマス備忘録F81教室トライデント合同企業説明会最優秀賞ジョルテKDDI卒業研究制作展松田洋樹10日でおぼえるLinuxサーバー入門教室東京コスモ3DCGさかなや晴れやか佐藤ねじ14みんなのICT東京就職プレゼンThree.js木下健太郎ウェブアクセシビリティモリサワポートフォリオアイデア帳平野健太郎Muse採用担当者の心に響く高校Facebookたこ焼きパーティWeb制作合宿たにぐちまこと田代豊Kaizen第51回技能五輪全国大会Webデザイン演習アクティビティシナリオ源賢司嵐が如くDmm.comUXデザインPlatformグロースハックbyinspiredRhizomatiksPerfumePARTYグロースハッカーあいちトリエンナーレ2013そこにいない。展熊﨑彩concrete5夏麺フェアoptgroup要素竹中民男keygen要素datalist要素飯田淳介HTMLbutton要素八木智章type属性アイチータ結団式愛知県選手団授業ネイルサロンマウアScrollmagic紅茶専門店Liyn-anアイテムカンパニーフロントエンドエンジニア第52回技能五輪全国大会スマートフォンサイトUI図鑑CSS3&jQueryで作るHighlighterインターンシップSyntaxWF1でBLOG2015年度Crayon森田霞マークアップエンジニア親孝行麺の匠オリエンタル新年のご挨拶NCF2014名古屋駅麺通りアップルップル木村哲朗ScrollMagicVelocity.js串本八鬼山熊野古道本州最南端那智の大滝和歌山中華そば熊野三山大門坂マカベン名古屋マークアップ勉強会第53回中村健太道家陽介ランチ石原愛実tableテーブル宇野剛志アロチ本家丸高西岡克真建設経営者倶楽部Animation加藤ひとみ山田拓生Webアクセシビリティアクセシビリティからはじめる、WebサイトのUXデザイ青山敬司AO特別授業スパルタキャンプ岩出本店丸田屋柏木祥太名古屋市営地下鉄ワクワク建設タウン青空学区画像をチェックボタンにする張山大祐IA/UXプラクティス笈瀬本通商店街名古屋市中村区キルターズフェスティバル2011放課後のプレアデス中部国際空港GAINAXSUBARUFLAVER3.0FLVforカークスヴィルLoadSlimbox2ウェブリテラシー協会8341-3:2010XJIS日本の四季キルト展英国王のスピーチ卒業制作・研究発表会2011津田直明2016原一浩トライデントカレッジUntitled!!!!!!!!ぬいぐるみのラパンKtaistyle卒業・修了制作展愛知県立芸術大学平野秀幸円JOY!map坂本貴史CustomSmilies絵文字制作実績Lazy大西健太Plunker商店サイト制作プチ・フレーズUltimateGA名駅経済新聞名チャリ愛知商業高校三蔵みの治商店名古屋クリエイターフットサル笈瀬本通jsdo.it新入生ポスターデザイン・コンペディションTwitterCodeplyグラフィクデザイン中級編JSFiddleGoogleAnalytics石井研二カメラワークAO入試河地芳明田中稚妃呂沼田啓助横浜デジタルアーツプログラムクイズCodePen小林信次増田悟名古屋サイト改善研究会CODEポスターデザイン・コンペティションJSBin株式会社アクアリングブラザー工業株式会社中部国際空港株式会社坂本邦夫WebプログラマーレスポンシブWebデザイン職業実践専門課程出席率NHNウェブアートデザイナーBloosumTeamイマジンカップStationFuture合同制作合宿迎春敢闘賞専門士2011年度docomoドコモ学位Bloom*Block尾花大輔SVGFacebookページバイドゥIllustrator長野JQuery第50回結果UIベースキャンプ名古屋第7回若年者ものづくり競技大会ワイヤーフレームうぇ~~~~~~~ぶ東京ゲームショウ2012TOKYO仕事SHOWGAMEツインメッセ静岡静岡県ドラゴンゲート愛知淑徳大学みつけものDRAGONGATE5月11日Googleロゴゴールデンウィーク恵那市岩村プロジェクションマッピング伊達千代DTPの勉強部屋ablogcms北岡弘至Magnumバルサマン3JAPANWORLDCUPマーサ・グレアムライアン・ウッドワード東京ゲームショウ合宿懇親会ゲーム大賞アマチュア部門Ohana合同制作ロゴマークメールマガジン神戸神戸国際展示場WebデザイナープラネタリウムWorld)Webディレクター鈴木Web制作のおしごと名古屋グランパス

メールフォーム

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

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