質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.61%

  • HTML

    8694questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

display:none をした input tag を使ってのデータ送信の可能性

解決済

回答 4

投稿

  • 評価
  • クリップ 2
  • VIEW 16K+

zanjibar

score 185

入力項目を隠すために、CSS で、display:none にして見えないようにとりあえずしようかなと思っています。その隠された入力項目のデータが送られることが偶然あるのでしょうか? ブラウザのdevelopper tool を使えば簡単にできるのですが、偶然そういったことが起こる可能性があったら、教えてください。

なんらかの理由で、dsiplay:none が機能しなくなったりとか、ありそうな気がします。

簡易的に、データ入力制限をするための策なので、究極的には、データのバリデーションを行えばよいとは思っています。

厳密な環境は特に提示しないでの質問ですみません。回答は、実際に体験して、ぱっと思いつくことがある方や、ネット上で
そういったことがあるという情報を知っている方でいいのでお願いします。



  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • sounisi5011

    2015/09/16 12:52

    回答のコメント欄にて書き込まれている「データがチェックされた状態」についての詳細な説明を求めます。display:noneの場合にデータがチェックされるか否かの情報を求めているようですが、その「チェック」そのものが何なのか、質問からもコメントからも読み取れません。

    キャンセル

  • zanjibar

    2015/09/16 13:27

    フォームの一部にあるラジオボタンを、display:none にします。これでその部分は、見えなくなるので、通常ならチェックはできません。何らかの状況で、偶発的に(意図的でなく、display:none が外れている場合とか。)にチェックできてしまう状況です。

    キャンセル

回答 4

checkベストアンサー

+1

display: none; してもフォーム送信されますが、該当要素に disabled 属性を付与する事でフォーム送信しなくなります。

<form>
  <input type="text" name="hoge">
  <input type="text" name="foo" disabled><!-- フォーム送信されない -->
</form>

<script>
document.querySelector('form').elements['hoge'].disabled = true; // input[name=hoge] を disabled にする
</script>


簡易的に、データ入力制限をするための策なので、究極的には、データのバリデーションを行えばよいとは思っています。 

フォーム送信制限をかけたとしてもフォーム送信することは可能なのでサーバ側でのバリデーションは必須だと思って下さい。
CSS や JavaScript で制限をかけたとしても突破する方法はいくらでもあります。


(9/16 12:58追記)
ひょっとして、こういう事なんでしょうか。

× Q. <input type="checkbox" style="display: none;" checked> でフォーム送信される事が偶発的にありえますか?
 ↓
○ Q. <input type="checkbox" style="display: none;"> となっているコントロールをユーザが checked 状態にする事は可能ですか?

私は前者だと思っていましたが、後者の場合はいくつか方法があります。

1. ブラウザの CSS を Off にしている
2. CSSを使わないテキストブラウザを使用している
3. 外部CSSの読み込みに失敗した
4. JavaScript で input.cheked = true; を実行する(bookmarkletやコンソール等)

基本的に CSS に依存する UI は好ましくないと思います。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/09/16 10:19

    すみません。質問の趣旨は、データがチェックされた状態で送信されることが偶発的にありえるのかということなんです。CSSで簡易制限をどうやってかけるのがいいかという質問ではないです。

    キャンセル

  • 2015/09/16 10:33

    ですから、「display: none; してもフォーム送信されます」と回答したのですが、伝わりづらかったでしょうか。
    偶発的ではなく、必然的にフォーム送信されます。
    疑わしければ、検証してみてください。

    キャンセル

  • 2015/09/16 13:01

    Lhankor_Mhyさんの回答を見て質問文を勘違いしていた可能性に気が付いたので親コメントに追記しました。

    キャンセル

  • 2015/09/16 13:29

    はい、そうです。わかりにくくてすみません。
    CSS依存UIが好ましくないのは、承知した上での質問です。

    キャンセル

+1

偶発的にではなく、通常送信されます。
下記のようなHTMLで、submitボタンを押下してみてください。
<html>
    <head></head>
    <body>
        <form name="f" method="get">
            <input type="submit"/>
            <input type="text" name="noname" value="見えない入力フォーム" style="display:none;"/>
        </form>
    </body>
</html>
アドレス欄に、noname=~というリクエストパラメータが付与されてますよね。
つまり、データを送信しているのです。

これを、送信しないようにするには、name属性をとっちゃう事ですね。
<html>
    <head></head>
    <body>
        <form name="f" method="get">
            <input type="submit"/>
            <input type="text" value="見えない入力フォーム" style="display:none;"/>
        </form>
    </body>
</html>
同様にsubmitボタンを押下してみてください。
リクエストパラメータが無いことがお分かりいただけるかと思います。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/09/16 10:20

    言葉足らずですみません。偶発的に、チェックされた状態でデータが送信されることはあるのか というのが質問の趣旨です。CSSをどうやって書いたらいいのかという質問をしているのではないのです。

    キャンセル

  • 2015/09/16 11:06

    データがチェックされた状態での送信は、通常は起こらないと思います。none の場合には、チェックしていない状態のデータ送信がされると思われます。 それがチェックされた状態になる場合が偶発的にあるのかということなんです。

    キャンセル

0

HTMLの読み込みに成功し、何らかの原因でCSSファイルの読み込みに失敗すれば、CSSのないレンダリングがされ、そのinput要素が表示されているためユーザーによってチェックされることはありえるのではないかと思います。

IEでたまにCSSの読み込みに失敗し、デザインが崩れる

また、ブラウザのバージョンやIEの互換表示によって表示されることもありえるのではないでしょうか。

IEではなくFirefoxのみで発生するCSS styleトラブル

個人的には普通にtype属性をhiddenにしておいた方が無難ではないかな、と思うのですが……
どうしてもCSSでコントロールしたいなら、念のためreadonly属性を設定しておくとか。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

入力項目を隠すために、CSS で、display:none にして見えないようにとりあえずしようかなと思っています。その隠された入力項目のデータが送られることが偶然あるのでしょうか?
display:none; で隠しても、表示上消しているだけで、その中に記述しているもの自体はそのままです。
submitされます。
みなさんがおっしゃっているのはココ↑だと思います。

zanjibarさんが聞きたいのは、
"入力項目を隠しているにも関わらず、ユーザーが入力項目を編集できてしまう事象はないか?"
ということですよね?

CSSに限らず、外部からのJavascriptによる書き換えもできるかと思います。
ブラウザのアドレスバーにJavaScriptを入力して実行する

クライアント側では穴はいくらでもあると思うので、
DBへの登録・更新など、データの整合性を保たなくてはならないのであれば、
サーバー側でもデータチェックしたほうがよいと思います。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/09/16 14:14

    あらら、解決済みでしたね。失礼しました。

    キャンセル

  • 2015/09/16 16:12

    質問は、偶発的に、CSSでの非表示や、disable が、無効になり、データ入力が可能になるかどうかを知りたいというものです。意図的になら、非常に簡単に突破されるのはわかっています。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.61%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • HTML

    8694questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。