form 태그 내부에서 흔히 사용하는 input 태그는 다양한 type를 지니고 있다. 특히 html5에서 자바스크립트 또는 css 도움없이도 다양한 기능과 효과를 구현하는 type들이 등장했다.
HTML INPUT TYPES 살펴보기
CONTENTS
<input type="text">
input 태그에 type 속성을 입력하지 않으면 기본값인 text 타입 속성값이다. text 속성값은 텍스트 입력 필드를 지칭한다.
<input type="password">
input 태그에 속성 type의 속성값으로 password를 사용하면 암호 필드를 지칭한다. 이 password는 텍스트가 외부에 드러나지 않도록 점으로 표현된다.
<input type="submit">
input 태그에 속성 type 속성값으로 submit를 사용하면 데이터를 지정한 서버에 제출하는 버튼 역할을 한다. 이때 데이터를 처리할 서버는 form 태그의 action 속성에 경로를 속성값으로 넣는다. 이 부분은 백엔드 영역과 맞물린 부분이다.
<input type="reset">
input 태그에 속성 type 속성값으로 reset를 사용하면 입력한 데이터를 초기화하는 역할을 한다.
<form action="#">
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br>
<label for="pwd">Password:</label><br>
<input type="password" id="pwd" name="pwd"><br><br>
<input type="submit" value="Submit">
<input type="reset">
</form>
위와 같이 비밀번호를 입력할 때 password 속성값을 많이 활용한다. 또한 단순히 이름을 입력하는 텍스트 필드는 text 속성값을 사용하고, 이를 서버로 보낼 때는 버튼 역할을 submit 속성값을 활용한다. submit 버튼을 누르면 입력한 데이터는 form 태그 내에 acton 속성에 넣은 경로로 이동한다. 더불어 reset 속성값은 위에서 보듯이 초기화 버튼을 생성한다. 물론 reset 속성값을 넣은 input 태그에 value 속성을 사용하여 원하는 이름을 속성값에 넣을 수도 있다.
<input type="radio">
radio 속성값은 제시된 것 중에 하나만 선택할 수 있는 라디오 버튼을 구현한다.
<input type="checkbox">
checkbox 속성값은 제시된 것중에 여러 개를 선택할 수 있는 체크박스를 구현한다.
라디오 버튼
체크박스
<p>라디오 버튼</p>
<form>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
</form>
<hr/>
<p>체크박스</p>
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>
라디오 버튼과 체크박스는 하나만 선택 가능한 지, 다중 선택이 가능한 지가 가장 큰 차이다. 이를 구현하기 위해서는 라디오 속성값은 제시할 모든 input 태그의 name 속성값이 동일해야 한다. 이에 반해서 checkbox 속성값은 제시할 모든 input 태그의 name 속성값이 달라야 한다.
<input type="button">
input 태그 내 type 속성에 button 속성값을 넣으면 버튼을 구현하는데, button 태그를 사용하는 것과 동일한 효과를 지닌다.
<input type="image">
input 태그 내 type 속성에 image를 넣으면 이미지 버튼을 구현한다. 이 역시 버튼 역할을 하므로 기본적으로 서버에 데이터를 제출하는 기능을 지닌다. 단, 이미지는 input 태그 내에 src 속성을 사용하여 속성값에 경로를 넣어야 하며 alt 속성은 반드시 들어가야 한다. 또한 image가 표시되므로 input 태그 내에 width와 height 속성도 사용이 가능하다.
<input type="file">
input 태그 내 type 속성에 file를 넣으면 컴퓨터 내 파일을 찾는, 첨부파일 기능을 구현한다.
<input type="hidden">
input 태그 내 type 속성에 hidden 속성값을 사용하면 숨겨진 입력 필드를 구현한다. 이 입력 필드는 외부로 드러나지 않지만 개발자 도구로 소스를 보면 볼 수 있고 편집도 가능하다. form 태그로 양식을 구현한 후에 서버에 데이터를 보낼 때 hidden 속성값을 사용한 입력 필드값도 함께 제출된다. DB 관리 또는 특별한 이유가 있을 때만 사용한다.
버튼
이미지 버튼
파일 선택
숨겨진 입력 필드
<p>버튼</p>
<form>
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
</form>
<hr/>
<p>이미지 버튼</p>
<form>
<label for="fname">성: </label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">이름: </label>
<input type="text" id="lname" name="lname"><br><br>
<input type="image" src="https://www.w3schools.com/html/img_submit.gif" alt="Submit" width="48" height="48">
</form>
<hr/>
<p>파일 선택</p>
<form>
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile">
</form>
<hr/>
<p>숨겨진 입력 필드</p>
<form>
<label for="fname">애칭:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="hidden" id="custId" name="custId" value="3487">
<input type="submit" value="Submit">
</form>
위에서 보듯이 button 속성값은 button 태그와 동일한 역할을 하며, 이 버튼을 이미지로 구현할 때는 image 속성값을 사용하면 된다. 첨부 파일을 보낼 때 주로 사용하는 속성값이 file이며, 서버 관리자 또는 DB 관리를 위해 특별한 상황에서 드러나지 않는 데이터까지 함께 제출하도록 할 때 hidden 속성값을 사용한다. 지금 위에 코드에서는 애칭을 입력하고 제출 버튼을 누르면 hidden 속성값이 위치한 input 태그 내에 value 속성에 담긴 3487이라는 데이터도 함께 제출된다.
여기까지가 기존 html에서 input 태그가 지닌 type 속성값들이다. 이외에도 html5에는 아래 이미지에서 보듯이 다양한 type들이 등장했는데, 이 부분은 따로 정리한다.
