1561.【GPT-5】ChatGPTで、簡易的なログイン機能を作ってみました。【HTML/CSS/JavaScript】

...

...

「ログイン機能のサンプル」

今回は、ログイン機能のサンプルを作ってみました。

（画像をクリック・タップするとご覧いただけます。）

このようにシンプルなサンプルです。スンプルセンプルソンプル。

サンプルですので、ユーザーIDとパスワードは1つしか設定しておりません。上の画像にも括弧書きで薄く表示しているものがそれぞれユーザーID（sample）とパスワード（sample123）です。

試しにこのように異なることを入力してログインしようとしてみます。下部のログインボタンを押します。

するとこのように赤い文字で入力内容が異なることが表示されてログインできません。

今度はおとなしく正しいIDとパスワードを入力し、ログインボタンを押します。

するとログインが成功し、このような画面が表示されます。ユーザー名は「サンプルさん」にしました。

簡易的なサンプルのログイン機能ですので、これだけです。本格的に実装する際は、ここから更にいろいろと作り上げていくこととなります。

下のログアウトボタンを押すと、再び元の画面に戻ります。この画像のように「次回もログイン状態を保持する」にチェックを入れることでログイン状態を保持することもできます。

...

以上がシンプルなログイン機能のサンプルです。

これまでに作ったアプリやWebサイトのサンプルは、こちらをご覧くださいませ。

このようにアプリやWebサイトをいろいろと制作しておりますので、お仕事のご依頼もお気軽にお待ちしております！こちらからご連絡をどうぞ！

...

お読みいただき、ありがとうございました。