html으로 폼을 구성할 때 상대적으로 자주 사용하지 않지만 고급태그로 datalist, output 태그가 있다. 이번 파트에서는 select 태그와 유사한 형태를 구현하는 datalist 태그와 계산 결과를 보여주는 output 태그를 살펴본다. 더불어 button 태그와 button 타입 속성을 지닌 input 태그를 추가한다.
Form 내부 고급 태그 살펴보기
CONTENTS
드롭다운 목록을 보여주는 datalist 태그
form 태그 내부에 위치하는 datalist 태그는 select 태그와 유사한 형태를 구현한다. select 태그가 내부에 option 태그를 둔 것과 마찬가지로 datalist도 내부에 option 태그를 활용한다.
datalist 태그
datalist 태그는 옵션 태그에서 설정한 value값을 input 태그에 드롭다운으로 보여준다.
Note: datalist 태그는 사파리 12.1 이전 버전은 지원하지 않는다.
<form action="######">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
위의 예시 코드처럼 datalist 태그는 input 태그와 연계하는 특징이 있다. 이때 input 태그에 list 속성값을 datalist id 속성값과 일치해야만 드롭다운리스트가 구현된다. input 태그의 name 속성은 백엔드와 관련되어 있으므로, 여기서는 패스한다.
참고로, 여러모로 select 태그와 유사한 부분이 있다. 이전에 살펴보았던 select 태그를 비교 차원에서 다시 한 번 추가한다. datalist 태그 내부에 위치한 option 태그는 단독태그로 value 속성만으로, input 태그와 연계해 드롭다운 리스트를 보여준다. 그런데 한번 선택한 후에 바꾸는 작업이 되지 않는다. 이에 반해 아래 select 태그는 내부 option 태그에 있는 value 속성값이 보여지는 것이 아니라 태그 사이에 입력한 텍스트를 리스트로 보여주면서, 한 번 선택 후에 바꿀 수도 있다. 이런 점에서 datalist 태그 보다는 select 태그가 선호되고 있다.
select 태그
select 태그는 드롭다운 리스트를 구현하다:
<form action="######">
<label for="view">브라우저 선택:</label>
<select id="view" name="view">
<option value="Internet Explorer"> Internet Explorer </option>
<option value="Firefox"> Firefox </option>
<option value="Chrome"> Chrome </option>
<option value="Opera"> Opera </option>
<option value="Safari"> Safari </option>
</select>
<input type="submit">
</form>
계산 결과를 나타내는 output 태그
HTML output 태그는 웹사이트나 앱에서 계산이나 사용자 행동 결과를 삽입할 수 있는 컨테이너이다.
output 태그
output 태그는 계산 결과를 보여준다.
Note:output 태그는 엣지 13버전 이하를 지원하지 않는다.
<form action="#####"
oninput="result.value=parseInt(a.value)+parseInt(b.value)">
<input type="range" id="b" name="b" value="50" /> +
<input type="number" id="a" name="a" value="50" /> =
<output name="result" for="a b">100</output>
<br><br>
<input type="submit">
</form>
조금 복잡해보이지만, 우선 input 태그가 2개의 계산 결과를 output 태그가 보여준다고 생각하면 된다. 일단 input 태그에서 range 타입은 html5에서 추가한 범위를 구현한 속성이다. 첫번째 input 태그는 막대그래프로 범위를 표현했고, 두번째 input 태그는 숫자 타입으로 value 속성에 50이라는 값을 지정하고 있다. 현재 막대그래프인 range 속성도 기본값을 value에서 50으로 지정하고 있다. 따라서 현재 id가 a인 input과 id가 b인 input을 더한 결과는 output 태그 사이에 100이라고 수동으로 기재한 상황이다.
여기에서 input 태그 속성으로 넣은 id 값을 output 태그와 연계하려면 output 태그에서 for 속성에 순서대로 input 태그의 id 속성값을 넣어주면 된다. 이때 쉼표나 별다른 기호 없이 한칸만 띄어서 넣어준다. 즉, input 태그의 id 속성값을 output 태그의 for 속성값에 넣어준 것으로, input 태그와 output 태그는 연계가 끝난 것이다. 참고로 input 태그 내 name 속성은 백엔드와 연계된 부분으로 api에서 활용할 수 있지만, 여기서는 패스한다.
다음으로 중요한 부분이 output 태그 name 속성값이다. 이 속성값을 가장 상단에 위치한 컨테이너 역할을 하는 form 태그의 oninput 속성에서 사용해야 한다. 현재 output 태그의 name 속성값을 result로 지정했다. 이 result는 곧 output 태그를 가리키고, result.value는 output 태그가 보여줄 값을 의미한다. 이를 parseInt라는 자바스크립트 계산식에 담은 형태이다. 이때 a.value는 input 태그에서 id 속성이 a인 value값을 의미한다.
유용한 button 태그
마지막으로 button 태그를 추가한다. 기본적으로 button 태그는 클릭 가능한 버튼을 나타낸다. 이러한 button 태그는 폼 양식 뿐만 아니라 웹에서 여러 곳에서 유용하게 사용할 수 있다.
button태그와 input태그
<button type="button" onclick="alert('버튼 태그 사용!')">button</button>
<input type="button" onclick="alert('인풋 태그 사용!')" value="input button">
우선 button 태그를 사용하든 input 태그에 type 속성값으로 button을 사용하든 동일한 효과를 발휘한다. 하지만 기본적으로 button은 button 태그를 사용하는 게 적절하다. button 태그는 input 태그에 비해 의사요소(::before, ::after) 등 복잡한 CSS 구현도 가능하다. 더불어 button 태그 시에 타입 속성을 button으로 지정해야 한다.
만약 type 속성을 지정하지 않으면 button 태그는 디폴트 type 속성값이 submit이므로, 서버에 데이터를 제출하는 형태가 된다. 물론 form 양식에서 최종적으로 데이터를 제출할 때 button 태그만 사용해도 자동으로 submit 속성이 나온다. 약간 혼동스러울 수 있으므로 button 태그 사용 시에도 type를 반드시 지정할 필요가 있다.
서버와 연결이 아니라 클라이언트 영역의 스크립트만 관여할 때는 button 태그는 type를 button으로 지정한다. 폼 양식에서 데이터를 서버로 전송할 때는 type를 submit으로 지정한다.만약 초기화가 필요하다면 type를 reset으로 지정한다. 물론, input 태그로도 button 타입으로 지정한 모든 형식이 가능하지만 CSS 측면에서 button 태그가 더 유효한다.
