はじめに
先日、仕事の一環で会員登録サイトを製作することになった
それにあたって、ユーザーが登録した情報を保存するための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ページはこんな感じ
まあ、みれるレベルにはなりました
今回はフロントエンドであるフォームの作成をしました
次回はバックエンドのプログラムです
データベースを作成していきます
参考にしたページ
この記事を書いた人
