環境
php 7.4.1
Mysql Ver 15.1 Distrib 10.4.11-MariaDB
Laravel 7.23.0
composer 1.10.9
Menu
新規登録画面の作成
新規登録画面であるregister.blade.phpの編集をしていきたいと思います。
既存のnameを削除
【パス】
resources\views\auth\register.blade.php
まずはデフォルトname属性値が入ってる部分をごっそり削除します。
範囲
下記の範囲を全て削除します。
<div class=”form-group row”>name属性値</div>
挿入
ファイルパス
resources\views\auth\register.blade.php
register.blade.phpに①～⑤を挿入して登録画面の構成を変更します。
5つを新規挿入
①姓(lastname)
②名(firstname)
③電話番号(tel)
④新規登録（タイトル部分）
⑤新規登録（ボタン部分）
①姓(lastname)のフォームを挿入
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!--姓--> <div class="form-group row"> <label for="lastname" class="col-md-4 col-form-label text-md-right">姓</label> <div class="col-md-6"> <input id="lastname" type="text" class="form-control @error('lastname') is-invalid @enderror" name="lastname" value="{{ old('lastname') }}" required autocomplete="lastname" autofocus> @error('lastname') <span class="invalid-feedback" role="alert"> <strong>{{ $message }}</strong> </span> @enderror </div> </div> |
②名(firstname)のフォームを挿入
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!--名--> <div class="form-group row"> <label for="firstname" class="col-md-4 col-form-label text-md-right">名</label> <div class="col-md-6"> <input id="firstname" type="text" class="form-control @error('firstname') is-invalid @enderror" name="firstname" value="{{ old('firstname') }}" required autocomplete="firstname" autofocus> @error('firstname') <span class="invalid-feedback" role="alert"> <strong>{{ $message }}</strong> </span> @enderror </div> </div> |
③電話番号(tel)のフォームを挿入
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!--電話番号--> <div class="form-group row"> <label for="tel" class="col-md-4 col-form-label text-md-right">電話番号</label> <div class="col-md-6"> <input id="tel" type="text" class="form-control @error('tel') is-invalid @enderror" name="tel" value="{{ old('tel') }}" required autocomplete="name" autofocus> @error('tel') <span class="invalid-feedback" role="alert"> <strong>{{ $message }}</strong> </span> @enderror </div> </div> |
④新規登録（タイトル部分）挿入
1 | <div class="card-header">新規登録</div> |
⑤新規登録（ボタン部分）
1 2 3 4 5 6 7 | <div class="form-group row mb-0"> <div class="col-md-6 offset-md-4"> <button type="submit" class="btn btn-primary"> 新規登録 </button> </div> </div> |
全サンプルコード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 | @extends('layouts.app') @section('content') <div class="container"> <div class="row justify-content-center"> <div class="col-md-8"> <div class="card"> <div class="card-header">新規登録</div> <div class="card-body"> <form method="POST" action="{{ route('register') }}"> @csrf <!--姓--> <div class="form-group row"> <label for="lastname" class="col-md-4 col-form-label text-md-right">姓</label> <div class="col-md-6"> <input id="lastname" type="text" class="form-control @error('lastname') is-invalid @enderror" name="lastname" value="{{ old('lastname') }}" required autocomplete="lastname" autofocus> @error('lastname') <span class="invalid-feedback" role="alert"> <strong>{{ $message }}</strong> </span> @enderror </div> </div> <!--名--> <div class="form-group row"> <label for="firstname" class="col-md-4 col-form-label text-md-right">名</label> <div class="col-md-6"> <input id="firstname" type="text" class="form-control @error('firstname') is-invalid @enderror" name="firstname" value="{{ old('firstname') }}" required autocomplete="firstname" autofocus> @error('firstname') <span class="invalid-feedback" role="alert"> <strong>{{ $message }}</strong> </span> @enderror </div> </div> <!--電話番号--> <div class="form-group row"> <label for="tel" class="col-md-4 col-form-label text-md-right">電話番号</label> <div class="col-md-6"> <input id="tel" type="text" class="form-control @error('tel') is-invalid @enderror" name="tel" value="{{ old('tel') }}" required autocomplete="name" autofocus> @error('tel') <span class="invalid-feedback" role="alert"> <strong>{{ $message }}</strong> </span> @enderror </div> </div> <div class="form-group row"> <label for="email" class="col-md-4 col-form-label text-md-right">メール</label> <div class="col-md-6"> <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email"> @error('email') <span class="invalid-feedback" role="alert"> <strong>{{ $message }}</strong> </span> @enderror </div> </div> <div class="form-group row"> <label for="password" class="col-md-4 col-form-label text-md-right">パスワード</label> <div class="col-md-6"> <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="new-password"> @error('password') <span class="invalid-feedback" role="alert"> <strong>{{ $message }}</strong> </span> @enderror </div> </div> <div class="form-group row"> <label for="password-confirm" class="col-md-4 col-form-label text-md-right">パスワード確認</label> <div class="col-md-6"> <input id="password-confirm" type="password" class="form-control" name="password_confirmation" required autocomplete="new-password"> </div> </div> <div class="form-group row mb-0"> <div class="col-md-6 offset-md-4"> <button type="submit" class="btn btn-primary"> 新規登録 </button> </div> </div> </form> </div> </div> </div> </div> </div> @endsection |
新規登録画面の確認
テストするための新規登録画面が完成しました。
まとめ
なんだか日本の登録画面らしくなってきましたね！
以上です。
