// education

다양한 입력 폼과 HTML5 유효성 검사

**폼(Form)**은 웹 사이트 이용자로부터 아이디, 비밀번호, 이메일, 날짜 등의 데이터를 입력받아 서버로 전달하는 입력 인터페이스입니다.


1. 폼 기본 구조와
태그 속성

<form action="/api/login" method="POST">
  <label for="user-id">아이디:</label>
  <input type="text" id="user-id" name="username" required placeholder="아이디 입력">

  <button type="submit">로그인</button>
</form>

2. 다양한 태그의 type 종류

HTML5에서는 모바일 환경에 최적화된 다양한 타입의 입력 필드를 제공합니다.

type 속성값 용도 모바일 키보드 형태 변화
text / password 일반 텍스트 및 암호 마스킹 입력 일반 키보드
email 이메일 주소 입력 @ 기호가 포함된 키보드
tel 전화번호 입력 숫자 패드 키보드
number 숫자 입력 (min, max, step 조절) 숫자 키보드
date / time 날짜 및 시간 선택 달력/시계 피커 출력
color 색상 선택기 팝업 표시 컬러 피커 출력

3. HTML5 자체 유효성 검사 (Validation) 속성

자바스크립트 코드 없이도 HTML 태그 속성만으로 올바른 값 입력 여부를 자동 검사합니다.


4. 자주 묻는 질문 (Q&A)

Q. <label> 태그는 왜 꼭 써야 하나요? A. <label> 태그의 for 속성과 <input>id를 연결하면, 글자(라벨)를 클릭해도 입력창에 커서가 닿아 편의성이 향상되고 스크린 리더의 접근성이 크게 올라갑니다.

← 이전고급 표현을 위한 CSS3 활용 (박스 모델, Flexbox) 다음 →실전 웹사이트 레이아웃 제작 실습