7. 입력 양식 ② : 다양한 input type, select, option, 등

▲예제 01. 다양한 input type

 

 

▲예제 02. textarea

 - textarea의 크기는 rows와 cols로 조절할 수 있다.

 

 

▲예제 03. select, option

 - select 태그에 multiple 속성을 추가함으로써 사용자가 토글키를 이용해 여러 개를 선택할 수 있게 한다.

 

 

▲예제 04. optgroup

 - select 태그 내부에 optgroup을 설정함으로써 option 태그의 그룹을 지정해줄 수 있다.

 

 

▲문제 01. form 활용 ①

 - onKeypress는 해당 입력창에서 특정 키를 눌렀을때 지정된 함수를 작동되게 하는 속성이다.

 - if(event.keyCode == 13) {return false}; 를 넣음으로써 엔터키를 쳐도 바로 전송이 되지 않게 할 수 있다.

 

▲예제 05. fieldset, legend, placeholder

 - fieldset 태그 내부에 사각형을 만들 수 있다.

 - legend 태그로 fieldset의 제목을 만들 수 있다.

 - placeholder를 넣으면 값 입력시 보이지 않는 회색 문자를 출력할 수 있다.

 

 

문제02. form 활용 ②

 - head태그 안에 style태그를 활용하여 placeholder를 클릭 시 투명으로 만드는 css를 추가할 수 있다.

 - 여러개 중에 하나를 선택하는 태그는 id를 주지 않는다.

 - radio, checkbox 같이 체크를 하는 타입에 checked 속성을 붙이면 해당 태그가 기본 값으로 체크된다.

 - option 태그에 selected 속성을 붙이면 기본 값으로 선택된다.