기본 네이티브 양식 컨트롤

텍스트 <input> 필드는 가장 기본적인 양식 위젯입니다. 이것은 사용자가 어떠한 종류의 데이터라도 입력하는 데 매우 편리한 방법이며, 이미 몇 가지 간단한 예제를 보셨을 것입니다.

모든 기본 텍스트 컨트롤은 몇 가지 공통 행동을 공유합니다.

• readonly로 표시될 수 있습니다(사용자는 입력 값을 수정할 수 없지만, 나머지 양식 데이터와 함께 전송됩니다) 또는 disabled (입력 값은 수정할 수 없고, 나머지 양식 데이터와 함께 전송되지 않습니다).
• placeholder를 가질 수 있습니다. 이는 텍스트 입력 상자 안에 나타나는 텍스트로, 텍스트 입력 상자의 목적을 간략하게 설명하는 데 사용되어야 합니다.
• size (상자의 물리적 크기)와 maxlength (상자에 입력할 수 있는 최대 문자 수)에서 제한될 수 있습니다.
• 브라우저가 지원하는 경우 철자 검사를 받을 수 있습니다(spellcheck 속성 사용).

참고: <input> 요소는 입력 유형에 따라 여러 가지 형태를 취할 수 있기 때문에 HTML 요소 중에서 유일합니다. 단일 줄 텍스트 필드, 시간 및 날짜 컨트롤, 텍스트 입력 없는 컨트롤(예: 체크박스, 라디오 버튼, 색상 선택기) 및 버튼을 포함한 대부분의 양식 위젯을 생성하는 데 사용됩니다.

단일 줄 텍스트 필드는 type 속성 값이 text로 설정된 <input> 요소를 사용하여 만들어집니다. 또는 type 속성을 전체적으로 생략하여 (text는 기본값입니다) 생성할 수 있습니다. type 속성에 지정한 값이 브라우저에서 알 수 없는 경우 (type="color"를 지정하고 브라우저가 기본 색상 선택기를 지원하지 않는 경우) 이 속성의 값 text는 대체 값이 됩니다.

다음은 기본 단일 줄 텍스트 필드 예제입니다.

<input
  type="text"
  id="comment"
  name="comment"
  value="저는 텍스트 필드입니다." />

단일 줄 텍스트 필드에는 하나의 제약만 있습니다. 줄 바꿈이 있는 텍스트를 입력하면 브라우저는 해당 데이터를 서버로 전송하기 전에 줄 바꿈을 제거합니다.

원래의 입력 유형 중 하나는 password 텍스트 필드 유형입니다.

<input type="password" id="pwd" name="pwd" />

password 값은 입력된 텍스트에 특별한 제약 조건을 추가하지 않지만, 필드에 입력된 값을 은폐합니다(예: 점 또는 별표로) 다른 사람이 쉽게 읽을 수 없습니다.

