인터랙티브 웹페이지 구현을 위한 HTML Input 태그의 활용

INPUT 태그란?

<input> 태그는 말 그대로 어떤 정보를 넣는 기능을 가지고 있습니다. 사용자로부터 정보를 입력받을 수 있도록 도와줍니다. 웹페이지에서 로그인을 하거나 메뉴를 선택하거나 할 때 다양한 형태의 데이터를 입력받을 수 있도록 합니다.

 

사용법

<input type="text" name="user-name" placeholder="이름을 입력하세요" required>

• <input> 태그는 여러 가지 속성을 함께 적어야 합니다.
• <input> 태그는 self-closing tag라서 쌍으로 적지 않아도 됩니다.
• 먼저 type을 정해야 하는데요
  • text : 일반적인 텍스트를 입력받을 수 있습니다
  • number : 숫자만 받을 수 있습니다
  • checkbox : 여러개를 선택할 수 있는 네모난 박스를 만들 수 있습니다
  • radio : 하나만 선택할 수 있는 동그란 원을 만들 수 있습니다
  • password : 암호를 입력받을 수 있어요. 입력받은 값은 아스타리스크 (*) 처리가 됩니다
• 다음은 name입니다. 입력받은 값을 처리하는 고유값이에요
• required를 입력해두면 필수로 입력해야 하는 값이 됩니다

위의 예시는 text를 받는 태그인데 어떻게 보이는지 살펴보겠습니다.

 

예시

See the Pen input by 40's Programmer (@40sProgrammer) on CodePen.

placeholder가 어떤 역할을 하는지 알 수 있네요. input으로 생성한 필드에 미리 정보를 입력해둘 수 있는 기능이네요.

 

 

input의 다른 속성들

number, checkbox, radio, password도 같이 살펴보겠습니다.

 

type이 number인 경우

<input type="number" name="age" min="0" max="100" step="1" value="20">

• type을 number로 했을 때는 뒤의 속성들이 조금 다른 것 같죠?
• name은 위에서 설명했으니 넘어가겠습니다.
• 숫자를 입력하는 input이니 범위를 정할 수 있습니다.
  • min은 입력할 수 있는 최솟값, max는 최댓값입니다
  • step은 사용자가 숫자를 +1, -1 씩 조정할 수 있는 위 아래 화살표를 만듭니다. 기본값이 1이기 때문에 삭제해도 무방합니다
  • value는 기본값이에요. 사용자는 처음 20이란 숫자를 보면서 조정하게 됩니다. value 속성을 만들지 않았다면 아무것도 표시 되지 않은 채 시작해요.

아래는 type이 number인 경우입니다.

Pen input-number by 40's Programmer (@40sProgrammer) on CodePen.

 

type이 checkbox인 경우

<input type="checkbox" name="hobby" id="hobby-coding"  value="coding">
<label for="hobby-coding">코딩</label>
<br>
<input type="checkbox" name="hobby" id="hobby-reading" value="reading">
<label for="hobby-reading">독서</label>

• type을 checkbox로 하니 훨씬 더 길어지네요. 하나씩 살펴볼까요?
• 두 개의 체크박스는 name이 둘다 hobby입니다. 두 개의 체크박스는 hobby라는 이름으로 같이 관리되는 거에요
• id는 해당 체크박스의 고유한 값이에요. label이랑 같은 값을 정해줘야 해요. (이유는 아래에서..)
• value는 체크박스를 선택했을 때 서버로 전달하는 값이에요
• 그런데 label이라는 태그가 있네요.
  • label은 input 태그랑 늘 붙어다니는 태그입니다
  • label의 for와 input의 id값을 똑같이 해두면 코딩이라는 텍스트를 눌러도 체크박스를 선택할 수 있어요

<label> 태그에 대해 더 알아보시려면 여기를 눌러주세요.

 

어렵습니다. 저도 연습을 계속 해야 할 것 같아요.

 

아래는 type이 checkbox인 경우입니다. label을 쓴 경우는 텍스트를 클릭해도 체크박스가 동작하지만, 그렇지 않은 경우는 동작하지 않는 걸 확인할 수 있습니다.

 

<label> tag를 쓰는 게 유지보수, 가독성, 웹페이지 구조상 좋습니다.

See the Pen input-checkbox by 40's Programmer (@40sProgrammer) on CodePen.

 

type이 radio인 경우

<input type="radio" name="gender" id="gender-male" value="male">
<label for="gender-male">남성</label>
<br>
<input type="radio" name="gender" id="gender-female" value="female">
<label for="gender-female">여성</label>

• type을 radio로 작성해본 예시입니다.
• checkbox와 차이점은 하나만 선택할 수 있다는 점이죠
• 두 개의 라디오 역시 name이 gender로 동일해요.

만약 name을 안 쓰면 어떤 일이 벌어질까요? 각각의 라디오 버튼이 상호 작용을 하지 않게 되어서 둘 다 선택이 가능하게 됩니다. 한번 아래 코드에서 확인해보세요.

 

See the Pen input-radio by 40's Programmer (@40sProgrammer) on CodePen.

 

type이 password인 경우

<input type="password" name="password" placeholder="비밀번호를 입력하세요">

• type에 password를 입력했어요
• text 타입과 비슷하게 생겼지만 입력값이 숨김 처리되는 차이가 있습니다

아래 예시에서 확인해보세요.

See the Pen Untitled by 40's Programmer (@40sProgrammer) on CodePen.

 

그 외의 속성들

그 외에도 input 속성이 많은데요.

아래 사이트에 정리가 잘 되어 있으니 참고하세요.

 

http://www.tcpschool.com/html-tags/input

코딩교육 티씨피스쿨

 

<input> 태그는 저도 정리하면서 다시 복습해야겠어요.