자동으로 입력 커서를 갖다 놓는 autofocus 속성
예전에는 이 기능을 구현하려면 자바스크립트를 이용해야했지만 HTML5에서는 autofocus라는 속성으로 구현이 가능하다.
<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="하이픈 빼고 입력해 주세요.(01012345678)" required>
읽기 전용 필드를 만들어 주는 readonly 속성
사용자가 입력하지는 못하고 읽게만 하는 읽기 전용 필드를 만들 때 사용.
readonly 속성은 간단히 readonly라고만 쓰거나 readonly=”readonly”, 또는 readonly=”true”로 지정함.
<input type=텍스트-입력-필드 readonly>
필수 입력 필드를 지정하는 required 속성
내용을 폼에 입력한 후 submit 버튼을 클릭하면 폼을 서버로 전송하는데, 이때 필수 필드에 필요한 내용이 모두 채워졌는지 검사해야 함.
이렇게 반드시 입력해야 하는 내용에는 required 속성을 지정해 필수 필드로 만들 수 있다.
이 속성을 사용하려면 required=”required”라고 하거나 required라고만 해도 된다.
//사용예시
<label for="phone">연락처</label>
<input type="tel" id="phone" placeholder="하이픈 빼고 입력해 주세요.(01012345678)" required>
'FrontEnd > HTML' 카테고리의 다른 글
HTML <div>,<span>,<article>,<section> 태그 차이 (0) | 2022.08.07 |
---|---|
HTML 수평선 그리기 (0) | 2022.08.07 |
HTML 폼에서 사용하는 태그 (0) | 2022.08.07 |
HTML 사용자 입력을 위한 input태그 (0) | 2022.08.07 |
HTML 다양한 파일 삽입 (0) | 2022.08.07 |