폼(2)

자동으로 입력 커서를 갖다 놓는 속성

• autofocus 속성
  • 페이지를 불러오자마자 form에서 원하는 요소에 마우스 포인터를 표시할 수 있음
  • 기본형 :

    <input type=텍스트-입력-필드 autofocus required>

-(예시)

<label for="user-name">이름</label>
<input type="text" id="user-name" autofocus>

-(결과)

---

힌트를 표시해 주는 속성

• placeholder 속성
  
  • 사용자가 텍스트를 입력할 때 입력란에 적당한 힌트 내용을 표시해서 그 필드를 클릭하면 내용이 사라지도록 만들 수 있음
  • 이를 사용하면 텍스트 필드 앞에 제목을 사용하지 않고도 사용자에게 해당 필드에 어떤 내용을 입력해야 할지 알려 줄 수 있어서 편리함

-(예시)

<label for="phone">전화번호</label>
<input type="tel" id="phone" placeholder="전화번호를 입력해주세요.">

-(결과)

---

읽기 전용 필드를 만들어 주는 속성

• readonly 속성
  • 사용자가 입력하지는 못하고 읽게만 하는 읽기 전용 필드
  • 텍스트 필드나 텍스트 영역에 내용이 표시되어 있어도 사용자는 그 내용만 볼 수만 있고 입력을 불가능함
  • readonly="readonly" 또는 readonly="true"로 지정함
  • 기본형 :

    <input type=텍스트-입력-필드 readonly>

---

필수 입력 필드를 지정하는 속성

• required 속성
  • 필수 필드에 필요한 내용이 모두 채워졌는지 검사함
  • 입력하는 내용에 required 속성을 지정하여 필수 필드로 만들 수 있음
  • required="required" 혹은 required 라고만 지정해도 됨
    

-(예시)

<form>
    <label for="required">필수!!</label>
    <input type="text" id="required" autofocus required>
</form>

-(결과)