HTML 에서 <input>으로 입력을 받을때 자동커서, Enter 치면 다음 <input>으로 커서를 넘기는
autofocus : 문서가 로드되면 autofocus 가 설정된 <input>에 자동focus를 준다.
required : required 가 설정된 <input>에 입력값이 없을때 <form>을 submit하게 되면 해당 <input>으로 focus를 넘긴다.
간단한 입력 <form>을 작성하여 autofocus 속성과 required 속성이 작동하는걸 보겠습니다.
<form class="" action="index.html" method="post">
<label for="">A</label>
<input type="text" required="true" autofocus=""><br />
<label for="">B</label>
<input type="text" required=""><br />
<label for="">C</label>
<input type="text" required=""><br />
<label for="">D</label>
<input type="text" required="">
<button type="submit" name="button">전송</button>
</form>
autofocus 속성을 첫번째 <input>에 설정을 해준후 문서를 로드하면 자동으로 커서가 깜빡이는 모습입니다.
required 속성을 세번째 <input>에 설정한후 값을 모두 입력하고 '전송'을 하게 되면 <form>설정된 주소로 값을 보내게 됩니다.
(index.html은 현재폴더에 만들어 두지않아서 Not Found오류가 발생하였습니다.)
만약 세번째 <input>에 값이 비워진상태에서 '전송'을 하게 되면 경고문구와 함께 해당 <input>으로 커서가 이동하게 됩니다.
이 두가지 속성을 모르고 <form>을 작업할때는 자바스크립트로 조금 복잡하게 코딩을 했었는데 찾아보니
<input> 태그안에서 간단하게 속성만으로 동작할 수 있게
회원가입이나 로그인 여러 필수 정보를 입력받는 <form>태그에서 두가지 속성 만으로도 편하게 구현이 가능할 것 같습니다.