4-3 기타 요소

폼 내의 값을 출력하는 output 요소

: 폼 내의 다양한 값을 출력할 수 있도록 지정하는 요소

-> 특정 input 요소에 입력된 값이 변하게 되면 그것을 곧바로 반영하여 화면에 출력할 때 사용

-> input 요소의 값이 변하면 form 요소의 input 이벤트가 발생되고, 이벤트에 대한 처리로서 자바스크립트 문법으로 출력할 값의 연산식을 지정한다.

 

입력)

// output의 for에서 요소들을 받아서 oninput의 계산식을 수행한다.

// parseInt : input에서 사용자가 입력한 문자열을 정수값으로 변환.

 

 

출력)

 

사용자의 입력)

 

 

 

 

폼 요소와 캡션을 묶어주는 label 요소

: input 요소에 대한 레이블을 정의

-> 시각적 효과는 없음. 단지 마우스 사용자의 사용성을 향상시킴

-> input 요소가 포커스/선택을 받기 위해서는

* 마우스로 해당 input 요소를 클릭

* label 요소 내에 있는 데이트(캡션)를 클릭

 

 

 

폼 요소를 그룹핑하는 fieldset 요소

: 폼에서 사용되는 관련 요소들을 그룹핑할 때 사용

-> 시각적으로 관련 요소들을 포함하는 사각형 테두리가 표시됨

-> 속성 : name, form, disabled

 

-legend 요소

-> fieldset 요소의 하위 요소

-> 그룹핑되는 관련 요소들에 대한 캡션을 표시할 때 사용

*사각형 테두리 선상에 캡션이 표시됨

 

입력)

 

 

출력)

// 아이디 입력 칸이 아닌, 아이디 이름만 클릭해도 아이디 입력창에 커서가 위치함.

// fieldset으로 성별란이 사각형 테두리 안에 들어감.

// lable 태그와 input태그가 떨어져 있을 때 lable 태그의 for, input 태그의 name값을 일치시켜서 연동 가능.