Web(10) 여러 데이터 나열해 보여 주기
여러 데이터 나열해 보여 주기
<select>, <option>, <optgroup> 태그 : 드롭다운 목록 만들기
드롭다운 목록 : 클릭했을 때 옵션들이 요소 아래쪽으로 펼쳐지기 때문에 붙여진 이름
<seclect> 태그의 속성
(1) size : 화면에 표시될 드롭다운 메뉴의 항목 개수 지정 – 3으로 지정하면 4개의 옵션이 표시됨.
(2) multiple : 브라우저 화면에 여러 개의 옵션이 함께 표시되면서 Ctrl키를 누른 상태로 드롭다운 메뉴에 있는 여러 항목을 선택할 수 있다.
<option>태그의 속성
(1) value : 옵션을 선택했을 때 서버로 넘겨질 값을 지정
(2) selected : 화면에 표시될 때 기본으로 선택되어 있는 옵션을 지정
<optgroup>태그
옵션끼리 묶기
ex. <optgroup label=“히야압”> <option value=~~~~~~~> < > .. </optgroup>
2. <datalist> 태그, <option> 태그
<datalist>
<input> 태그를 함께 사용한다.
type=“text”일 경우 대부분의 브라우저에서 지원하지만 이외에는 지원하지 않을 수도 있다.
속성 (1) value : 사용자가 레이블을 선택했을 때 서버로 넘겨질 값을 지정
속성 (2) label : 사용자를 위해 브라우저에 표시할 레이블. 따로 지정하지 않을 경우 value값을 레이블로 사용함.
ex. <input type=“text” id=“interest” list=“choice”>
<datalist id=“choices”> <option value=“ERERE”Efe~~~~~~></option> </datalist>
3. <textarea> 태그 : 여러 줄 입력하는 텍스트 영역 만들기
속성(1) name : 다른 폼 요소와 구분하기 위해 텍스트 영역의 이름을 지정
속성(2) cols : 텍스트 영역의 가로 너비를 문자 단위로 지정
속성(3) rows : 텍스트 영역의 세로 길이를 줄 단위로 지정. 지정한 숫자보다 줄 개수가 많아지면 스크롤 막대가 생김.
ex. <textarea name=“intro” cols=“60” rows=“5”> ~~~ </textarea>