会員登録フォーム1｜パスワードチェック,表示/非表示レスポンシブWebデザイン

Demo

会員ID

パスワード

もう一度同じパスワードを入力してください

郵便番号

ご住所

お名前

携帯電話番号

メールアドレス

HTML&CSS

HTMLindex.htmldownload

<div class="form_user3">

	<form action="" method="post">

		<p>会員ID</p>

		<input type="text" name="user_id">

		<p>パスワード</p>

		<input type="password" name="password" id="password">

		<table>

			<tr>

				<td><input type="checkbox" id="password_eye"></td>

				<td><label for="password_eye">パスワードを表示する</label></td>
			</tr>
		</table>

  		<p>もう一度同じパスワードを入力してください</p>

		<input type="password" name="password_check" id="password_check">

		<table>

			<tr>
				<td><input type="checkbox" id="password_check_eye"></td>

				<td><label for="password_check_eye">パスワードを表示する</label></td>
			</tr>
		</table>

		<p>郵便番号</p>

		<input type="text" name="post_number">

		<p>ご住所</p>

		<input type="text" name="address">

		<p>お名前</p>

		<input type="text" name="name">

		<p>携帯電話番号</p>

		<input type="text" name="tel">

		<p>メールアドレス</p>

		<input type="text" name="e_mail">

		<button type="submit" name="button" value="confirm">確認</button>
	</form>
</div>
		
<!-- パスワードに入力された内容を表示 -->
<script>

	const password = document.getElementById('password');

	const passwordEye = document.getElementById('password_eye');

	passwordEye.addEventListener('change', function(){

		if(passwordEye.checked){

			password.setAttribute('type', 'text');

		}else{

			password.setAttribute('type', 'password');
		}
	}, false);
</script>

<!-- パスワードチェックに入力された内容を表示 -->
<script>

	const password_check = document.getElementById('password_check');

	const passwordCheckEye = document.getElementById('password_check_eye');

	passwordCheckEye.addEventListener('change', function(){

		if(passwordCheckEye.checked){

			password_check.setAttribute('type', 'text');

		}else{

			password_check.setAttribute('type', 'password');
		}
	}, false);
</script>

CSSstyle.cssdownload

.form_user3{
	width: 80%;
	text-align: left;
	margin-left: auto;
	margin-right: auto;
	padding: 2rem;
	border: 1px solid #ccc;
}
.form_user3 p{
	margin-top: 1rem;
}
.form_user3 input{
	display: block;
	width: 98%;
	height: 2rem;
	outline: none;
	padding-left: 0.5rem;
	margin-top: 0.2rem;
	border: 1px solid #ccc;
}
.form_user3 table{
	width: 100%;
	margin-top: 0.5rem;
}
.form_user3 table td{
	vertical-align: middle;
}
.form_user3 table input{
	height: 1rem;
}
.form_user3 table label{
	font-size: 0.7rem;
	padding-left: 0.5rem;
}
.form_user3 button{
	display: block;
	cursor: pointer;
	outline: none;
	padding: 1rem 2rem;
	margin-top: 2rem;
	margin-left: auto;
	margin-right: auto;
	border: 1px solid #ccc;
}
© 2025 wayday