HTMLでログインページを作成する方法

WordPressではボタンを押すだけで、ログインページの後ろにコンテンツを隠すことができますし、そのようなログインページを提供するプラグインやサービスもたくさんあるので、コードを書く必要はありません。WordPressのワンクリックで簡単にログインページを機能させるには、サイトに複数のユーザーを作成し、サイトを公開から非公開に表示する必要があります。このWikiHowでは、HTMLでログインページの基本を作る方法を紹介します。

1

テキストエディタを開きます。WindowsとMacのコンピュータには、HTMLを作成または編集するために動作するデフォルトのテキストエディタプログラムが付属しています。

• Windowsをお使いの場合は、スタートメニューで検索できるメモ帳を使うか、より高機能な.NET Frameworkをインストールしてみてください。

• Macを使用している場合は、Spotlightで検索できるTextEditを使用できます。

2

<section >」と入力し、↵ Enterキーを押します。これがログインページのコードの始まりです。

3

以下のコードを入力して、ログインページのスケルトンを作成します：

<form name="login" action="index_submit" method="get" accept-charset="utf-8"> <ul> <li><label for="usermail">Email</label> <input type="email" name="usermail" placeholder="[e-mail]" required></li> <li><label for="password">Password</label> <input type="password" name="password" placeholder="password" required></li> <li> <input type="submit" value="Login"></li> </ul> </form> </section> </section

• placeholder "テキストは、アクティブになるまでテキストフィールドに表示されます。これは、テキストボックスで何を探しているかの例を示します。
• required "タグは任意ですが、フィールドへの入力が完了しなかった場合、それが必須であることをユーザーに警告します。
• 開いているタグはすべて閉じてください。1つでも閉じていないと、コードがおかしなことになります。

4

保存してテキストエディタを閉じます。ファイルが.txtではなく.htmlとして保存されることを確認してください。

この記事は、CC BY-NC-SAの下で公開されている「 HTMLでログインページを作成する方法 」を修正して作成しました。特に断りのない限り、CC BY-NC-SAの下で利用可能です。