input 태그에는 여러 type이 존재하고 이외에도 많은 속성들이 존재하는데요. 그중에서 많이들 사용하는 속성 몇가지만 보고 가겠습니다.
<input type="text" readonly>
<input type="text" disabled>이렇게 작성하면 무슨 짓을 해도 input 의 값을 수정할 수 없습니다. 첫번째는 영어를 직역하면 읽기전용입니다. 아래의 속성은 disabled 로 수정할 수 없는 것은 동일하지만 뜻은 비활성화로 존재는 하지만 보이는 모습자체가 readonly에 비해 죽어있는 듯한 모습입니다.
<form>
<input type="text" required>
<button>제출</button>
</form>required는 필수값이란 뜻입니다. 이렇게 작성한뒤 아무런 값을 입력하지 않으면 form 자체에서 입력칸에 값을 입력하라고 하면서 작동하지 않습니다. 내장되어 있는 유용한 기능입니다. 회원가입등에서 필수정보를 입력하는데 유용하게 사용하시면 됩니다.
프론트엔드는 어찌보면 0.1초가 중요한 듯한데요. 회원가입을 눌른 뒤 화면이 전환되고 다시 한 번 이메일을 클릭해서 입력하는 것과 회원가입만 누르면 자동으로 이메일에 먼저 가서 키보드 쫘악 올라오는 것은 천지차이입니다. 이러한 로직을 아주 간단하게 autofocus 한줄만 추가하셔도 된다는것! 그러면 자동으로 해당 위치의 input을 focus하고 있습니다.
<form>
<input type="text" autofocus>
// 여러개 쓰면 제일 첫번째 태그에만 적용됨.
<input type="text" autofocus>
<input type="text" autofocus>
<button>제출</button>
</form>happy coding!
Reactor