05-4 폼에서 사용하는 여러 가지 태그

지금까지 살펴본 <input> 태그는 폼에서 한 줄 정도로 간단한 내용을 입력할 때 사용함.

 

>>> 여러 줄을 입력하는 텍스트 영역 <textarea> 태그

폼에서 텍스트를 여러 줄 입력하는 영역을 만들 수도 있음. 이 영역을 텍스트 영역이라고 함.

<textarea>태그는 게시판에서 글을 입력하거나 회원 가입 양식에서 사용자 약관을 표시할 때 자주 사용함.

[기본형] <textarea>내용</textarea>

 

>> <textarea> 태그에서는 너비 크기를 지정하는 cols 속성과 화면에 텍스트를 몇 줄 표시할지 지정하는 rows 속성을 사용함. cols에서 지정하는 글자 수는 영문자를 기준으로 함. 한글 1글자는 영문자 2글자에 해당하므로, cols="40"으로 지정하면 한글은 20자 정도 됨

 

>>>드롭다운 목록을 만들어 주는 <select>,<option> 태그

사용자가 내용을 직접 입력하지 않고 여러 옵션 중에서 선택하게 하려면 드롭다운 목록이나 데이터 목록을 사용함.

드롭다운 목록은 목록을 클릭했을 때 옵션이 요소 아래쪽으로 펼쳐져서 붙인 이름임.

드롭다운 목록은 <select> 태그와 <option> 태그를 이용해 표시함.

 

[기본형]<select>

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

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

             </select>

 

>> <select> 태그의 속성

size : 화면에 표시할 드롭다운 항목의 개수를 지정함.

multiple : 드롭다운 목록에서 둘 이상의 항목을 선택할 때 사용함

 

>> <option> 태그의 속성

value : 해당 항목을 선택할 때 서버로 넘겨줄 값을 지정함.

selected : 드롭다운 메뉴를 삽입할 때 기본적으로 선택해서 보여 줄 항목을 지정함.

 

>>> 데이터 목록 만들어 주는 <datalist>, <option> 태그

데이터 목록을 사용하면 텍스트 필드에 값을 직접 입력하지 않고 미리 만들어 놓은 값 중에서 선택할 수 있음.

[기본형]

<input type="text" list="데이터 목록 id">

<datalist id="데이터 목록 id">

   <option value="서버로 넘길 값1">선택 옵션1</option>

   <option value="서버로 넘길 값2">선택 옵션2</option>

</datalist>

 

>>>버튼을 만들어 주는 <button> 태그

<input> 태그의 필드를 사용하여 버튼을 삽입해 본 것과 비슷해 보이지만 <button>태그를 이용해 폼을 전송하거나 리셋하는 버튼을 삽입할 수 있음. <button> 태그의 type속성은 버튼이 활성화되었을 때 어떤 동작을 할지 지정함. submit, reset, button중에서 선택할 수 있고 만약 지정하지 않으면 submit을 선택한 것으로 간주

[기본형]

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

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

<button type="button>내용</button>