会員登録フォーム付きドロワーメニューの作り方
ボタンをクリックすると、画面の横から会員登録フォーム付きドロワーメニューを表示する方法を紹介します。ページ遷移を行わずに登録フォームを表示できるため、会員登録やアカウント作成画面をスムーズに案内したい場合に便利なUIです。
このサンプルではHTML・CSS・JavaScriptのみを使用し、名前・メールアドレス・パスワードなどを入力できる登録フォームをドロワーメニュー内へ配置しています。JavaScriptで開閉を制御しており、シンプルな構成なのでデザイン変更や入力項目の追加も簡単に行えます。
実際の会員登録処理やデータベース連携は含まれていませんが、会員サイト・ECサイト・Webサービス・管理画面などの登録フォームUIとしてそのまま利用できます。独自の登録処理を組み合わせるベースとしても活用しやすいサンプルです。
実際の会員登録処理・データベース保存・メール送信などは実装していません。
デモ
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<meta charset="UTF-8">
<!-- スマートフォン表示対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>会員登録フォーム付きドロワーメニュー</title>
<!-- CSSファイルを読み込み -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- ドロワーメニューを開く操作エリア -->
<div class="registration-form-drawer-menu_wrap">
<!-- 操作エリアのタイトル -->
<div class="registration-form-drawer-menu_title">
会員登録フォーム付きドロワーメニュー
</div>
<!-- 操作エリアの説明文 -->
<p class="registration-form-drawer-menu_text">
ボタンをクリックすると、画面左側へ会員登録フォームが表示されます。
</p>
<!-- ドロワーメニューを開くボタン -->
<button
class="registration-form-drawer-menu_open"
type="button"
data-registration-drawer-open>
会員登録フォームを開く
</button>
</div>
<!-- ドロワーメニュー表示時の背景 -->
<div
class="registration-form-drawer-menu_overlay"
data-registration-drawer-overlay
aria-hidden="true">
<!-- ドロワーメニュー本体 -->
<div
class="registration-form-drawer-menu_drawer"
role="dialog"
aria-modal="true"
aria-labelledby="registration-form-drawer-menu-heading">
<!-- ドロワーメニュー上部 -->
<div class="registration-form-drawer-menu_header">
<!-- ドロワーメニューのタイトル -->
<div
class="registration-form-drawer-menu_heading"
id="registration-form-drawer-menu-heading">
会員登録
</div>
<!-- ドロワーメニューを閉じるボタン -->
<button
class="registration-form-drawer-menu_close"
type="button"
data-registration-drawer-close
aria-label="ドロワーメニューを閉じる">
×
</button>
</div>
<!-- 会員登録フォームの説明文 -->
<p class="registration-form-drawer-menu_description">
必要事項を入力してください。
</p>
<!-- 会員登録フォーム -->
<form
class="registration-form-drawer-menu_form"
data-registration-drawer-form>
<!-- お名前入力欄 -->
<div class="registration-form-drawer-menu_field">
<label
class="registration-form-drawer-menu_label"
for="registration-form-drawer-menu-name">
お名前
</label>
<input
class="registration-form-drawer-menu_input"
id="registration-form-drawer-menu-name"
type="text"
name="name"
placeholder="山田 太郎"
autocomplete="name"
required>
</div>
<!-- メールアドレス入力欄 -->
<div class="registration-form-drawer-menu_field">
<label
class="registration-form-drawer-menu_label"
for="registration-form-drawer-menu-email">
メールアドレス
</label>
<input
class="registration-form-drawer-menu_input"
id="registration-form-drawer-menu-email"
type="email"
name="email"
placeholder="example@example.com"
autocomplete="email"
required>
</div>
<!-- パスワード入力欄 -->
<div class="registration-form-drawer-menu_field">
<label
class="registration-form-drawer-menu_label"
for="registration-form-drawer-menu-password">
パスワード
</label>
<input
class="registration-form-drawer-menu_input"
id="registration-form-drawer-menu-password"
type="password"
name="password"
placeholder="パスワードを入力"
autocomplete="new-password"
required>
</div>
<!-- パスワード確認入力欄 -->
<div class="registration-form-drawer-menu_field">
<label
class="registration-form-drawer-menu_label"
for="registration-form-drawer-menu-password-confirm">
パスワード確認
</label>
<input
class="registration-form-drawer-menu_input"
id="registration-form-drawer-menu-password-confirm"
type="password"
name="password_confirm"
placeholder="パスワードを再入力"
autocomplete="new-password"
required>
</div>
<!-- 会員登録ボタン -->
<button
class="registration-form-drawer-menu_submit"
type="submit">
会員登録する
</button>
</form>
<!-- 会員登録処理についての注意書き -->
<p class="registration-form-drawer-menu_note">
このサンプルには実際の会員登録処理は実装されていません。
</p>
</div>
</div>
<!-- JavaScriptファイルを読み込み -->
<script src="script.js"></script>
</body>
</html>ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLには会員登録フォーム付きドロワーメニューの構造、CSSにはフォームとドロワーメニューのデザイン、JavaScriptにはドロワーメニューの開閉処理を記述しています。現在のコードには会員登録処理は含まれておらず、画面表示とドロワーメニューの動作確認を目的としたサンプルです。
PHPと組み合わせて実際の会員登録機能として利用する場合は、index.htmlのform要素に送信先PHPを指定し、method属性をpostへ変更します。お名前・メールアドレス・パスワード・パスワード確認にはname属性が設定されているため、PHP側ではPOSTデータとして受け取れます。入力チェックや会員登録処理、データ保存などは送信先PHPで実装してください。
このサンプルは会員登録フォームの見た目とドロワーメニューの開閉を確認するためのコードです。PHPと組み合わせる場合も、HTML・CSS・JavaScriptの構成はそのまま利用でき、フォームのaction属性とmethod属性を変更することで会員登録処理へ接続できます。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.html は会員登録フォーム、ドロワーメニュー本体、開くボタン、閉じるボタンを配置します。PHPと組み合わせる場合は、form要素のaction属性へ送信先PHPを指定し、method属性をpostへ変更します。お名前はname=”name”、メールアドレスはname=”email”、パスワードはname=”password”、パスワード確認はname=”password_confirm”としてPHP側で受け取れます。
style.css はドロワーメニューの横幅、背景色、余白、角丸、影、入力欄、登録ボタンなどのデザインを管理します。PHPと組み合わせた場合でも、このファイルはそのまま利用できます。
script.js はドロワーメニューを開く処理、閉じるボタンで閉じる処理、フォーム送信時のデモ用処理を管理します。デモでは送信ボタン押下時の表示のみを行い、実際の会員登録処理は行いません。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置し、sample/index.htmlをブラウザで開くと動作を確認できます。「会員登録フォームを開く」ボタンをクリックするとドロワーメニューが開きます。
PHPと組み合わせる場合は、index.htmlのform要素を次のように変更します。
action=”#”
method=”get”
を、
action=”register.php”
method=”post”
へ変更します。送信先のregister.phpでは、name・email・password・password_confirmを受け取り、入力チェック、パスワード確認、会員登録、データ保存などの処理を実装してください。
カスタマイズできる内容
index.htmlではタイトル、説明文、ボタン名、お名前欄、メールアドレス欄、パスワード欄、パスワード確認欄、送信先PHPを変更できます。style.cssではドロワーメニューの横幅、背景色、入力欄の余白、角丸、影、ボタン色などを変更できます。script.jsではドロワーメニューの開閉処理を編集できます。
数値調整
style.cssのwidth:420px;を変更するとドロワーメニューの横幅が変わります。padding:28px;を変更するとドロワー内部の余白が変わります。gap:20px;を変更すると入力欄同士の間隔が変わります。animation:.35s;の0.35秒を変更するとドロワーメニュー表示アニメーションの速度が変わります。transition:.2s;の0.2秒を変更するとボタンのアニメーション速度が変わります。
レスポンシブ対応
style.cssではwidth:100%、max-width、padding、@media (max-width:640px)を使用してレスポンシブ対応しています。スマートフォンではドロワーメニューや余白が縮小され、タブレットやPCでは適切な横幅を保ったまま表示されます。
コメント