web-dev-qa-db-ja.com

<input type = "hidden">の本来の目的は？

<input type="hidden">タグの本来の目的に興味があります。

最近では、サーバーに送信される変数などを格納するためにJavaScriptと一緒に使用されることがよくあります。

したがって、<input type="hidden">がJavaScriptbeforeJavaScriptに存在したので、元の目的は何でしたか？ある種の状態を維持するために返される（変更されない）サーバーからクライアントに値を送信することしか想像できません。それとも私はそれの歴史で何か間違っているのですか？<input type="hidden">は常にJavaScriptと一緒に使用されるはずでしたか？

可能であれば、回答にも参考文献を記入してください。

javascripthtmlhistory
97
Uooo

ある種の状態を維持するために返される（変更されない）サーバーからクライアントに値を送信することしか想像できません。

正確に。実際、今日私たちが知っているHTTPは少なくとも基本的にはステートレスプロトコルであるため、今日でもこの目的で使用されています。

このユースケースは、実際に最初に HTML 3.2 で説明されました（HTML 2.0にそのような説明が含まれていなかったことに驚いています）：

type=hidden
これらのフィールドはレンダリングされるべきではなく、サーバーがフォームに状態情報を保存する手段を提供する必要があります。これは、対応する属性によって定義された名前/値のペアを使用して、フォームが送信されるときにサーバーに返されます。これは、HTTPのステートレス性の回避策です。別のアプローチは、HTTP「Cookie」を使用することです。

<input type=hidden name=customerid value="c2415-345-8563">

HTML 3.2がW3C勧告のみafterJavaScriptの最初のリリースになったことに言及する価値はありますが、隠しフィールドはほとんど常に同じ目的を果たしていると仮定しても安全です。

104
BoltClock

ここで簡単なサーバー側の実世界の例を提供します。たとえば、レコードがループされ、各レコードに削除ボタンのあるフォームがあり、特定のレコードを削除する必要がある場合は、hiddenフィールドが動作します。この場合、削除するレコードの参照を取得しないでください。id

例えば

<?php
    if(isset($_POST['delete_action'])) {
        mysqli_query($connection, "DELETE FROM table_name 
                                   WHERE record_id = ".$_POST['row_to_be_deleted']);
                                   //Here is where hidden field value is used
    }

    while(condition) {
?>
    <span><?php echo 'Looped Record Name'; ?>
    <form method="post">
        <input type="hidden" name="row_to_be_deleted" value="<?php echo $record_id; ?>" />
        <input type="submit" name="delete_action" />
    </form>
<?php
    }
?>
10
Mr. Alien

要するに、元々の目的は、フォームの送信で送信されるフィールドを作成することでした。場合によっては、非表示フィールドにいくつかの情報（ユーザーのIDなど）を保存し、フォームの送信で送信する必要がありました。

1995年9月22日のHTML仕様から

「TYPE = HIDDEN」のINPUT要素は非表示フィールドを表します。ユーザーはこのフィールドを操作しません。代わりに、VALUE属性はフィールドの値を指定します。 NAME属性とVALUE属性が必要です。

8
Chuck Norris

Type = 'hidden'を含むフォーム要素の値は、フォームが投稿されるときにサーバーに送信されます。入力type = "hidden"値はページに表示されません。たとえば、非表示フィールドでユーザーIDを保持することは、多くの用途の1つです。

SOは、アップクリックに非表示フィールドを使用します。

<input value="16293741" name="postId" type="hidden">

この値を使用して、サーバー側のスクリプトはアップ投票を保存できます。

5
c.P.u1

基本的に、非表示フィールドは、マルチステップフォームで使用する方が便利で利点があります。 hiddenフィールドを使用して、hiddenを使用して1つのステップ情報を次のステップに渡し、終了ステップまでそれを転送し続けることができます。

  1. CSRFトークン。

クロスサイトリクエストフォージェリ は、非常に一般的なWebサイトの脆弱性です。すべてのフォーム送信で秘密のユーザー固有のトークンを要求すると、CSRF攻撃を防ぐことができます。これは、攻撃サイトが適切なトークンを推測できず、ユーザーに代わって実行するフォーム送信が常に失敗するためです。

  1. 複数ページのフォームで状態を保存します。

ユーザーが現在いるマルチページフォームのどのステップを保存する必要がある場合は、非表示の入力フィールドを使用します。ユーザーはこの情報を見る必要がないため、非表示の入力フィールドで非表示にします。

一般規則：このフィールドを使用して、ユーザーに表示する必要はないが、フォーム送信時にサーバーに送信するものを保存します。

5
Ganesh Bora