はじめに
先日、仕事の一環で会員登録サイトを製作することになった
それにあたって、ユーザーが登録した情報を保存するためのDB(データベース)を作成することになった
本文は、その覚書である
今回の内容はいくつかの記事に分けて投稿していきます
やりたいこと
インターフェース編(このページ)
データベースの基礎編
ログイン機能実装編
ログアウト機能実装編
今回は、インターフェースを整えていきたと思います!
ユーザー入力フォームの作成
html<!DOCTYPE html> <html> <head> <title>会員登録フォーム</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <form> <label>名前を入力してください</label> <input name="ID" type="text" class=""> <label>メールアドレスを入力してください</label> <input name="mail" type="email" class=""> <label>パスワードを入力してください</label> <input name="password" type="password" class=""> <label>パスワードを再入力してください</label> <input name="password" type="password" class=""> <input type="submit" name="" value="送信する"> </form> </body> </html>
input中のnameはユーザーの入力情報をデータベースに送信する時に使いますのでしっかり定義しておきましょう
css
*{ margin: 0; padding: 0; } input{ display: block; }
CSSは最小限の設定だけ
WEBページはこんな感じ

う〜ん、めちゃくちゃダサいですね...
軽く整えておきましょう
html
<!DOCTYPE html> <html> <head> <title>会員登録フォーム</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <div class="form"> <div class="form_title">会員登録フォーム</div> <div class="form_content"> <form> <div class="form_list"> <label>名前を入力してください</label> <input name="ID" type="text" class=""> <label>メールアドレスを入力してください</label> <input name="mail" type="email" class=""> <label>パスワードを入力してください</label> <input name="password" type="password" class=""> <label>パスワードを再入力してください</label> <input name="password" type="password" class=""> <input type="submit" name="" value="送信する"> </div> </form> </div> </div> </body> </html>
css
*{ margin: 0; padding: 0; } input{ display: block; width: 100%; font-size: 1rem; color: #495057; background-color: #ffffff; border: 1px solid #ced4da; border-radius: 5px; box-sizing: border-box; padding: 10px; margin-top: 5px; margin-bottom: 25px; } input[type="submit"]{ display: block; width: 150px; text-align: center; color: #ffffff; background-color: #45cc82; border-bottom: solid 5px #3cb371; } .form{ width: 500px; margin: 25px 50px; background-color: white; border: 1px solid #dddddd; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); } .form_title{ color: white; background-color: #3cb371; padding: 10px 30px; } .form_content{ margin: 25px 50px; } .form_list{ margin-bottom: 2em; }
WEBページはこんな感じ

まあ、みれるレベルにはなりました
今回はフロントエンドであるフォームの作成をしました
次回はバックエンドのプログラムです
データベースを作成していきます
参考にしたページ
この記事を書いた人
