HTML.15.Form Tag

input 태그 외에 폼에서 사용하는 태그들

 

textarea 태그

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

<textarea>내용</textarea>

 

textarea의 속성

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

rows: 텍스트 영역의 세로 길이를 줄 단위로 지정. 지정한 숫자보다 줄이 많아지면 스크롤 막대 생성

>>cols에서 지정하는 글자 수는 영어 소문자를 기준으로 함. 한글 1글자는 영문 2글자 취급이므로 cols에 지정한 숫자의 절반이 1줄에 들어가게 됨

 

CSS를 사용해 텍스트 영역의 크기를 정의 가능

 

select, option 태그

드롭다운 목록을 만들어 주는 태그

사용자가 내용을 직접 입력하지 않고 여러 옵션 중에서 선택함

 

select 태그: 드롭다운 목록

>> 클릭 시 옵션이 요소 아래쪽으로 펼쳐짐

 

option 태그: 데이터 목록

>> 원하는 항목을 추가, value 속성을 이용해 서버로 넘길 값을 지정함

 

<select>

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

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

        ...

</select>

 

select 태그의 속성

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

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

 

option 태그의 속성

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

selected: 드롭다운 메뉴를 삽입할 때 기본으로 보여줄 항목을 지정

 

datalist, option 태그

데이터 목록을 만들어 주는 태그

값을 직접 입력하지 않고, 미리 만들어 둔 값 중에서 선택함

 

datalist태그: 목록의 시작과 끝을 표시

 

option태그: 각 데이터의 옵션을 표시함. value 속성을 이용해 서버로 넘길 값을 지정하고, 이 값이 텍스트 필드에 표시됨

>> 데이터 목록을 사용할 텍스트 필드에서 어떤 데이터 목록을 연결할지 id값을 지정함

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

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

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

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

</datalist>

 

button  태그

버튼을 만들어 주는 태그 

>> 인풋 태그의 버튼 속성은 버튼 형태만 삽입함

>>>> 버튼 태그의 버튼을 클릭해서 자바스크립트를 실행할 때 사용함

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

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

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

 

submit: 폼을 서버로 전송 / <input type=”submit”>과 동일

reset: 폼에 입력한 내용을 초기화 / <input type=”reset”>과 동일

button: 버튼 형태만 삽입 (기능X) / <input type=”button”>과 동일