ネットショッピング等でお馴染みのECサイトを作成するにあたり、会員登録は必須ですよね。
今回は会員登録画面を紹介したいと思います。
htmlがメインとなりますが、phpも使用しますので、必要な場合はこちらを参照ください。
会員登録画面サンプルコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>すきま堂会員登録</title>
</head>
<body>
<form name="myForm" method="post" action="study_member_add.html">
<p><label>お名前:</label><input type="text" name="name" placeholder="すきま 太郎" required></p>
<p><label>メアド:</label><input type="email" name="mail" placeholder="sample@sukimadou.co.jp" required></p>
<p><label>パスワード</label><input type="password" name="pass" id="pass" required></p>
<p><label>パスワード(確認)</label><input type="password" name="pass2" id="pass2" required></p>
<p><label>利用規約に同意します。</label><input type="checkbox" name="kiyaku" required ></p>
<p><input type="submit" value="送信"></p>
<p>～以下、送信データ～</p>
</form>
<?php
if(isset($_POST['name'])==true){
print '<p>お名前:'.$_POST['name'].'</p>';
}
if(isset($_POST['mail'])==true){
print '<p>メアド:'.$_POST['mail'].'</p>';
}
if(isset($_POST['pass'])==true){
print '<p>パスワード:'.$_POST['pass'].'</p>';
}
if(isset($_POST['kiyaku'])==true){
print '<p>利用規約:'.$_POST['kiyaku'].'</p>';
}
?>
</body>
</html>
上記サンプルコードをhtmlファイルとして保存して、xamppを起動し、表示しましょう。
会員登録っぽい画面が表示できました。
とても簡素ですので、CSSでデザインしてあげるといい感じになると思います。
サンプルコード解説
特別に難しいことはしておりません。
inputタグのtypeで、テキスト、メールアドレス、パスワード等指定できます。
ざっくり説明すると。。。
・type=”text”(お名前)…テキスト入力できる。
・type=”email”(メアド)…入力したものがメールアドレスの形式になっているかチェックしてくれる。
・type=”password”(パスワード)…入力した文字を”・”にする。
・type=”checkbox”(利用規約)…チェックボックス。
です。
お名前とメアドにplaceholderを使用しています。
これを使用すると、入力例が表示されます。
inputタグすべてに、requiredを指定しています。
これを指定すると、送信ボタンを押した時、未入力項目を教えてくれます。(下記画像参考。)
おまけ程度にphpコードも記述しました。
送信ボタンを押した時に、入力したデータを表示します。
当たり前ですが、本来ならばパスワードは表示してはいけません。
注意点
パスワードを2回入力させたということは、本来ならば両方一致しているかチェックする必要があります。
また、悪意あるコードを入力して送信される場合を想定し、入力項目に対してはきちんとチェックをしなくてはいけません。
