PHPで会員登録にチャレンジ！【1.登録画面】

よく通販サイトなどで、会員登録し
ログインすることで、手続きが簡単になる
ことってありますよね。

仮にHTMLとCSSとでウェブサイトを作成していて、
会員登録、ログインの機能を導入したいと
思っているとします。

しかし、HTMLだけでは会員登録の機能を
導入することができません。

HTML以外の言語で比較的簡単に会員登録を導入できる
言語にPHPがあります。

これから、PHPを使ってログインできる
会員登録機能を作っていきたいと思います。

会員登録の項目

まず初めに、会員登録するにあたり、
何を登録するかの登録項目を決めたいと
思います。

この記事では、学習用にサンプルとして作成しますので
登録項目は最小限にします。

１．ユーザー名
２．メールアドレス
３．パスワード

こんな感じですか。
とりあえず3項目にします。

登録画面を作るには

では次に登録画面です。

これは、HTMLで作成可能なのでサクッと作りましょう。

ファイル名を「touroku.html」とでもしましょうか。
えっ、ローマ字かよっ！なんて思っている方は、
英語で[register.html]でもいいかも。

ファイル名：register.html

＜記述例＞

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>会員登録画面</title>
  </head>
  <body>
    <main>
      <section>
        <form method="post">
          <h2>会員登録画面</h2>
          ユーザー名：<input type="text" name="username"><br>
          メールアドレス：<input type="email" name="email"><br>
          パスワード：<input type="password" name="password"><br>
          <input type="submit" value="登録する">
        </form>
      </section>
    </main>
  </body>
</html>

＜表示例＞

CSSでデザインを指定していないので不格好ですね。
とりあえずで作成しましたので、ご勘弁を・・・。

とも思いましたが、せっかくなのでCSSで
ちょっとだけデザインを変更します。

＜記述例＞

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>会員登録画面</title>
  </head>
  <body>
    <main>
      <section>
        <form method="post" style="background: lightcyan; margin:10px; padding:10px; border:6px solid royalblue; width:400px;">
          <h3>会員登録画面</h3>
          　　ユーザー名：<input type="text" name="username" size="30"style="margin:6px;"><br>
          メールアドレス：<input type="email" name="email" size="30"style="margin:6px;"><br>
          　　パスワード：<input type="password" name="password" size="30"style="margin:6px;"><br>
          <input type="submit" value="登録する" style="margin:10px 0 10px 40%;">
        </form>
      </section>
    </main>
  </body>
</html>

＜表示例＞