inputでパスワード認証を作りたい

Question

<input type="checkbox" id="test" value="DESC" />ここを押すと
<div class="text">テキストが消える</div>

input[id="test"]:checked ~ .text{
     visibility:hidden;
     position:absolute;
}

チェックボックス機能で上記のような表示切替テキストを作りました。
18:17追記
表示の切り替えは上記のとおり本当に簡易的なものを想定しており、回答いただいたように覗こうと思えば覗ける程度の仕組みで構わないと考えています。
元の質問では「一度ページを開いたとき見かけ上には入力フォームのみがあり、パスワードを知っている（あるいは類似の方法で特定される）ユーザーが簡単にアクセスできるようになっていれば、ソースの検証などには全体が表示されていても構わない」という意図が上手く伝わらなかったようで申し訳ありません。
難しいことだとは存じていますが、もう少し他の回答を待たせてください。
追記終わり

これをinput type="text"に特定の文字列を入力することで（もしくはsubmitと組み合わせることで）同じ動作をするようにしたいのですが、jsなどを利用したページ遷移が伴わないため不可能なのでしょうか。

他の方法でもページの一部分のみを特定のユーザーに限定して表示させることができれば検討したいと思います。
解決策をご存知の方はなにとぞご教示ください。よろしくお願いいたします。

Comments

[maisumakun]

「、jsなどを利用したページ遷移が伴わないため不可能なのでしょうか。」とありますが、ページ遷移なしならJavaScriptを使っても構わないのでしょうか。それとも、HTMLとCSSだけでやらないといけないのでしょうか。

[yoorwm]

普通は<input type="password">を使うと思われますが、そもそもその説明からは何をしたいのか？がよく分からないんですよね。
> 他の方法でもページの一部分のみを特定のユーザーに限定して表示させることができれば検討したいと思います。
クライアント側の仕組みだけでは「特定のユーザのみ」という事は出来ません。
もう少し、（例えば、参考にしたサイトなどをよく見て）どのようにしたいのか？を固めると良いかもしれません。

[m.ts10806]

ページの一部分？
一部のページではなく？

[alk_a_line]

>>maisumakun様
お借りしているページ制作サイトの仕様でscriptタグが弾かれてしまうようなので、jsは使用できないと思います。言葉が足りずすみません。

[m.ts10806]

もう少し具体的な用途が欲しいですね
既に「パスワード認証」ではなくなってる気がしますが

[H40831]

onclick属性やonsubmit属性によるスクリプトの実行も弾かれますか？

[alk_a_line]

>>H40831様
お返事遅くなりすみません。確認してみましたが使えませんでした。

Answer 1

PHPもJavaScriptも使えないようでしたら、真面目な認証システムにすることは不可能なので、
とても需要の少ない要件かと思うのですが、一応調べてみました。
HTML5のpattern属性と、CSS4の疑似クラス:validを使用すれば、対応ブラウザでは仰ることは可能のようです。
（調べた記事によると主要ブラウザでも非対応のものがあるようでしたが、、気になるようでしたら調査・検証してみてください。）
:validを使うにはinputタグにrequired属性も指定しないと想定した動作にならないので、これも使います。

<input type="text" id="test" pattern="任意のパスワード" required>
<div class="text">テキストが消える</div>

#test:valid ~ .text{
     visibility:hidden;
}

pattern属性は本来正規表現を用いることを想定している属性のようなので、
もちろん正規表現も使えますが、今回の質問内容の限りでは気にしなくていいです。

また、提示いただいてるコード（特定条件で非表示）と、質問文の内容（特定条件で表示）が矛盾してるのですが、
:validと対になるように、patternに合致しない状態を指定する擬似クラス:invalidもあるようなので、状況に応じて適宜使ってください。

Comments

[alk_a_line]

こちらをお借りして無事希望の動作を再現できました。
拙い説明やこちらの不注意で文意が混乱しているところがあったにも関わらず、どちらにも対応する方法を教えてくださって本当にありがとうございました。

Answer 2

他の方法でもページの一部分のみを特定のユーザーに限定して表示させることができれば検討したいと思います。

このような方法で制限したように見えても、ほとんど無意味です。フロントエンドサイドで表示切り分けをやっている以上、非表示にすべき内容もデータとしては送信されてしまっていますし、チェックすべきパスワードまでフロントエンドにデータとして存在することになってしまいます。

本気で「特定のユーザーに限定して表示」が必要なのなら、サーバ側に手を入れることは必須です。

Answer 3

いっそのことベーシック認証でいいのでは。