비밀번호를 입력할 수 있는 상자를 알아보겠습니다. 비밀번호 상자는 텍스트 입력 상자와 동일하지만, 입력한 내용이 HTML에 보이지 않고 *
등으로 가려지는 것이 특징입니다.
우리가 만들 페이지는 아래와 같습니다.
코드는 https://github.com/koeunyeon/ci4/tree/view-input-pw 에 있습니다.
View
컨트롤러에 아래의 메소드를 추가합니다.
app/Controllers/View.php
public function pw(): String
{
$input_pw = $this->request->getPost("input_pw") ?? "";
return View("/view/pw", ['input_pw'=>$input_pw]);
}
특별한 코드는 없으므로 컨트롤러 설명은 생략합니다.
뷰를 추가하겠습니다.
app/Views/view/pw.php
<form method="POST">
비밀번호 : <input type="password" name="input_pw" value="<?= $input_pw ?>" /> <!-- (1) -->
<p><input type="submit" value="확인"/></p>
</form>
입력한 비밀번호는 <span><?= $input_pw ?></span> 입니다. <!-- (2) -->
(1) 비밀번호 상자가 텍스트 상자와 다른 점은 type="password"
라는 점입니다. 이 외 모든 특성은 텍스트 상자와 동일합니다.
(2) 비밀번호는 *
표기되어 알아볼 수가 없으므로 입력한 비밀번호가 정상적으로 보이는 지 확인하기 위해 표기했습니다.
참고로 비밀번호 상자는 영어, 숫자, 특수문자 외에는 입력되지 않습니다. 즉 ASCII로 표현할 수 있는 글자만 입력할 수 있습니다. 안타깝지만 한글 비밀번호는 불가능하므로 참고해 주세요.
브라우저에서 http://localhost:8080/view/pw에 접속해 결과를 확인합니다.