피드로 돌아가기
Dev.toFrontend
원문 읽기
HTML part 3
HTML 폼 요소(Label, Button, Select, Option, Textarea)의 정의와 사용 방법 소개
AI 요약
Technical Solution
- Label 요소: for 속성과 input의 id 속성을 연결하여 사용자 클릭 시 입력 필드에 포커스 전달
- Button 요소: type 속성(button, submit, reset)으로 버튼 동작 방식 정의
- Select 요소: option 자식 요소로 드롭다운 리스트 구성, multiple 속성으로 다중 선택 활성화
- Option 요소: value 속성으로 서버 전송 값 지정, selected 속성으로 기본값 설정, disabled 속성으로 선택 불가 처리
- Textarea 요소: rows, cols 속성으로 크기 지정, placeholder 속성으로 사용자 입력 가이드 제공
실천 포인트
HTML 폼을 구성하는 엔지니어는 Label의 for 속성과 Input의 id를 명시적으로 연결하면 사용자 접근성을 향상시킬 수 있고, Select 요소에서 Option의 value 속성을 설정하면 백엔드에서 사용자 선택값을 정확하게 수신할 수 있다