데이터 나열해 보여주기

<select>, <option>

• 여러 옵션 중에서 선택 – 드롭다운 목록 
• 공간을 최소한으로 사용하면서 여러 옵션 표시 가능

<select> 태그의 속성

 

 

<option> 태그의 속성

 

 

<select>, <optgroup>, <option>

 

<optgroup> 태그

• 여러 항목을 그룹을 묶을 때 사용
• label 속성을 사용해 그룹 제목을 붙임

<datalist>, <option> 

• 데이터 목록에 제시한 값 중에서 선택하면 그 값이 자동 으로 텍스트 필드에 입력됨 
• 데이터 목록에 id를 이용해 이름을 붙이고,
• <input> 태그의 list 속성에 데이터 목록 id를 지정함.

<option> 태그의 속성

 

 

 

<textarea> 

• 텍스트 영역 – 여러 줄의 텍스트 입력
• 게시판의 게시물 입력 창, 회원 가입 양식의 약관 등

<textarea> 태그의 속성

 

<button>

• 다양한 형태의 버튼 삽입
• CSS를 이용해 원하는 형태로 꾸밀 수 있음

 

기타 다양한 폼 요소들

<output>

• 계산 결과를 브라우저에 표시 
• 브라우저 화면에 다르게 표시되는 것은 아니지만 <output> 태그로 묶인 부분이 일반 텍스트가 아니라 계 산의 결과값이라는 점을 웹 브라우저가 정확히 인식할 수 있습니다

<progress> 

• 작업 진행 상태를 브라우저에 표시 
• 값에는 특별한 단위가 없고 단위를 표시하지도 않음

<meter>

• 전체 크기 중에서 얼마나 차지하는지를 표현할 때 사용 예) 하드 디스크 사용량, 유권자 투표율 등

사용할 수 있는 속성

 

 

코드작성

 

 

코드출력