HTML 입력양식 input 태그 기본 적인 타입에 대한 설명

HTML 입력양식 input 태그 기본 적인 타입에 대한 설명

 

환경: Eclipse Mars

 

HTML 에서 많이 쓰이는 input 태그에 대해서 알아보겠습니다. 사용자의 정보 입력이 필요할 때 쓰는 컨트롤입니다. 자주 쓰이는 태그의 타입 유형들이므로 숙지하고 넘어가셔야 합니다. 내용이 길어 HTML5 이전에 주로 사용했던 type 의 유형과 HTML5 에서 새로 추가된 유형을 나누어서 작성했습니다. 소스와 결과화면을 통해 타입들을 특징을 파악해 보시기 바랍니다.

 

◎ type=”text” 와 type=”password” 일 때

 

▼ 로그인 화면을 꾸밀 때 쓰는 타입들입니다. text 는 글을 입력을 할 수 있는 타입이며 password 는 입력하는 글이 화면에 보이지 않도록 숨기는 역할을 합니다. 그래서 비밀번호를 입력할 때 많이 쓰입니다.

<form>
	<div>아이디 : <br/><input type="text" name="id" value=""></div> 
	<div>비밀번호: <br/><input type="password" name="pwd" value=""></div> 
</form>

 

◎ type=”submit” 일 때

 

▼ input 태그의 submit 타입은 form 과 함께 쓰입니다. form 태그 내부에 있어야 하며 클릭하면 form 에 둘러 쌓인 컨트롤들의 값을 서버로 전송하게 됩니다. 자바스크립트로 보자면 document.form.submit() 함수가 호출된 것입니다. 값이 전송되는 위치는 action 속성에 있는 주소가 됩니다. 

<form action="action.jsp">
	<div>아이디 : <br/><input type="text" name="id" value=""></div> 
	<div>비밀번호: <br/><input type="password" name="pwd" value=""></div> 
	<div><input type="submit" value="전송"></div>
</form>

 

◎ type=”radio” 일 때

 

▼ radio 타입은 버튼을 라디오 옵션 박스로 만듭니다. 라디오 박스의 특징은 폼 안에 여러 라디오 박스 중 하나만 선택할 수 있습니다. 이렇게 여러 값 중 하나만 선택해서 다음 페이지로 넘겨야 되는 경우 많이 사용하죠. 태그에 checked 는 라디오 박스가 체크된 상태에서 로딩하라는 표시입니다. 그리고 라디오 박스는 여러 개 중에 하나만 선택되어야 하는데 name 의 값이 같지 않거나 없다면 제 기능을 발휘하지 못합니다. 아래 소스처럼 name 이 없으면 라디오 박스를 모두 체크하거나 해제할 수 있습니다. 이것은 라디오 박스라고 할 수가 없죠. 

<form action="action.jsp">
	<p>성별을 선택하세요.</p>
	<div><input type="radio" value="male" checked>남성</div> 
	<div><input type="radio" value="female">여성</div> 
	<div><input type="submit" value="전송"></div>
</form>

 

▼ 라디오 박스 기능을 제대로 구현하려면 name 의 값을 넣고 이름도 동일해야 하나만 선택이 되게 됩니다. 아래 그림처럼 “여성” 을 클릭하면 “남성” 의 체크 박스는 해제되는 것이죠. 

<form action="action.jsp">
	<p>성별을 선택하세요.</p>
	<div><input type="radio" name="sex" value="male" checked>남성</div> 
	<div><input type="radio" name="sex" value="female">여성</div> 
	<div><input type="submit" value="전송"></div>
</form>

 

◎ type=”checkbox” 일 때

 

▼ 체크 박스는 radio 버튼과 다릅니다. 여러 개의 선택이 가능하도록 만드는 타입입니다. 멀티선택이 가능하다는 것이죠. name 값이 같아도 여러 개 선택이 가능합니다. 서버에서 값을 받을 때는 어떤 name 에 값인지 구분하기 쉽도록 다르게 표현하는 것이 좋겠죠. checkbox 타입도 checked 를 넣게 되면 체크된 상태에서 보여 지게 됩니다. 

<form action="action.jsp">
	<p>주문 음식을 표시하세요.</p>
	<div><input type="checkbox" name="food1" value="mandu" checked>만두</div> 
	<div><input type="checkbox" name="food2" value="jajang">짜장</div> 
	<div><input type="submit" value="전송"></div>
</form>

 

◎ type=”button” 일 때

 

▼ 가장 많이 쓰이는 타입입니다. 버튼을 만들어서 클릭했을 때 이벤트를 발생 시킬 수 있습니다. submit 은 클릭했을 때 form 요소의 값을 목적지에 전송하도록 액션을 수행하게 만들지만 버튼은 눌러도 아무 동작을 하지 않습니다. 동작을 하게 하려면  onclick 속성에 javascript 코드를 넣으면 됩니다. 아래 소스는 type 을 button 으로 하고 submit 과 같은 효과를 얻을 수 있도록 만들것 입니다. 

<form id="frm" action="action.jsp">
	<p>주문 음식을 표시하세요.</p>
	<div><input type="checkbox" name="food1" value="mandu" checked>만두</div> 
	<div><input type="checkbox" name="food2" value="jajang">짜장</div> 
	<div><input type="button" onclick="document.getElementById('frm').submit();" value="전송"></div>
</form>

◎ type=”file” 일 때

 

▼ 현재 웹 페이지를 보고 있는 자신의 시스템에 있는 파일을 첨부하고자 할 때 쓰는 타입입니다. file 을 주게 되면 자동으로 파일 열기 팝업창이 뜨게 됩니다. 별도의 설정 없이 파일 명을 가져와서 서버로 보낼 수 있습니다. 팝업창으로 파일을 선택하게 되면 버튼 바로 옆에 텍스트로 파일명이 표시됩니다. 

두 번째 input 태그의 type 속성 값들에 대한 설명은 HTML5 에서 추가된 것들입니다. 이번 아티클의 내용이 길어서 다음 회로 넘겼습니다.