이것은 단순히 사용자 인터페이스 기능일 뿐입니다. 양식을 안전하게 제출하지 않으면 데이터는 일반 텍스트로 전송되므로 보안에 좋지 않습니다. 악의적인 당사자가 데이터를 가로채어 비밀번호, 신용카드 정보 또는 제출한 기타 내용을 훔칠 수 있습니다. 이로부터 사용자를 보호하는 가장 좋은 방법은 보안 연결(즉, https:// 주소에 위치한)을 통해 양식과 관련된 모든 페이지를 호스팅하는 것입니다. 그러면 데이터가 전송되기 전에 암호화됩니다.

브라우저는 안전하지 않은 연결을 통해 양식 데이터를 전송하는 것의 보안 문제를 인식하며, 사용자가 안전하지 않은 양식을 사용하지 않도록 경고합니다. Firefox에서 구현하는 내용에 대한 자세한 내용은 Insecure passwords를 참조하세요.

또 다른 원래의 텍스트 컨트롤은 hidden 입력 유형입니다. 이것은 사용자에게 보이지 않는 양식 컨트롤을 만드는 데 사용됩니다. 그러나 제출된 양식 데이터와 함께 서버로 전송됩니다. 예를 들어 주문이 접수되었을 때 서버에 타임스탬프를 제출하려고 할 수 있습니다. 숨겨져 있기 때문에 사용자는 값을 볼 수 없고 의도적으로 편집할 수 없으며 포커스를 받지 않으며 스크린 리더도 이를 인식하지 않습니다.

<input type="hidden" id="timestamp" name="timestamp" value="1286705410" />

이러한 요소를 만들려면 name 및 value 속성을 설정해야 합니다. 값은 JavaScript를 통해 동적으로 설정할 수 있습니다. hidden 입력 유형에는 관련 레이블이 없어야 합니다.

다른 텍스트 입력 유형, 예를 들면 search, url, 그리고 tel은 다음 자습서인 HTML5 입력 유형에서 다룰 것입니다.

체크 가능한 항목은 클릭하여 또는 관련 레이블을 클릭하여 상태를 변경할 수 있는 컨트롤입니다. 체크 가능한 항목에는 체크박스와 라디오 버튼 두 가지 유형이 있습니다. 둘 다 기본적으로 위젯이 체크되어 있는지 여부를 나타내는 checked 속성을 사용합니다.

이러한 위젯이 다른 양식 위젯과 정확히 같은 방식으로 동작하지 않는 것은 주목할 만한 사실입니다. 대부분의 양식 위젯의 경우, 양식이 제출되면 name 속성을 가진 모든 위젯이 전송됩니다. 값을 입력하지 않아도 마찬가지입니다. 체크 가능한 항목의 경우, 체크되어 있으면 값만 전송됩니다. 이름조차도 체크되어 있지 않으면 아무것도 전송되지 않습니다, 값이 없지만 체크되어 있으면 이름이 on 값과 함께 전송됩니다.

체크박스는 <input> 요소를 사용하여 생성되며, 그 type 속성 값은 checkbox로 설정됩니다.

<input type="checkbox" id="questionOne" name="subscribe" value="yes" checked />

관련 체크박스 항목은 동일한 name 속성을 사용해야 합니다. checked 속성을 포함하면 페이지가 로드될 때 체크박스가 자동으로 체크됩니다. 체크박스를 클릭하거나 관련 레이블을 클릭하면 체크박스가 켜고 꺼집니다.

라디오 버튼은 type 속성 값이 radio로 설정된 <input> 요소를 사용하여 생성됩니다.

<input type="radio" id="soup" name="meal" value="soup" checked />

여러 라디오 버튼을 함께 연결할 수 있습니다. 그들이 name 속성의 동일한 값을 공유하면, 그들은 동일한 버튼 그룹에 있다고 간주됩니다. 주어진 그룹의 버튼 중 하나만 한 번에 체크될 수 있습니다. 이는 그 중 하나가 체크되면 다른 모든 것이 자동으로 체크 해제된다는 것을 의미합니다.

라디오 버튼은 이름에도 불구하고 실제 버튼이 아닙니다. 실제 버튼을 살펴보겠습니다! 세 가지 입력 유형이 버튼을 생성합니다.

submit

양식 데이터를 서버로 전송합니다. <button> 요소의 경우, type 속성을 생략하거나 type의 잘못된 값은 제출 버튼으로 간주됩니다.

reset

모든 양식 위젯을 기본 값으로 재설정합니다.

button

자동 효과가 없는 버튼이지만 JavaScript 코드를 사용하여 사용자 정의할 수 있습니다.

그리고 우리는 <button> 요소 그 자체를 가지고 있습니다. 이는 위에서 언급한 세 가지 <input> 유형의 동작을 흉내내기 위해 submit, reset, 또는 button 값의 type 속성을 가질 수 있습니다. 두 요소 사이의 주요 차이점은 실제 <button> 요소가 스타일을 적용하기가 훨씬 쉽다는 것입니다.

버튼은 사용자가 <button> 요소를 사용하던지 <input> 요소를 사용하던지 항상 동일하게 동작합니다. 그러나 예제에서 볼 수 있듯이, <button> 요소는 내용에 HTML을 사용할 수 있게 해줍니다. 이 내용은 여는 <button> 태그와 닫는 <button> 태그 사이에 삽입됩니다. 반면에 <input> 요소는 void elements입니다. 따라서 표시된 내용은 value 속성 내부에 삽입되며, 내용으로 일반 텍스트만 허용됩니다.

이미지 버튼 컨트롤은 사용자가 클릭하면 제출 버튼처럼 동작하는 것을 제외하고는 <img> 요소와 정확히 똑같이 렌더링됩니다.

이미지 버튼은 type 속성 값이 image로 설정된 <input> 요소를 사용하여 생성됩니다. 이 요소는 <img> 요소가 지원하는 동일한 속성 집합을 지원하며, 다른 양식 버튼이 지원하는 모든 속성도 지원합니다.

만약 이미지 버튼이 양식을 제출하는 데 사용된다면, 이 컨트롤은 그 값을 제출하지 않습니다. 대신 이미지에 클릭된 X와 Y 좌표가 제출됩니다(좌표는 이미지에 상대적으로, 즉 이미지의 왼쪽 상단 모서리는 좌표 (0, 0)을 나타냅니다). 좌표는 두 개의 키/값 쌍으로 전송됩니다.

• X 값 키는 name 속성의 값 뒤에 문자열 ".x"가 붙은 것입니다.
• Y 값 키는 name 속성의 값 뒤에 문자열 ".y"가 붙은 것입니다.

예를 들어 이미지의 좌표 (123, 456)에서 클릭하여 get 방식으로 제출하면, URL에 다음과 같이 값이 추가되어 표시됩니다.

http://foo.com?pos.x=123&pos.y=456

이것은 "핫 맵"을 구성하는 매우 편리한 방법입니다. 이러한 값들이 어떻게 전송되고 검색되는지에 대한 자세한 내용은 양식 데이터 보내기 글에서 확인할 수 있습니다.

마지막으로 초기 HTML에서 우리에게 제공된 <input> 유형이 하나 있습니다. 파일 입력 유형. 양식은 서버로 파일을 전송할 수 있습니다. 파일 선택기 위젯은 전송할 하나 이상의 파일을 선택하는 데 사용될 수 있습니다.

<input> 요소의 type 속성 값을 file로 설정하여 파일 선택기 위젯을 만듭니다. accept 속성을 사용하여 허용되는 파일의 유형을 제한할 수 있습니다. 또한 사용자가 여러 파일을 선택하도록 허용하려면 multiple 속성을 추가하면 됩니다.

이 예시에서는 그래픽 이미지 파일을 요청하는 파일 선택기를 생성합니다. 이 경우 사용자는 여러 파일을 선택할 수 있습니다.

<input type="file" name="file" id="file" accept="image/*" multiple />

일부 모바일 기기에서는 accept 속성에 캡처 정보를 추가함으로써 파일 선택기가 기기의 카메라와 마이크로 직접 캡처한 사진, 비디오 및 오디오에 액세스 할 수 있습니다.

<input type="file" accept="image/*;capture=camera" />
<input type="file" accept="video/*;capture=camcorder" />
<input type="file" accept="audio/*;capture=microphone" />

폼 컨트롤을 정의하는데 사용되는 많은 요소들은 고유한 특정 속성들을 가지고 있습니다. 그러나 모든 폼 요소에 공통으로 적용되는 속성들이 있습니다. 아래에는 이미 알고 있는 것들을 포함한 그러한 공통 속성들의 목록이 있습니다.

이 글의 끝에 도달했지만, 가장 중요한 정보를 기억하고 있나요? 이 정보를 기억하고 있는지 확인하기 위한 추가 테스트를 찾을 수 있습니다 — 지식 테스트: 기본 컨트롤를 참조하세요.

이 글은 모든 브라우저에서 잘 지원되는 HTML 초기 시절에 도입된 원래의 입력 유형들을 다루었습니다. 다음 섹션에서는 type 속성의 더 현대적인 값들을 살펴볼 것입니다.

• 이전
• Overview: HTML 폼 가이드
• 다음

• How to build custom form controls
• Sending forms through JavaScript
• Property compatibility table for form widgets