frontend/html

HTML.14.Input Tag-2

dalc3154 2025. 3. 14. 13:46

<input /> 태그의 주요 속성

인풋 태그를 활용하여 단순 내용 입력 뿐 아니라 여러가지 기능을 사용

ex) 입력란에 커서를 맞추거나 힌트 표시 가능, 반드시 입력해야 하는 필드 지정 

>>자바스크립트로 실행한 것을 인풋태그의 속성만으로도 처리할 수 있음

autofocus 속성

페이지를 불러오면 해당 속성을 가진 요소에 자동으로 입력 커서를 가져다 놓는 속성

<input type=텍스트-입력-필드(EX. "text") autofocus />

 

placeholder 속성

입력란에 힌트를 표시하는 속성

입력란에 있는 힌트는 클릭하면 내용이 사라짐

<input type=텍스트-입력-필드(EX. "tel") placeholder="전화번호를 입력하세요." />

 

readonly 속성

사용자 입력이 안되는 읽기 전용 필드

<input type=텍스트-입력-필드(EX. "text") readonly />

 

required 속성

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

폼을 서버로 전송할때 필수 필드의 내용이 모두 채워졌는지 검사함

<input type=텍스트-입력-필드(EX. "password") required />

 

name 속성

입력 필드를 송신할때 사용하는 속성

name 속성이 없으면 해당 입력 값이 전송되지 않음

송신한 데이터의 관리에 사용됨

'frontend > html' 카테고리의 다른 글

HTML.15.Form Tag  (0) 2025.03.14
HTML.13.Input Tag-1  (0) 2025.03.13
HTML.12.Form  (0) 2025.03.13
HTML.11.Media  (0) 2025.03.13
HTML.10.Image  (0) 2025.03.13