[HTML 배우기] input 태그: 사용자 입력칸

<input> 태그는 사용자가 데이타를 입력할 수 있는 기본 입력 칸입니다. 

 

기본적인 <input> 태그만 사용 했을 때 아래와 같이 문자를 입력할 수 있는 입력 칸을 만들 수 있습니다: 

See the Pen input tag by David Kijung Park (@ramiram) on CodePen.

 

<input> 유형(type)

<input>태그는 type속성을 통해서 여러가지 형태로 사용할 수 있습니다. 만약 type속성이 설정 되지 않았다면 기본값으로 text가 설정됩니다.

 

유형 (type)	설명	예시
문자 (text)	문자를 입력 할 수 있는 입력칸. <input>의 기본값
버튼 (button)	누를 수 있는 버튼, 기본값은 빈칸이다.
체크박스 (checkbox)	체크박스의 값은 한개이며, 선택/해제 할 수 있다.	체크박스
날짜 (date)	날짜를 입력 할 수 있는 입력칸. 브라우저에 따라서 날짜 선택칸을 연다.
파일 (file)	파일 선택창을 연다.
이메일 (email)	문자칸과 비슷하게 생겼지만, 브라우저와 기기에 따라서 키보드를 동적으로 선택한다.
숫자 (number)	숫자를 입력하는 칸.
비밀번호 (password)	비밀번호를 입력하는 칸. 저절로 값을 숨긴다.
라디오 버튼 (radio)	라디오 버튼을 통해서 여러 값중에 한가지를 선택 할 수 있다.	라디오 버튼

 

<input> 속성(Attributes)

<input> 태그에서 가장 중요한 속성은 위에서 언급됬던 유형 속성입니다. 그 외에도 많은 속성들이 있습니다. 그중에서도 자주 사용되는 속성들을 간략히 설명하겠습니다.

 

속성	요소	설명
checked	radio, checkbox	체크 표시가 되있는지
disabled	전부	사용 불가 상태 인지 아닌지
name	전부	요소의 이름값을 설정
min	숫자	최소 값
minlength	password, search, tel, text, url	문자의 최소한의 길이
max	숫자	최대 값
maxlength	password, search, tel, text, url	문자의 최대한의 길이
placeholder	password, search, tel, text, url	입력칸이 비어있을 때 보여지는 값 (힌트 값)
readonly	대부분	입력의 값을 교정 할 수 없다. 불린(boolean)
required	대부분	반드시 값을 입력해야지만 폼(form)을 제출 할 수 있다.
value	모두	입력칸의 값

 

자 이렇게 해서 <input>태그의 유형과 속성에 대 해서 배워봤는데요. 예시를 보시고 필요한 입력 칸을 사용해 보시길 바랍니다!

 

직접 사용하면서 배워보시고 싶으시다면 코딩팍의 실전 프로젝트인 할 일 목록 만들기를 시작해보세요:

[할 일 목록 #0] 웹 사이트 만들기 프로젝트 HTML, CSS, Javascript로 할 일 목록 (To-do List) 만들기 소개

 

 

모두 실전으로 부수는 코딩'팍'!에서 코딩을 배워봐요