BLOG-SINGLE

はじめに

先日、仕事の一環で会員登録サイトを製作することになった
それにあたって、ユーザーが登録した情報を保存するための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ページはこんな感じ

まあ、みれるレベルにはなりました

今回はフロントエンドであるフォームの作成をしました
次回はバックエンドのプログラムです
データベースを作成していきます

参考にしたページ

この記事を書いた人

佐藤亮太

取締役

フロントエンド、バックエンドのプログラムを得意とする

page top