• ブログTOP
  • AI・ディープラーニング
  • AR
  • VR
  • WEBサイト
  • WEBマーケティング
  • SEO
  • SNS
  • その他
  • お問い合わせ

ALAKI株式会社

COZIKEEいつまでも使えるTech情報発信ブログ

リクルートサイトはこちら >
  • ブログTOP
  • AI・ディープラーニング
  • AR
  • VR
  • WEBサイト
  • WEBマーケティング
  • SEO
  • SNS
  • その他
  • お問い合わせ

コーダーさんにフィーバータイムを与えてくれる(かも知れない)formタグの属性のお話

2016年9月30日

  • このエントリーをはてなブックマークに追加

こんばんは、Webプログラマの篠田です。

私にとっての試練の季節「夏」が終わり、やっと苦行から解放されたかのうような晴れ晴れとした気分で仕事をしています。
油断していると日中の気温に倒れそうになりますが、発熱するMac Book Proと一緒に頑張っています!

さて、今回はコーダーさんとプログラマが少し仲良くなれるかもしれないHTMLタグのお話をしたいと思います。

あまりにTwig話が続くと食傷気味になりますからねw

formタグ使ってますか?

formタグを知らないコーダーさんというのは、Web界隈ではいないと思いますが、コーダーさんはformタグをどのように使ってますか?

プログラマさんに渡すときに下記のような渡し方をしていませんか?

<form>
…
</form>

もちろん、これが悪いわけではないですよ。(ほんとに)

ただ、formタグの属性を少し書いておくと、プログラマは嬉しい気分になってくれるとおもいます。
では、どういった属性があるのか少し見ていきましょう。

「#」だけでもいいんです。付けてあげてください「action」属性

formタグの属性で「action(アクション)」属性というのがあります。

これはaタグで言うところの「href」属性に該当して、formタグ内にあるsubmitボタンをクリックされたときに記述された内容を送信する送信先を指定します。

コーダー「えー、私送信先なんて聞いていないんですけど??」

もちろん、送信先を何だかんだで決めるのはプログラマになるとおもいますので下記のようにしてあげると喜んでくれますよ。

<form action=“#”>
…
</form>

これだけでいいんです!コーダーさんもaタグの「href」属性書くとき「#」いれるでしょ?
それと同じだと思ってもらえればOKです。

「method」属性の未記入は混乱の元!

「method(メソッド)」属性って知ってますか?
これはformタグの属性の中でもコーダーさんにとっては謎属性の1つだとおもいます。

ただ、この属性が無い状態でプログラマに渡すとプログラムの挙動がおかしくなることがあり

プログラマ「method属性ないやん!!」

という悲鳴があがり、イラッとされますww

コーダー「でも、何書いていいかわからないんですよー。」

大丈夫です。下記のように何も考えずにコピー&ペーストしてあげてください。それだけで、プログラマはあなたに感謝するはずです。(心のなかで)

<form action=“#” method=“POST">
…
</form>

「POST」というのは、入力されたフォームの送信方法を意味しますが、「POST」が何かなんて気にしなくても問題ありません。ただ、「method=“POST”」と追記してあげるだけでいいのです。

難しいことはプログラマがやってくれますからw

ファイルのアップロードがあれば「enctype」属性を付けるだけであなたの評価が上がります

formタグの属性中意味不明度No.1属性(当人比)は「enctype(エンクタイプ)」属性でしょう。

これの使い所は特殊で普段は必要ないのですが「ファイルアップロード」の機能があるフォーム。
つまり、「<input type=“file”>」がフォーム内に含まれているときにその力を発揮する属性です。

これは意外とプログラマも覚えていないので、いちいち調べないといけない場面というのがあります。

つまり、フォームで正しく「enctype」属性の設定をして渡すだけで、プログラマからの評価が勝手に上昇します!!

大事なので2回言いますよ。

フォームで正しく「enctype」属性の設定をして渡すだけで、プログラマからの評価が勝手に上昇します!!!

コーダー「何かけば良いんですか(ハァハァ―)」

大丈夫です。下記のようにコピー&ペーストをするだけです。

<form action=“#” method=“POST” enctype="multipart/form-data">
…
</form>

たったこれだけ。これだけで、あなたの評価がうなぎのぼりです!!

【注意】
ただし、うなぎのぼりだからといって調子に乗って何でもかんでもformタグに「enctype=”multipart/form-data”」と書くと、あなたの評価は重力に引かれるリンゴのように真っ逆さまに下がっていきます。

最初にもいいましたが、「enctype」属性が真価を発揮できるのは「ファイルアップロード」の機能があるときだけです。

それ以外のときはあってもなくてもいい子なので、余計な記述をしないようにしましょう。

まとめ

コーディングの知識で「formタグ」の属性情報を知らなくても素晴らしいコードを書けることはできます。デザインに全く関係のない属性ですからね。

