HTML 폼 관련 태그

< HTML 폼 관련 태그 >

여러 데이터를 나열해 표시하고 사용자가 선택할 수 있도록 해 주는 폼 관련 태그들

---

* 2개 이상의 데이터 나열

• <select 속성="속성 값">

      <optgroup label="값">

          <option value="값" 속성="속성 값"> 내용 1 </option>

          <option value="값" 속성="속성 값"> 내용 2 </option>

          ...

      </optgroup>

  </select>

  : 드롭 다운 목록 만들기

  : 클릭했을 때 옵션들이 요소 아래쪽으로 펼쳐진다.

  : 공간을 최소한으로 사용하면서 여러 옵션을 표시하고 싶을 때 사용

 

• <select> ~ </select> 태그

  : 드롭다운 생성

  : 기본적으로 한 가지 옵션이 표시되고 화살표를 클릭하면 나머지 옵션이 펼쳐진다.

 

→ size 속성

  : 화면에 표시될 드롭다운 메뉴의 항목 개수 지정

  !  

크롬 브라우저의 경우, 지정한 개수보다 하나 더 많은 옵션이 나타난다.

 

→ multiple 속성

  : ctrl 키를 누른 상태로 드롭다운 메뉴에 있는 여러 항목 선택 가능

 

 

• <option> ~ </option> 태그

  : 드롭다운 목록에 표시되는 옵션 지정

 

→ value 속성

  : 옵션을 선택했을 때 서버로 넘겨질 값 지정

 

→ selected 속성

  : 화면에 표시되는 기본 옵션 지정

 

 

• <optgroup> ~ </optgroup> 태그

  : 옵션을 그룹으로 묶는 태그

 

→ label 속성

  : 그룹의 제목 지정

 

 

• <datalist> ~ </datalist> 태그

  : 텍스트 데이터 목록 중에서 값을 선택하는 태그

  : 즉, 텍스트를 직접 입력하지 않아도 데이터 목록에 제시된 값 중에서 선택하면 그 값이 자동으로 입력된다.

  : <input> 태그의 list 속성 값과 데이터 목록의 id가 동일해야 한다.

  : <option> 태그에는 value 속성과 label 속성을 사용할 수 있다.

ex)

<input type="text" id="favorite" list="choices">
<datalist id="choices">
    <option value="strawberry" label="딸기"></option>
    <option value="orange" label="오렌지"></option>
    <option value="grape" label="포도"></option>
    <option value="watermelon" label="수박"></option>
</datalist>

 

 

• <textarea> ~ <textarea> 태그

  : 여러 줄 입력하는 텍스트 영역

  : 한 줄 이상의 문장을 입력할 때 사용하는 폼

 

→ name 속성

  : 다른 폼 요소와 구분하기 위해 텍스트 영역의 이름 지정

 

→ cols 속성

  : 텍스트 영역의 가로 너비를 문자 단위로 지정

 

→ rows 속성

  : 텍스트 영역의 세로 길이를 줄 단위로 지정

  : 지정한 숫자보다 줄 개수가 많아지면 스크롤 막대가 생김

 

 

• <button> ~ <button> 태그

  : 버튼 생성

  : <input> 태그의 submit, reset, button과 같은 기능을 하지만 화면 낭독기에서 역할을 정확히 전달할 수 있다.

  : css, 이미지 파일로 다양하게 스타일 지정 가능

 

→ submit 속성

  : 폼을 서버로 전송

 

→ reset 속성

  : 폼에 입력한 모든 내용 초기화

 

→ button 속성

  : 버튼 형태만 생성, 자체 기능은 無

 

<button type="submit | reset | button">내용</button>

 

반응형

 

• <output> ~ </output> 태그

  : 계산 결과

  : 모든 브라우저에서 사용 가능

  : 일반 텍스트가 아닌 계산의 결과 값

 

 

• <progress> ~ </progress> 태그

  : 작업 진행 상태를 나타내는 태그

  : 작업 시작을 0으로, 최종 완료를 최댓값으로 잡아 진행 상태를 숫자로 표현

 

→ value 속성

  : 작업 진행 상태를 나타내며 부동 소수점으로 표현

  : 0보다 크거나 같고 max 값보다 작거나 같아야 한다.

  : max 값이 지정되지 않았다면 1.0보다 작아야 한다.

 

→ max 속성

  : 작업이 완료되려면 얼마나 많은 작업을 해야 하는지 부동 소수점으로 표현

  !  

부동 소수점이란?

컴퓨터에서 실수를 표시하는 방법으로, 소수점의 위치를 고정시키지 않으며 가수와 지수를 사용하여 실수를 표현한다. 가수는 유효숫자를 나타내며 지수는 소수점의 위치를 나타낸다.

 

<progress value="값" max="값"></progress>

 

 

 

• <meter> ~ </meter> 태그

  : 전체 크기 중에서 현재 값이 차지하는 크기 표시

  : <progress> 태그와 목적 구분 정확히!

 

→ min, max 속성

  : 범위의 최솟값과 최댓값 표시

  : 값을 정하지 않으면 0과 1이 기본값

 

→ value 속성

  : 범위 내에서 차지하는 값 표시

 

→ low, high, optimum 속성

  : 낮은, 높은, 적당한 범위 지정

 

<meter value="값" min="값" max="값" low="값" high="값" optimum="값"></meter>

 

 

---

😊 Do it! HTML5 + CSS 웹 표준의 정석 책으로
독학하는 코린이의 공부 기록