[Html] autofocus, required , placeholder, readonly

autofocus

문서가 로드되면 autofocus 속성이 들어간 input 태그에 자동으로 focus가 이뤄집니다.

  <form action="" method="">
    <input type="text" autofocus>
    <input type="text">
    <input type="text">
  </form>

 

required

회원가입을 할 때 필수항목을 입력하지 않으면 경고 문구가 뜨고 넘어가지 않죠? 원래는 스크립트로 구현해야 하는데 HTML로 쉽게 할 수 있는 방법이 바로 required 속성입니다.

input태그 모두 required속성을 주겠습니다.
그리고 한 칸을 비운채로 submit버튼을 누르면 어떻게 될까요?

  <form action="" method="">
    <input type="text" required>
    <input type="text" required>
    <input type="text" required>
    <button type="submit">다음</button>
  </form>

placeholder  

고객이 회원가입을 할 때 해당 입력창에 뭘 입력해야 하는지 힌트를 주는 속성이 바로 placeholder입니다.
물론 응용해서 회원가입 뿐만 아니라 다양한 용도로 사용할 수도 있겠죠?

  <form action="" method="">
    <input type="text" placeholder="아이디">
    <input type="password" placeholder="비밀번호">
  </form>

readonly  

입력은 받지 않고 읽기와 복사만 가능한 속성입니다.
어디에 사용하는지가 제일 중요하죠?

스크립트를 이용해서 특정 조건을 만족하면 활성화가 되게끔 합니다. 예를 들면 은행 대출을 받을 때 사전 설문조사로 특정 조건을 만족한 고객만 해당 입력창에 입력이 가능하도록 하는 것이죠.

  <form action="" method="">
    <input type="text" readonly value="조건 만족 전 입력 불가">
  </form>