Demo
View&CSS3
<div class="cake3_form_user2">
<?=$this->Form->create(null, ['type' => 'post', 'url' => ['action' => 'index']])?>
<p>会員ID</p>
<?=$this->Form->text('username')?>
<p>パスワード</p>
<?=$this->Form->password('password', ['id' => 'password'])?>
<table>
<tr>
<td><input type="checkbox" id="password_eye"></td>
<td><label for="password_eye">パスワードを表示する</label></td>
</tr>
</table>
<p>郵便番号</p>
<?=$this->Form->text('post_number')?>
<p>ご住所</p>
<?=$this->Form->text('address')?>
<p>お名前</p>
<?=$this->Form->text('name')?>
<p>携帯電話番号</p>
<?=$this->Form->text('tel')?>
<p>メールアドレス</p>
<?=$this->Form->text('e_mail')?>
<button type="submit" name="button" value="confirm">確認</button>
<?=$this->Form->end();?>
</div>
<!-- パスワードに入力された内容を表示 -->
<script>
let password = document.getElementById('password');
let passwordEye = document.getElementById('password_eye');
passwordEye.addEventListener('change', function(){
if(passwordEye.checked){
password.setAttribute('type', 'text');
}else{
password.setAttribute('type', 'password');
}
}, false);
</script>
.cake3_form_user2{
width: 80%;
text-align: left;
margin-left: auto;
margin-right: auto;
padding: 2rem;
border: 1px solid #ccc;
}
.cake3_form_user2 p{
margin-top: 1rem;
}
.cake3_form_user2 input{
display: block;
width: 98%;
height: 2rem;
outline: none;
padding-left: 0.5rem;
margin-top: 0.2rem;
border: 1px solid #ccc;
}
.cake3_form_user2 table{
width: 100%;
margin-top: 0.5rem;
}
.cake3_form_user2 table td{
vertical-align: middle;
}
.cake3_form_user2 table input{
height: 1rem;
}
.cake3_form_user2 table label{
font-size: 0.7rem;
padding-left: 0.5rem;
}
.cake3_form_user2 button{
display: block;
cursor: pointer;
outline: none;
padding: 1rem 2rem;
margin-top: 2rem;
margin-left: auto;
margin-right: auto;
border: 1px solid #ccc;
}
