[HTML] 폼 태그 2, 폼 요소 태그들 - 2

지난 포스트에서 배웠던 것들은 대부분 한 줄짜리 간단한 정보의 입력이었습니다. 하지만 회원가입이나 인터넷 쇼핑을 하다보면 정보를 입력하는 방법은 여러가지가 있음을 볼 수 있습니다.

 

회원가입 창에서 이메일을 입력할 때 @뒷부분의 주소는 직접 입력하기도 하지만 대부분 선택 박스에서 골랐던 기억이 있을 것 입니다. 그런 형태의 정보 입력란을 "드롭다운 리스트"라고 합니다. 이 드롭다운 리스트는 만드는 태그가 따로 존재합니다.

 

<select> : 드롭다운 리스트를 만드는 태그입니다.

 

<option> : 드롭다운 리스트에서 선택 가능한 목록을 만듭니다.

 

<optgroup> : 드롭다운 리스트에서 선택 가능한 목록들을 묶는 기능을 합니다.

<select> <option>

<optgroup>

 

 

지난번에 배운 <input>태그의 텍스트필드 속성을 이용한 드롭다운 리스트가 있습다. 간단히 이야기하자면 텍스트 필드의 형태를 하고 있지만 데이터를 직접 입력하지 않고 고르는 방식을 말합니다. 

 

<datalist> : 데이터 리스트 방식을 만듭니다. 사용법은 select태그와 똑같이 전체를 감싼 후 option태그로 선택지를 만들어 줍니다. 텍스트 필드에 입력하기 때문에 text속성을 가진 input태그와 함께 써 주어야합니다.

또한, datalist에 id를 붙여주고 input에서 list속성으로 해당 id의 리스트를 사용한다고 선언해야합니다.

<datalist>

• value 속성 : 사용자가 선택해서 넘겨줄 정보 값.

 

---

이렇게 많은 정보입력 방법이 있음을 알아보았습니다. 그런데 리스트들은 선택만 할 수 있고 input태그는 한 줄만 입력이 가능합니다. 설문조사나 배송시 요청사항 혹은 이 포스트 바로 밑의 댓글만 봐도 여러줄로 적을 수 있게 되어있습니다. 마지막으로 알아보는 폼 요소 태그는 여러줄의 텍스트를 입력 하게 해주는 태그입니다.

 

<textarea> : 한 줄이상의 텍스트문구를 입력할 때 사용하는 태그입니다. 태그를 비우면 빈 공간이 생기고 적어놓으면 입력해 놓은 문구가 표시된 채로 출력됩니다.

<textarea>

 

---

 

2개의 포스팅에 걸쳐서 알아본 자주 사용되는 폼 요소의 태그들이었습니다. 폼 요소는 많은 속성과 함께 사용되기 때문에 다음 포스트에서 속성들에 대해 따로 다루겠습니다.