$$config title: [HTML/CSS] HTML - form 구성 엘리먼트 keywords: - HTML - form - ... $$ # 1. 폼 엘리먼트 그룹 field, legend 태그 - field (fieldset) 태그 : 폼 태그 안에 관련있는 폼 엘리먼트들을 그룹화 할 때 사용. - legend 태그 : field 태그 하위에 그룹화한 폼 엘리먼트들을 목적에 맞게 이름을 지정함. ![field&legend](https://to2.kr/dUv) ```html ``` # 2. 다양한 모양의 input 태그 : type 속성을 이용해서 태그 모양을 다양하게 변경시킬 수 있음. (text, radio, checkbox, password, button, hidden, fileupload, submit, reset 등) (자세한 설명은 이전 input글 참고) ![](https://www.nextree.co.kr/content/images/2021/01/hjkwon-140328-form_-05.png) ```html ``` pattern을 이용해서 정확한 글 작성 형식을 지정할 수도 있음. (때에 따라서 찾아서 쓰기) # 3. 목록 태그 select, optgroup, option 태그들 - select 태그 : 항목을 선택할 수 있는 태그 (속성 : size(한번에 표시할 항목수), multiple(다중선택 여부)) - optgroup 태그 : select 태그 하위 태그로 목록들을 그룹화할 경우 사용 - option 태그 : optgroup 태그 하위 태그로 목록을 나타내는 태그 ![](https://www.nextree.co.kr/content/images/2021/01/hjkwon-140328-form_-06.png) ```html ``` # 4. 여러 줄 글 상자 textarea 태그 : 여러 줄을 입력받는 태그 (속성 : rows (줄 조정), cols (한줄에 입력될 크기 지정)) ![](https://www.nextree.co.kr/content/images/2021/01/hjkwon-140328-form_-07.png) ```html 개인 정보 입력 가입 인사

``` # 5. HTML5 에서 추가된 엘리먼트 태그 - 입력값 후보 datalist 태그 : 텍스트 상자에 입력값 후보 목록을 지정할 경우 사용 ![](https://www.nextree.co.kr/content/images/2021/01/hjkwon-140328-form_-08.png) ```html ``` - input 태그의 date : input의 속성 중 날짜를 입력받기 위한 속성값 (이 값이 서버 프로그램에 전달되면 자바 data객체에 바로 데이터가 전달되어 쉽게 data 데이터를 서버프로그램에서 받을 수 있음,) ![](https://www.nextree.co.kr/content/images/2021/01/hjkwon-140328-form_-10.png) ```html

``` - input 태그의 number와 range 태그 두 태그 모두 숫자를 입력할 때 사용하는데 range 태그는 `슬라이더` 형태의 UI임. (min, max 속성으로 최소 최대 지정) ![](https://www.nextree.co.kr/content/images/2021/01/hjkwon-140328-form_-11.png) ```html HTML5 < range > range : ... 코드 생략 ... ```