模擬ログイン画面を作成するにはHTMLとJavaScriptが必要です。作成手順は次のとおりです。
1. まず、HTML フォームを作成する必要があります。フォームには、ユーザー名とパスワードの 2 つの入力フィールドが含まれている必要があります。inputタグを使用して入力フィールドを作成し、type属性を「text」と「password」に設定します。
2. 送信ボタンを作成し、input タグを使用して、type 属性を「submit」に設定します。
3. JavaScript 関数をフォームに追加します。ユーザーが送信ボタンをクリックすると、この関数はユーザー名とパスワードを検証します。
4. JavaScript 関数で、ユーザー名とパスワードが正しい場合は、window.location.href を使用してユーザーを別のページにリダイレクトします。ユーザー名とパスワードが正しく入力されていない場合、ページにエラー メッセージが表示されます。
サンプルコードは次のとおりです。
<form>
<label>Username:</label>
<input type="text" id="username" name="username">
<br>
<br>
<label>
Password:
</label>
<input type="password" id="password" name="password">
<br>
<br>
<input type="submit" value="Submit" onclick="validate()">
</form>
<script type="text/javascript">
function validate() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if (username == "Isaac_Newt0nn" && password == "Ljl-20120124") {
window.location.href = "输入需要前往的文件";
} else {
alert("Invalid username or password. Please try again.");
}
}</script>