티스토리 뷰
<input>태그는 사용자가 한 줄짜리 데이터를 입력할 수 있는 폼 요소입니다. <input>태그 외에 여러 데이터를 나열해서 보여주고 사용자가 선택할 수 있게 해주는 폼 요소들고 있습니다.
<select>,<optgroup>,<option>-태그 - 드롭다운 목록 만들기
-드롭다운 목록이란 클릭했을 때 요소 아래쪽으로 옵션들이 펼쳐지기 때문에 붙여진 이름입니다.
ex)<select 속성="속성값>
<option value="서버로 넘길 값" 속성="속성 값" > 내용 </option>
</select>
<select>태그로 드롭다운 목록의 시작과 끝을 표시하고 그 안에 <option>태그를 사용하여 원하는 항목들을 추가합니다.
<option>태그는 value속성을 이용해 서버로 넘겨주기 위한 값을 지정해야 합니다
<select>태그의 속성
(1)size : 드롭다운 목록의 크기를 지정한다. ( 화면에 보여지는 개수(스크롤바 화면 말고 자체 화면 중 ) !!단, 크롬 브라우저의 경우 개수보다 하나 더 많은 옵션이 표시됨.
(2)multiple : 드롭다운 목록의 경우 옵션 중에서 한 개를 선택하는 것이 기본값이다 하지만 multiple속성에서 숫자를 지정하면 여러 개의 옵션을 선택할 수 있다. size속성을 지정했을 때처럼 브라우저 화면에 여러 개의 옵션이 함께 표시된다.
<option>태그의 속성
-드롭다운 목록에 표시되는 옵션들은 <option>태그를 이용해 지정하는데 <option>태그에서만 사용하는 속성은 다음과 같다.
속성
(1) value : 옵션을 선택했을 때 서버로 넘겨질 값.
(2) selected : 화면에 표시될 때 기본으로 선택되어 있는 옵션 지정.
->(드롭다운 화면에서 처음부터 지정되는 목록을 미리 선택해놓는 역할을 함 )
% 드롭다운 목록에서 여러 항목들을 몇 가지 그룹으로 묶어야 할 경우<optgroup>태그를 사용할 수 있다. <optgroup>태그를 사용할 때 label속성을 사용해서 그룹의 제목을 붙여준다
ex)<select>
<optgroup label="공과대학">
<option value="archi">건축공학과</option>
</optgroup>
->이렇게 optgroup으로 묶으면 공과대학 안의 건축공학과가 있다는 것을 표시해주는 역할을 한다 (공과대학 선택불가능해짐)
<datalist>,<option>태그
-<datalist>태그는 텍스트 필드에 입력할 수 있는 값들을 목록 형태로 제시해 주어 손쉽게 값을 선택할 수 있도록 합니다.
즉,텍스트 필드에 값을 직접 입력하는 것이 아니라, 제시한 값 중에서 선택하면 그 값이 자동으로 입력이 됩니다.
ex)
<input type="txt" list="데이터 목록id">
<datalist id="데이터 목록 id">
<option> ... </option>
...
</datalist>
데이터 목록은 텍스트 필드와 함께 사용하기 때문에 <input>태그를 같이 사용합니다.
<input>태그의 list속성 값과 데이터 목록의 id를 같게 만들면 됩니다.
<option>태그의 속성
(1)value : 사용자가 레이블을 선택했을 때 서버로 넘겨질 값을 지정합니다.
(2)label : 사용자를 위해 브라우저에 표시할 레이블 입니다. 따로 지정하지 않을 경우 value값을 레이블로 사용합니다.
<textarea>태그 - 여러 줄 입력하는 텍스트 영역 만기
텍스트 영역이란 한 줄 이상의 문장을 입력할 때 사용하는 폼을 말합니다. 게시판에서 게시물을 입력하거나 회원가입 양식에서 사용자 약관을 표시할 때 자주 사용합니다.
ex)<textarea 속성="속성" > 내용 </textarea>
ex)<textarea cols="50" row="5" >하고싶은말 </textarea>
속성
(1) name : 텍스트 영역의 이름을 지정합니다.
(2) cols : 텍스트 영역의 가로 너비를 문자 단위로 지정합니다.
(3) rows : 텍스트 영역의 세로 길이를 줄 단위로 지정합니다 지정한 숫자보다 줄 개수가 많아지면 스크롤 막대가 생깁니다.