しかし、これを知っていることでプログラマとの円滑な関係を築くことは可能になりますので、次回「formタグ」を使う機会があるときはこう考えてください。

コーダー「私のフィーバータイム キタ━━━━(゚∀゚)━━━━!!」

それでは、またー!

  • ツイート
  • このエントリーをはてなブックマークに追加

You may also like...

  • videoタグを使って自動全画面(フルスクリーン)に動画を表示させる方法

    25 8月, 2017

  • Google Analyticsで時間帯別の数字を分析して、SNS投稿に役立てよう!

    Excelを使って簡単にINSERT文を作る方法

    11 12月, 2015

  • CLOUD FLARE + WordPress + 共用サーバーでサイトが崩壊したときの処方箋

    2 12月, 2016

プログラマー募集
  • Next story 昨対比120%を達成!専門学校・大学向け「Web広報勉強会」のご紹介
  • Previous story 言われた通りにやっちゃだめ!デザイナーのアドリブ力を考える

運営会社

ALAKI株式会社 ALAKI株式会社採用サイト

弊社サービス

MUGHEN ALAKI クラウド型受発注システム さよなら過去のAR。WebARがイベント集客に革命を起こします。 広報活動の課題を数字で可視化し、出願者数アップをお手伝いします クリエイティブ業務のコミュニケーションを高速化 Webの知識が無くてもWebサイトの品質をチェックできます。

カテゴリー

  • AI・ディープラーニング
  • AR
  • BtoB
  • CMS
  • Git
  • Google AdWords
  • gulp
  • Javascript
  • Laravel
  • Photoshop
  • Pug
  • pyhotn
  • Sass
  • SEO
  • SNS
  • Twitter広告
  • VR
  • Web3.0
  • WEBサイト
  • WEBマーケティング
  • YouTube
  • コーディング
  • システム開発
  • スマートフォンサイト
  • セキュリティ
  • セミナー
  • その他
  • ツール
  • デザイン
  • ベトナムレポート
  • 仕事術
  • 未分類
  • 業務効率化
  • 色

アーカイブ

  • 2023年2月
  • 2023年1月
  • 2022年12月
  • 2022年11月
  • 2022年10月
  • 2022年9月
  • 2022年2月
  • 2021年12月
  • 2021年9月
  • 2021年7月
  • 2021年6月
  • 2020年10月
  • 2020年9月
  • 2020年8月
  • 2020年6月
  • 2019年6月
  • 2019年5月
  • 2019年4月
  • 2019年3月
  • 2019年2月
  • 2019年1月
  • 2018年12月
  • 2018年11月
  • 2018年9月
  • 2018年8月
  • 2018年7月
  • 2018年6月
  • 2018年5月
  • 2018年4月
  • 2018年3月
  • 2018年2月
  • 2018年1月
  • 2017年12月
  • 2017年11月
  • 2017年10月
  • 2017年9月
  • 2017年8月
  • 2017年7月
  • 2017年6月
  • 2017年4月
  • 2017年3月
  • 2017年2月
  • 2017年1月
  • 2016年12月
  • 2016年11月
  • 2016年10月
  • 2016年9月
  • 2016年8月
  • 2016年7月
  • 2016年6月
  • 2016年5月
  • 2016年4月
  • 2016年3月
  • 2016年2月
  • 2016年1月
  • 2015年12月
  • 2015年11月
  • 2015年10月
  • 2015年9月
  • 2015年7月
  • 2015年3月
  • 2015年2月
  • 2015年1月
  • 2014年12月
  • 2014年11月
  • 2014年10月
  • 2014年9月
  • 2014年8月
  • 2014年7月
  • 2014年6月
  • 2013年10月
  • 2013年9月

Facebook

お問い合わせ

お問い合わせ

人気の記事

  • 「SwinIR」で高画質化した画像を pythonを使用して一括で元のサイズに戻す方法
  • Web制作時に高解像度の元画像がない場合にPythonで高画質化する方法
  • 『考える』が楽しくなる!考えを「広げる」・「深める」12の方法
  • macにpythonの開発環境を作ってみよう!
  • 商品・サービスを圧倒的に成長させる、シリコンバレーで注目の「プロダクト・レッド・グロース」を解説

カテゴリー

  • AI・ディープラーニング
  • AR
  • BtoB
  • CMS
  • Git
  • Google AdWords
  • gulp
  • Javascript
  • Laravel
  • Photoshop
  • Pug
  • pyhotn
  • Sass
  • SEO
  • SNS
  • Twitter広告
  • VR
  • Web3.0
  • WEBサイト
  • WEBマーケティング
  • YouTube
  • コーディング
  • システム開発
  • スマートフォンサイト
  • セキュリティ
  • セミナー
  • その他
  • ツール
  • デザイン
  • ベトナムレポート
  • 仕事術
  • 未分類
  • 業務効率化
  • 色

検索

ALAKI株式会社 © 2026. All Rights Reserved.