[HTML5] 입력 양식 태그와 구조화 태그

01 입력 양식 태그

입력 양식

- 사용자에게 정보를 입력받는 요소 

입력 양식 개요

- <form> 태그: 영역 생성

데이터 전달 방식

- <form> 태그는 method 속성의 방식으로 action 속성 장소에 데이터 전달

- GET 방식: 주소에 데이터를 입력해서 전달

- POST 방식: 주소 변경 없이 비밀스럽게 데이터 전달

입력 양식 종류

[예제 1] 간단한 입력 양식 생성

• 라디오 버튼의 name 속성을 이용해 여러 대상 중 하나만 선택하는 형태

 

[예제 2] 선택 가능한 입력 양식

1. 한 항목만 선택하기: <select>태그 이용

• 목록으로 보여 주는 항목 중 하나 또는 여러 개를 선택할 때 사용
• 기본적으로 하나만 선택가능
• <optgroup>, <option>태그를 함께 사용

2. 여러 항목 선택하기: <select>태그의 multiple 속성 사용

3. 선택 옵션 묶기: <optgroup> 태그 사용

 

[예제 3] 연관 있는 입력 양식 그룹으로 묶기

• <fieldset> 태그, <legend> 태그

02 HTML5 문서 구조화

HTML5의 대표적인 공간 분할 태그

-> CSS로 원하는 레이아웃을 구성하기 위해 공간 분할

- <div> 태그, <span> 태그

시맨틱 태그

- 시맨틱 웹

• 특정 태그에 의미를 부여한 웹
• 프로그램이 코드를 읽고 의미를 인식할 수 있는 지능형 웹

 

시맨틱 태그를 이용한 레이아웃 구성

---

과제