<!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はユーザーの入力情報をデータベースに送信する時に使いますのでしっかり定義しておきましょう

*{
margin: 0;
padding: 0;
}

input{
display: block;
}

CSSは最小限の設定だけ

WEBページはこんな感じ

う〜ん、めちゃくちゃダサいですね…
軽く整えておきましょう

<!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>

*{
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ページはこんな感じ