From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- files/ko/web/html/element/input/button/index.html | 343 +++++++++ files/ko/web/html/element/input/date/index.html | 497 +++++++++++++ files/ko/web/html/element/input/file/index.html | 509 +++++++++++++ files/ko/web/html/element/input/index.html | 865 ++++++++++++++++++++++ files/ko/web/html/element/input/radio/index.html | 367 +++++++++ 5 files changed, 2581 insertions(+) create mode 100644 files/ko/web/html/element/input/button/index.html create mode 100644 files/ko/web/html/element/input/date/index.html create mode 100644 files/ko/web/html/element/input/file/index.html create mode 100644 files/ko/web/html/element/input/index.html create mode 100644 files/ko/web/html/element/input/radio/index.html (limited to 'files/ko/web/html/element/input') diff --git a/files/ko/web/html/element/input/button/index.html b/files/ko/web/html/element/input/button/index.html new file mode 100644 index 0000000000..ff986a95d4 --- /dev/null +++ b/files/ko/web/html/element/input/button/index.html @@ -0,0 +1,343 @@ +--- +title: +slug: Web/HTML/Element/Input/button +tags: + - Element + - Forms + - HTML + - HTML forms + - Input Element + - Input Type +translation_of: Web/HTML/Element/input/button +--- +
{{HTMLRef}}
+ +

button 유형의 {{htmlelement("input")}} 요소는 단순한 푸시 버튼으로 렌더링 됩니다. 이벤트 처리기(주로 {{event("click")}} 이벤트)를 부착하면, 사용자 지정 기능을 웹 페이지 어느 곳에나 제공할 수 있습니다.

+ +
{{EmbedInteractiveExample("pages/tabbed/input-button.html", "tabbed-standard")}}
+ + + +
+

참고:  <input> 요소의 button 유형도 전혀 틀리지 않은 방법이지만, 이후에 생긴 {{HTMLElement("button")}} 요소를 사용하는 것이 선호되는 방식입니다. <button>의 레이블 텍스트는 여는 태그와 닫는 태그 사이에 넣기 때문에, 심지어 이미지까지도 포함할 수 있습니다.

+
+ + + + + + + + + + + + + + + + + + + + + + + + +
{{anch("값")}}버튼의 레이블로 사용할 {{domxref("DOMString")}}
이벤트{{event("click")}}
지원하는 공용 특성{{htmlattrxref("type", "input")}}, {{htmlattrxref("value", "input")}}
IDL 특성value
메서드없음
+ +

값

+ +

<input type="button"> 요소의 {{htmlattrxref("value", "input")}} 특성은 버튼의 레이블로 사용할 {{domxref("DOMString")}}을 담습니다.

+ +
+
<input type="button" value="클릭하세요">
+
+ +

{{EmbedLiveSample("summary-example3", 650, 30)}}

+ +

value를 지정하지 않으면 빈 버튼이 됩니다.

+ +
+
<input type="button">
+
+ +

{{EmbedLiveSample("summary-example1", 650, 30)}}

+ +

버튼 사용하기

+ +

<input type="button"> 요소는 아무런 기본 기능도 가지지 않습니다. (유사한 요소인 <input type="submit">과 <input type="reset">은 각각 양식을 제출하고 초기화할 수 있습니다.) 버튼이 뭐라도 하게 만들려면 JavaScript 코드를 작성해야 합니다.

+ +

간단한 버튼

+ +

{{event("click")}} 이벤트 처리기를 부착한 간단한 버튼을 통해 기계를 켜고 끄는 기능을 만드는 것으로 시작해보겠습니다. (기계라고는 하지만, 그냥 버튼의 value와 문단 내용을 바꾸는 것입니다.)

+ +
<form>
+  <input type="button" value="기계 켜기">
+</form>
+<p>기계가 멈췄습니다.</p>
+ +
var btn = document.querySelector('input');
+var txt = document.querySelector('p');
+
+btn.addEventListener('click', updateBtn);
+
+function updateBtn() {
+  if (btn.value === '기계 켜기') {
+    btn.value = '기계 끄기';
+    txt.textContent = '기계가 켜졌습니다!';
+  } else {
+    btn.value = '기계 켜기';
+    txt.textContent = '기계가 멈췄습니다.';
+  }
+}
+ +

위의 스크립트는 DOM의 <input>을 나타내는 {{domxref("HTMLInputElement")}} 객체의 참조를 획득해 변수 button에 저장합니다. 그 후 {{domxref("EventTarget.addEventListener", "addEventListener()")}}를 사용해, {{event("click")}} 이벤트가 발생했을 때 실행할 함수를 생성합니다.

+ +

{{EmbedLiveSample("간단한_버튼", 650, 100)}}

+ +

버튼에 키보드 단축키 추가하기

+ +

접근 키라고도 불리는 키보드 단축키는 사용자가 키보드의 키 혹은 키 조합을 통해 버튼을 누를 수 있는 방법을 제공합니다. 단축키를 추가하는 법은, 다른 {{htmlelement("input")}}과 마찬가지로, {{htmlattrxref("accesskey")}} 전역 특성을 추가하는 것입니다.

+ +

이번 예제에서는 이전 예제에 더해 s 키를 접근 키로 지정합니다. (브라우저/운영체제에 따라 특정 조합키를 같이 눌러야 할 수도 있습니다. accesskey 문서를 방문해 조합키 목록을 확인하세요.)

+ +
+
<form>
+  <input type="button" value="기계 켜기" accesskey="s">
+</form>
+<p>기계가 멈췄습니다.</p>
+
+
+ + + +

{{EmbedLiveSample("버튼에_키보드_단축키_추가하기", 650, 100)}}

+ +
+

참고: 위 예제의 문제는, 사용자 입장에선 어떤 단축키가 있는지 알 수도 없다는 것입니다! 실제 웹 사이트에서는, 쉽게 접근 가능한 곳에 놓인 링크로 단축키 정보를 설명하는 문서를 가리키는 등 사이트 디자인을 방해하지 않는 선에서 단축키 정보를 제공해야 할 것입니다.

+
+ +

버튼 활성화와 비활성화

+ +

버튼을 비활성화하려면 간단히 {{htmlattrxref("disabled")}} 전역 특성을 지정하는 것으로 충분합니다.

+ +
+
<input type="button" value="Disable me" disabled>
+
+ +

런타임에서 바꿀 땐 요소의 disabled 속성에 true나 false를 설정하면 끝입니다. 이번 예제의 버튼은 활성화 상태지만, 누르는 순간 btn.disabled = true를 통해 비활성화합니다. 그 후, {{domxref("WindowTimers.setTimeout","setTimeout()")}} 함수를 통해 2초 후 다시 활성화 상태로 되돌립니다.

+ + + +

{{EmbedLiveSample("Hidden_code_1", 650, 60)}}

+ +

disabled 특성을 지정하지 않은 경우 부모 요소의 disabled를 상속합니다. 이 점을 이용하면, 여러 개의 요소를 {{HTMLElement("fieldset")}} 등 부모 요소로 감싸고, 그 부모의 disabled 를 사용해 한꺼번에 상태를 통제할 수 있습니다.

+ +

다음 예제로 한 번에 비활성화하는 예제를 볼 수 있습니다. 이전 예제와 거의 똑같지만, 다른 점은 disabled 특성을 <fieldset>에 설정한다는 점입니다. 1번 버튼을 눌러보세요. 모든 버튼이 비활성화되고, 2초 후 활성화됩니다.

+ + + +

{{EmbedLiveSample("Hidden_code_2", 650, 60)}}

+ +

유효성 검사

+ +

버튼은 제한할 값이 없으므로 유효성 검사의 대상이 아닙니다.

+ +

예제

+ +

아래 예제는 {{htmlelement("canvas")}} 요소와 CSS(분량 조절을 위해 생략), JavaScript를 사용해 만든 매우 단순한 그림 그리기 앱입니다. 위쪽 두 컨트롤은 색과 펜 크기를 조절할 때 사용하고, 버튼은 클릭하면 캔버스의 그림을 모두 지우는 함수를 호출합니다.

+ +
<div class="toolbar">
+  <input type="color" aria-label="펜 색상">
+  <input type="range" min="2" max="50" value="30" aria-label="펜 크기"><span class="output">30</span>
+  <input type="button" value="캔버스 지우기">
+</div>
+
+<canvas class="myCanvas">
+  <p>Add suitable fallback here.</p>
+</canvas>
+ + + +
var canvas = document.querySelector('.myCanvas');
+var width = canvas.width = window.innerWidth;
+var height = canvas.height = window.innerHeight-85;
+var ctx = canvas.getContext('2d');
+
+ctx.fillStyle = 'rgb(0,0,0)';
+ctx.fillRect(0,0,width,height);
+
+var colorPicker = document.querySelector('input[type="color"]');
+var sizePicker = document.querySelector('input[type="range"]');
+var output = document.querySelector('.output');
+var clearBtn = document.querySelector('input[type="button"]');
+
+// covert degrees to radians
+function degToRad(degrees) {
+  return degrees * Math.PI / 180;
+};
+
+// update sizepicker output value
+
+sizePicker.oninput = function() {
+  output.textContent = sizePicker.value;
+}
+
+// store mouse pointer coordinates, and whether the button is pressed
+var curX;
+var curY;
+var pressed = false;
+
+// update mouse pointer coordinates
+document.onmousemove = function(e) {
+  curX = (window.Event) ? e.pageX : e.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
+  curY = (window.Event) ? e.pageY : e.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
+}
+
+canvas.onmousedown = function() {
+  pressed = true;
+};
+
+canvas.onmouseup = function() {
+  pressed = false;
+}
+
+clearBtn.onclick = function() {
+  ctx.fillStyle = 'rgb(0,0,0)';
+  ctx.fillRect(0,0,width,height);
+}
+
+function draw() {
+  if(pressed) {
+    ctx.fillStyle = colorPicker.value;
+    ctx.beginPath();
+    ctx.arc(curX, curY-85, sizePicker.value, degToRad(0), degToRad(360), false);
+    ctx.fill();
+  }
+
+  requestAnimationFrame(draw);
+}
+
+draw();
+ +

{{EmbedLiveSample("예제", '100%', 600)}}

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComments
{{SpecName('HTML WHATWG', 'forms.html#button-state-(type=button)', '<input type="button">')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'forms.html#button-state-(type=button)', '<input type="button">')}}{{Spec2('HTML5 W3C')}}
+ +

브라우저 호환성

+ + + +

{{Compat("html.elements.input.input-button")}}

+ +

같이 보기

+ + diff --git a/files/ko/web/html/element/input/date/index.html b/files/ko/web/html/element/input/date/index.html new file mode 100644 index 0000000000..43675823de --- /dev/null +++ b/files/ko/web/html/element/input/date/index.html @@ -0,0 +1,497 @@ +--- +title: +slug: Web/HTML/Element/Input/date +tags: + - Element + - HTML + - HTML forms + - Input + - Input Element + - Input Type + - Reference +translation_of: Web/HTML/Element/input/date +--- +
{{HTMLRef}}
+ +

date 유형의 {{HTMLElement("input")}} 요소는 유효성 검증을 포함하는 텍스트 상자 또는 특별한 날짜 선택 인터페이스를 사용해 날짜를 입력할 수 있는 입력 칸을 생성합니다.

+ +

입력 칸의 값은 연, 월, 일을 포함하지만 시간은 포함하지 않습니다. {{HTMLElement("input/time", "time")}}과 {{HTMLElement("input/datetime-local", "datetime-local")}} 입력 유형이 시간과 시간+날짜 조합을 지원합니다.

+ +
{{EmbedInteractiveExample("pages/tabbed/input-date.html", "tabbed-shorter")}}
+ + + +

입력 UI는 브라우저마다 다릅니다. {{anch("브라우저 호환성")}}에서 더 자세한 정보를 알아보세요. 날짜 입력 유형을 지원하지 않는 브라우저에서는 우아하게 <input type="text">로 저하됩니다.

+ +

날짜 선택을 위한 별도의 인터페이스를 갖춘 브라우저 중, Chrome과 Opera는 다음과 같은 모양의 달력을 보여줍니다.

+ +

A textbox containing “dd/mm/yyyy”, an increment/decrement button combo, and a downward arrow that opens into a calendar control.

+ +

구 Edge의 컨트롤입니다.

+ +

A textbox containing “mm/dd/yyyy”, but when interacted with, opens a tri-column date selector.

+ +

Firefox의 날짜 컨트롤입니다.

+ +

Another “dd/mm/yyyy” textbox that expands into a selectable calendar control.

+ + + + + + + + + + + + + + + + + + + + + + + + +
{{anch("값")}}YYYY-MM-DD 형식으로 날짜를 나타내거나, 빈 {{domxref("DOMString")}}.
이벤트{{domxref("HTMLElement/change_event", "change")}}, {{domxref("HTMLElement/input_event", "input")}}
지원하는 공통 특성{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("readonly", "input")}}, {{htmlattrxref("step", "input")}}
IDL 특성list, value, valueAsDate, valueAsNumber.
메서드{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}
+ +

값

+ +

날짜 입력 칸의 값은 입력한 날짜를 나타내는 {{domxref("DOMString")}}입니다. 날짜는 유효한 날짜 문자열 문서에서 설명하듯, ISO8601을 따르는 서식을 취합니다.

+ +

{{htmlattrxref("value", "input")}} 특성에 날짜를 지정해서 입력 칸의 기본값을 지정할 수 있습니다.

+ +
<input type="date" value="2017-06-01">
+ +

{{EmbedLiveSample('값', 600, 40)}}

+ +
+

표시 값과 실제 value의 불일치 — 입력 칸에 표시되는 값은 사용자 브라우저의 로케일에 기반한 서식을 따라가지만, value는 항상 yyyy-mm-dd의 서식을 사용합니다.

+
+ +

입력 요소의 날짜 값은 JavaScript의 {{domxref("HTMLInputElement.value", "value")}}와 {{domxref("HTMLInputElement.valueAsNumber", "valueAsNumber")}} 속성으로 설정할 수도 있습니다. 다음 예제 코드를 보세요.

+ +
var dateControl = document.querySelector('input[type="date"]');
+dateControl.value = '2017-06-01';
+console.log(dateControl.value); // prints "2017-06-01"
+console.log(dateControl.valueAsNumber); // prints 1496275200000, a UNIX timestamp
+ +

위의 코드는 type이 date인 첫 번째 {{HTMLElement("input")}} 요소를 찾아서, 값을 2017-06-01로 설정합니다. 그리고 값을 다시 문자열과 숫자 형태로 가져옵니다.

+ +

추가 특성

+ +

모든 {{htmlelement("input")}} 요소의 공용 특성 외에도, date 유형은 아래의 특성도 지원합니다.

+ + + + + + + + + + + + + + + + + + + + + + +
특성설명
{{anch("max")}}허용하는 가장 늦은 날짜
{{anch("min")}}허용하는 가장 이른 날짜
{{anch("step")}}위/아래 조절 버튼을 눌렀을 때와, 날짜 유효성을 검증할 때 사용하는 스텝 간격.
+ +

{{htmlattrdef("max")}}

+ +

받을 수 있는 제일 나중 날짜. 입력받은 {{htmlattrxref("value", "input")}}가 max보다 더 나중이라면 유효성 검증에 실패합니다. max의 값이 yyyy-mm-dd 형식의 유효한 날짜 문자열이 아니면 최댓값을 지정하지 않은 것으로 간주합니다.

+ +

max와 min 특성을 모두 사용할 경우, max는 min과 동일하거나 이후인 날짜 문자열이어야 합니다.

+ +

{{htmlattrdef("min")}}

+ +

받을 수 있는 제일 이전 날짜. 입력받은 {{htmlattrxref("value", "input")}}가 min보다 더 이전이라면 유효성 검증에 실패합니다. min의 값이 yyyy-mm-dd 형식의 유효한 날짜 문자열이 아니면 최솟값을 지정하지 않은 것으로 간주합니다.

+ +

max와 min 특성을 모두 사용할 경우, min은 max와 동일하거나 이전인 날짜 문자열이어야 합니다.

+ +

{{htmlattrdef("step")}}

+ +

{{page("/en-US/docs/Web/HTML/Element/input/number", "step-include")}}

+ +

date 입력 칸의 step 값은 날짜 단위, 즉 밀리초 단위로 86,400,000 ✕ step로 처리합니다. 기본값은 1로, 하루를 나타냅니다.

+ +
+

참고: date 입력 칸에서 step의 값으로 any를 지정하면 1과 같습니다.

+
+ +

날짜 입력 칸 사용하기

+ +

날짜 입력 칸은 꽤 편리하게 보입니다. 날짜를 선택할 수 있는 쉬운 인터페이스를 제공하고, 서버로 값을 전송할 땐 현재 사용자의 로케일과 관계 없이 정규화하니까요. 그러나, 지금은 제한적인 브라우저 지원으로 인한 문제가 존재합니다.

+ +

이 구획에서는 <input type="date">의 기본 사용법과 복잡한 사용법을 살펴볼 것이고, 뒤에서는 브라우저 지원 문제를 처리할 때 사용할 수 있는 조언을 드리겠습니다. ({{anch("미지원 브라우저 처리하기")}}로 가세요.)

+ +
+

모든 브라우저에서 날짜 입력 칸을 지원하는 날이 오면 이 문제도 자연스럽게 사라질 것입니다.

+
+ +

기본 예제

+ +

<input type="date">의 가장 간단한 사용법은 아래 코드처럼 하나의 <input>과 그 {{htmlelement("label")}}로 이뤄집니다.

+ +
<form action="https://example.com">
+  <label>
+    Enter your birthday:
+    <input type="date" name="bday">
+  </label>
+
+  <p><button>Submit</button></p>
+</form>
+ +

{{EmbedLiveSample('기본_예제', 600, 40)}}

+ +

위의 HTML은 입력받은 날짜를 bday라는 키로 https://example.com에 제출합니다. 그래서, 최종 URL은 https://example.com/?bday=1955-06-08이 됩니다.

+ +

최대와 최소 날짜 설정

+ +

{{htmlattrxref("min", "input")}}과 {{htmlattrxref("max", "input")}} 특성을 사용하면 사용자가 선택할 수 있는 날짜를 제한할 수 있습니다. 다음 코드에서는 최소 날짜 2017-04-01, 최대 날짜 2017-04-30을 지정합니다.

+ +
<form>
+  <label for="party">Choose your preferred party date:
+    <input type="date" name="party" min="2017-04-01" max="2017-04-30">
+  </label>
+</form>
+ +

{{EmbedLiveSample('최대와_최소_날짜_설정', 600, 40)}}

+ +

실행 결과에서 2017년 4월의 날짜만 선택 가능함을 볼 수 있습니다. 입력 칸의 연과 월은 편집이 불가능해지며, 날짜 선택 위젯에서도 2017년 4월 바깥의 날짜는 선택할 수 없습니다.

+ +
+

참고: 원래 {{htmlattrxref("step", "input")}} 특성을 사용해 날짜를 증감할 때 늘어날 일 수를 조절할 수 있어야 하고, 이를 이용해 토요일만 선택 가능하게 하는 등의 처리가 가능해야 합니다. 그러나 지금은 아무 브라우저에서도 구현하고 있지 않습니다.

+
+ +

입력 칸 크기 조절

+ +

<input type="date">는 {{htmlattrxref("size", "input")}} 등의 크기 조절 특성을 지원하지 않습니다. CSS를 사용하세요.

+ +

유효성 검사

+ +

<input type="date">는 기본값에선 값의 형식 외에 다른 유효성 검사는 수행하지 않습니다. 보통 날짜 입력 칸의 인터페이스가 날짜 이외의 값을 처음부터 허용하지 않는 것이 유용하긴 하나, 아무 값을 입력하지 않을 수도 있고, 미지원 브라우저에서 텍스트 입력 칸으로 대체된 경우 4월 32일처럼 유효하지 않은 날짜도 입력할 수 있습니다.

+ +

{{htmlattrxref("min", "input")}}과 {{htmlattrxref("max", "input")}}를 사용해 가능한 날짜 범위를 제한({{anch("최대와 최소 날짜 설정")}})한 경우, 지원하는 브라우저에서는 범위 밖의 값을 받았을 때 오류를 표시합니다. 그러나 브라우저가 온전히 지원하지 않을 수도 있기 때문에, 제출받은 값을 이중으로 검증하는 것이 필요합니다.

+ +

{{htmlattrxref("required", "input")}} 특성을 사용해 값을 필수로 요구할 수도 있으며, 빈 입력 칸을 제출하려고 하면 오류를 표시합니다. required는 대부분의 브라우저에서, 텍스트 입력 칸으로 대체되더라도 지원하고 있습니다.

+ +

최소/최대 날짜와 필수 검증 예제를 보겠습니다.

+ +
<form>
+  <label>
+    Choose your preferred party date (required, April 1st to 20th):
+    <input type="date" name="party" min="2017-04-01" max="2017-04-20" required>
+    <span class="validity"></span>
+  </label>
+
+  <p>
+    <button>Submit</button>
+  </p>
+</form>
+ +

날짜 입력 칸의 입력을 완전히 끝내지 않았거나, 범위 밖의 값으로 제출을 시도하면 브라우저가 오류를 표시하는 것을 확인할 수 있습니다. 아래 실행 결과에서 직접 해보세요.

+ +

{{EmbedLiveSample('유효성_검사', 600, 100)}}

+ +

지원하지 않는 브라우저를 사용하시는 경우엔 다음 스크린샷을 참고하세요.

+ +

The input field has an overlaid speech balloon, with an orange exclamation mark icon and the message “Please fill in this field.”

+ +

다음은 위 코드에서 사용한 CSS로, {{cssxref(":valid")}}와 {{cssxref(":invalid")}} 의사 클래스를 사용해 입력한 값의 유효성 여부에 따라 다른 스타일을 적용하고 있습니다. 구체적으로는, 유효성에 따라 입력 칸의 옆에 배치한 {{htmlelement("span")}}에 아이콘을 추가합니다.

+ +
label {
+  display: flex;
+  align-items: center;
+}
+
+span::after {
+  padding-left: 5px;
+}
+
+input:invalid + span::after {
+  content: '✖';
+}
+
+input:valid+span::after {
+  content: '✓';
+}
+ +
+

중요: 클라이언트측 유효성 검사는 서버의 검사를 대체할 수 없습니다. HTML을 수정하는 것도 쉽지만, HTML을 완전히 우회하고 서버에 데이터를 직접 제출할 수도 있기 때문입니다. 서버가 받은 데이터의 검증을 하지 못하는 경우 잘못된 형식, 잘못된 유형, 너무 큰 데이터 등으로 인해 심각한 상황을 맞을 수도 있습니다.

+
+ +

미지원 브라우저 처리하기

+ +

위에서 언급했듯, 현재 날짜 입력 칸의 큰 문제는 {{anch("브라우저 호환성", "브라우저 지원")}}입니다. 예를 하나 들자면, Firefox for Android의 날짜 입력기는 다음과 같은 모습입니다.

+ +

A popup calendar picker modal floats above the web page and browser UI.

+ +

지원하지 않는 브라우저에서는 단순한 텍스트 입력 칸으로 우아하게 저하되긴 하지만, 이는 (보여지는 컨트롤이 다르므로) 사용자 인터페이스와 데이터 처리가 일관적이지 못하다는 문제를 만듭니다.

+ +

두 문제 중 데이터 처리가 더 심각합니다. 날짜 입력 칸을 지원하는 브라우저에서는 값을 yyyy-mm-dd의 형식으로 정규화합니다. 그러나 텍스트 입력만으로는 값의 형식을 브라우저가 알 수 없으며, 사람들은 다양한 형태로 날짜를 입력합니다. 다음은 그 일부입니다.

+ + + +

해결하는 방법 중 하나는 날짜 입력 칸에 {{htmlattrxref("pattern", "input")}} 특성을 사용하는 것입니다. 날짜 입력 칸은 사용하지 않는 특성이지만 텍스트 입력 칸으로 대체된 경우에는 사용하기 때문인데, 미지원 브라우저에서 다음 코드를 확인해보세요.

+ +
<form>
+  <label for="bday">Enter your birthday:
+    <input type="date" name="bday" required pattern="\d{4}-\d{2}-\d{2}">
+    <span class="validity"></span>
+  </label>
+  <p>
+    <button>Submit</button>
+  </p>
+</form>
+ +

{{EmbedLiveSample('미지원_브라우저_처리하기', 600, 100)}}

+ +

입력한 값을 패턴 ####-##-## (#은 0에서 9까지의 숫자)에 맞추지 않고 제출해보면 브라우저가 날짜 입력 칸을 강조하며 오류를 표시함을 볼 수 있습니다. 물론 아직도 사람들이 유효하지 않은 날짜나 잘못된 형태로 입력하는 것은 막을 수 없으므로, 문제를 해결한 것은 아닙니다.

+ + + +

그러므로 지금으로서는, 크로스 브라우저 날짜 처리를 지원하기 위한 가장 좋은 방법은 각각 다른 입력 칸에 연, 월, 일을 입력하도록 하는 방법과, 외부 JavaScript 라이브러리를 사용하는 편이 최선입니다.

+ +

예제

+ +

이번 예제에서는 날짜를 선택할 수 있는 사용자 인터페이스 두 개를 만들어보겠습니다. 첫 번째는 네이티브 <input type="date"> 입력 칸을 사용한 것이고, 두 번째는 네이티브 입력 칸을 지원하지 않는 구형 브라우저에서 사용할 수 있도록 세 개의 {{htmlelement("select")}} 요소를 이용한 것입니다.

+ +

{{EmbedLiveSample('예제', 600, 100)}}

+ +

HTML

+ +

HTML은 다음과 같습니다.

+ +
<form>
+  <label class="nativeDatePicker">Enter your birthday:
+    <input type="date" name="bday">
+    <span class="validity"></span>
+  </label>
+
+  <fieldset class="fallbackDatePicker" hidden>
+    <legend class="fallbackLabel">Enter your birthday:</legend>
+
+    <label>
+      Day:
+      <select name="day"></select>
+    </label>
+
+    <label>
+      Month:
+      <select name="month">
+        <option>January</option>
+        <option>February</option>
+        <option>March</option>
+        <option>April</option>
+        <option>May</option>
+        <option>June</option>
+        <option>July</option>
+        <option>August</option>
+        <option>September</option>
+        <option>October</option>
+        <option>November</option>
+        <option>December</option>
+      </select>
+    </label>
+
+    <label>
+      Year:
+      <select name="year"></select>
+    </label>
+  </fieldset>
+</form>
+ +

월은 변하지 않으므로 하드코딩합니다. 일과 연은 현재 선택 값에 따라 동적으로 생성하도록 비워놓습니다. (자세한 설명은 아래의 코드 주석을 참고하세요.)

+ + + +

JavaScript

+ +

코드에서 관심을 가질만한 곳은 브라우저의 <input type="date"> 지원 여부를 알아내기 위한 기능 탐지 부분입니다.

+ +

우선 새로운 {{htmlelement("input")}} 요소를 만들고, type을 date로 설정해봅니다. 그리고 즉시 <input>의 유형을 검사하는데, 지원하지 않는 브라우저에서 date는 text로 대체되므로 text를 반환합니다. <input type="date">을 지원하지 않는다는 사실을 알아냈으면 네이티브 입력 칸을 숨기고, 대체 요소({{htmlelement("select")}})를 대신 노출합니다.

+ +
// define variables
+var nativePicker = document.querySelector('.nativeDatePicker');
+var fallbackPicker = document.querySelector('.fallbackDatePicker');
+
+var yearSelect = document.querySelector('[name=year]');
+var monthSelect = document.querySelector('[name=month]');
+
+// Test whether a new date input falls back to a text input
+var testElement = document.createElement('input');
+
+try {
+  test.type = 'date';
+} catch (e) {
+  console.log(e.description);
+}
+
+// If it does, run the code inside the if () {} block
+if (testElement.type === 'text') {
+  // hide the native picker and show the fallback
+  nativePicker.hidden = true;
+  fallbackPicker.hidden = false;
+
+  // populate the days and years dynamically
+  // (the months are always the same, therefore hardcoded)
+  populateDays(monthSelect.value);
+  populateYears();
+}
+
+function populateDays(month) {
+  const daySelect = document.querySelector('[name=day]');
+  const month = monthSelect.value;
+
+  // Create variable to hold new number of days to inject
+  let dayNum;
+
+  // 31 or 30 days?
+  switch (month) {
+    case 'April': case 'June': case 'September': case 'November':
+      dayNum = 30;
+    break;
+    case 'February':
+      // If month is February, calculate whether it is a leap year or not
+      const year = yearSelect.value;
+      const isLeap = new Date(year, 1, 29).getMonth() === 1;
+      dayNum = isLeap ? 29 : 28;
+    break;
+    default:
+      dayNum = 31;
+  }
+
+  // inject the right number of new <option>s into the <select>
+  daySelect.options = Array.from({ length: dayNum }, function(index) {
+    return index + 1;
+  });
+
+  // if previous day has already been set, set daySelect's value
+  // to that day, to avoid the day jumping back to 1 when you
+  // change the year
+  if (previousDay) {
+    daySelect.value = previousDay;
+
+    // If the previous day was set to a high number, say 31, and then
+    // you chose a month with fewer days in it (like February),
+    // this code ensures that the highest day available
+    // is selected, rather than showing a blank daySelect
+    if (previousDay > daySelect.length + 1) {
+      daySelect.selectedIndex = daySelect.length;
+    }
+  }
+}
+
+function populateYears() {
+  // get this year as a number
+  var year = (new Date()).getFullYear();
+
+  // Make this year and the 100 years before it available in the <select>
+  daySelect.options = Array.from({ length: 100 }, function(index) {
+    return index + year;
+  });
+}
+
+// when the month or year <select> values are changed, rerun populateDays()
+// in case the change affected the number of available days
+yearSelect.onchange = populateDays;
+monthSelect.onchange = populateDays;
+
+// preserve day selection
+var previousDay;
+
+// update what day has been set to previously
+// see end of populateDays() for usage
+daySelect.onchange = function() {
+  previousDay = daySelect.value;
+}
+ +
+

참고: 어떤 연도는 53주임을 기억하세요! (Wikipedia) 프로덕션 애플리케이션을 개발할 땐 고려해야 할 사항입니다.

+
+ +

명세

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComments
{{SpecName('HTML WHATWG', 'forms.html#date-state-(type=date)', '<input type="date">')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'forms.html#date-state-(type=date)', '<input type="date">')}}{{Spec2('HTML5 W3C')}}
+ +

브라우저 호환성

+ + + +

{{Compat("html.elements.input.input-date")}}

+ +

같이 보기

+ + diff --git a/files/ko/web/html/element/input/file/index.html b/files/ko/web/html/element/input/file/index.html new file mode 100644 index 0000000000..a58f988d17 --- /dev/null +++ b/files/ko/web/html/element/input/file/index.html @@ -0,0 +1,509 @@ +--- +title: +slug: Web/HTML/Element/Input/file +tags: + - HTML + - HTML forms + - Input Type + - Reference + - 파일 +translation_of: Web/HTML/Element/input/file +--- +
{{HTMLRef}}
+ +

file 유형의 {{htmlelement("input")}} 요소에는 저장 장치의 파일을 하나 혹은 여러 개 선택할 수 있습니다. 그 후, 양식을 제출해 서버로 전송하거나, File API를 사용한 JavaScript 코드로 조작할 수 있습니다.

+ +
{{EmbedInteractiveExample("pages/tabbed/input-file.html", "tabbed-shorter")}}
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
{{anch("값")}}선택한 파일의 경로를 나타내는 {{domxref("DOMString")}}.
이벤트{{domxref("HTMLElement/change_event", "change")}}, {{domxref("HTMLElement/input_event", "input")}}
+

지원하는 공통 특성

+ 		{{htmlattrxref("required", "input")}}
추가 특성{{htmlattrxref("accept", "input/file")}}, {{htmlattrxref("capture", "input/file")}}, {{htmlattrxref("files", "input/file")}}, {{htmlattrxref("multiple", "input/file")}}
IDL 특성files, value
DOM 인터페이스{{domxref("HTMLInputElement")}}
메서드{{domxref("HTMLInputElement.select", "select()")}}
+ +

값

+ +

파일 입력 칸의 {{htmlattrxref("value", "input")}} 특성은 선택한 파일의 경로를 나타내는 {{domxref("DOMString")}}을 담습니다. 사용자가 여러 개의 파일을 선택한 경우 value는 파일 목록의 첫 번째 파일을 가리키며, 나머지 파일은 요소의 {{domxref("HTMLInputElement.files")}} 속성으로 가져올 수 있습니다.

+ +
참고: + +
    +
  1. 아직 아무런 파일도 선택하지 않은 경우 빈 문자열("")을 사용합니다.
    2. +
  2. 악의적인 소프트웨어가 사용자의 파일 구조를 알아내는 것을 방지하기 위해, 값 문자열은 항상 C:\fakepath\를 앞에 포함합니다.
    3. +
+
+ +

추가 특성

+ +

모든 {{htmlelement("input")}} 요소의 공용 특성 외에도, file 유형은 아래의 특성도 지원합니다.

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
특성설명
{{anch("accept")}}허용하는 파일 유형을 나타내는 하나 이상의 {{anch("고유 파일 유형 지정자")}}
{{anch("capture")}}이미지 또는 비디오 데이터를 캡처할 때 사용할 방법
{{anch("files")}}선택한 파일을 나열하는 {{domxref("FileList")}}
{{anch("multiple")}}지정할 경우 사용자가 여러 개의 파일을 선택할 수 있음
+ +

{{htmlattrdef("accept")}}

+ +

accept 특성은 파일 입력 칸이 허용할 파일 유형을 나타내는 문자열로, 쉼표로 구분한 {{anch("고유 파일 유형 지정자")}}의 목록입니다. 주어진 파일 유형의 식별 방법이 여러 가지일 수도 있으므로, 특정 파일 형식이 필요할 땐 유형의 집합을 제공하는 것이 좋습니다.

+ +

예를 들어, Microsoft Word 파일을 식별하는 방법은 여러가지이므로, Word 파일을 허용하는 <input>은 다음과 같은 형태를 갖게 됩니다.

+ +
<input type="file" id="docpicker"
+  accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document">
+ +

{{htmlattrdef("capture")}}

+ +

accept 특성이 이미지나 비디오 캡처 데이터를 요구할 경우, capture 특성으로는 어떤 카메라를 사용할지 지정할 수 있습니다. user 값은 전면 카메라(사용자를 향한 카메라)와 마이크를, environment 값은 후면 카메라와 마이크를 사용해야 함을 나타냅니다. capture 특성을 누락한 경우 {{Glossary("user agent", "사용자 에이전트")}}가 어떤 쪽을 선택할지 스스로 결정합니다. 요청한 방향의 카메라를 사용할 수 없는 경우 사용자 에이전트는 자신이 선호하는 기본 모드로 대체할 수 있습니다.

+ +
참고: capture는 과거 불리언 특성이었으며, 존재할 경우 파일 선택 창을 요청하는 대신 장치의 카메라나 마이크 등 미디어 캡처 장치를 요청했었습니다.
+ +

{{htmlattrdef("files")}}

+ +

선택한 모든 파일을 나열하는 {{domxref("FileList")}} 객체입니다. {{htmlattrxref("multiple", "input/file")}} 특성을 지정하지 않았다면 두 개 이상의 파일을 포함하지 않습니다.

+ +

{{htmlattrdef("multiple")}}

+ +

multiple 불리언 특성을 지정한 경우 사용자가 파일 선택 창에서 복수의 파일을 선택할 수 있습니다.

+ +

비표준 특성

+ +

위의 표준 특성 외에도, 다음과 같이 일부 브라우저에서만 사용할 수 있는 비표준 특성도 존재합니다. 지원하지 않는 브라우저에서의 코드 동작에 제약이 생길 수 있으므로, 가능하면 사용을 피해야 합니다.

+ + + + + + + + + + + + + + +
특성설명
{{anch("webkitdirectory")}}사용자가 디렉토리를 선택할 수 있는지 나타내는 불리언 특성. {{anch("multiple")}} 특성을 지정한 경우 복수 선택 가능
+ +

{{htmlattrdef("webkitdirectory")}} {{non-standard_inline}}

+ +

webkitdirectory 불리언 특성이 존재할 경우 사용자의 파일 선택 창에서 디렉토리만 선택 가능해야 함을 나타냅니다. {{domxref("HTMLInputElement.webkitdirectory")}} 문서를 방문해 보다 자세한 정보와 예제를 알아보세요.

+ +
+

참고: webkitdirectory는 원래 WebKit 기반 브라우저에서만 구현했었으나, Microsoft Edge와 Firefox(50 이상)도 지원합니다. 그러나, 비록 상대적으로 널리 지원하고는 있으나, 여전히 비표준 특성이므로 대안이 없는 경우에만 사용해야 합니다.

+
+ +

고유 파일 유형 지정자

+ +

고유 파일 유형 지정자는 file 유형의 {{htmlelement("input")}}에서 선택할 수 있는 파일의 종류를 설명하는 문자열입니다. 각각의 유형 지정자는 다음 형태 중 하나를 취할 수 있습니다.

+ + + +

accept 특성이 고유 파일 유형 지정자를 값으로 받습니다. 쉼표로 구분하면 여러 개의 지정자도 사용할 수 있습니다. 예를 들어, 표준 이미지 형식 뿐만 아니라 PDF 파일도 받을 수 있어야 하는 입력 칸은 다음 코드처럼 작성할 수 있습니다.

+ +
<input type="file" accept="image/*,.pdf">
+ +

파일 입력 칸 사용하기

+ +

기본 예제

+ +
<form method="post" enctype="multipart/form-data">
+ <div>
+   <label for="file">Choose file to upload</label>
+   <input type="file" id="file" name="file" multiple>
+ </div>
+ <div>
+   <button>Submit</button>
+ </div>
+</form>
+ + + +

결과는 다음과 같습니다.

+ +

{{EmbedLiveSample('기본_예제', 650, 60)}}

+ +
+

참고: 이 예제는 GitHub에서도 볼 수 있습니다. 소스 코드와 라이브 예제를 확인하세요.

+
+ +

사용자의 장치와 운영체제에 상관없이, 파일 입력 칸은 사용자가 파일을 선택할 수 있도록 파일 선택 대화창을 여는 하나의 버튼을 제공합니다.

+ +

예제 코드와 같이 {{htmlattrxref("multiple", "input/file")}} 특성을 지정한 경우 파일 여러 개를 한 번에 선택할 수 있습니다. 사용자는 플랫폼이 허용하는 방법(Shift, Ctrl 누르기 등)을 통해 파일 선택 창에서 두 개 이상의 파일을 선택합니다. <input> 하나에 파일 하나씩만 선택을 허용하고 싶은 경우 multiple 특성을 제거하세요.

+ +

선택한 파일의 정보 가져오기

+ +

요소의 {{domxref("HTMLInputElement.files")}} 속성은 선택한 파일({{domxref("File")}}) 목록을 {{domxref("FileList")}} 객체로 반환합니다. FileList는 배열처럼 행동하므로, length 속성을 사용해 현재 선택한 파일의 수를 알 수 있습니다.

+ +

각각의 File 객체는 다음과 같은 정보를 가지고 있습니다.

+ +
+
name
+
파일 이름.
+
lastModified
+
파일을 마지막으로 수정한 시각을 나타내는 숫자. UNIX 표준시(1970년 1월 1일 자정)으로부터 지난 시간을 밀리초 단위로 나타낸 값입니다.
+
lastModifiedDate {{deprecated_inline}}
+
파일을 마지막으로 수정한 시각을 나타내는 {{jsxref("Date")}} 객체. 더 이상 사용하지 않아야 합니다. lastModified를 대신 사용하세요.
+
size
+
파일의 크기를 바이트 단위로 나타낸 값.
+
type
+
파일의 MIME 유형.
+
webkitRelativePath {{non-standard_inline}}
+
{{htmlattrxref("webkitdirectory", "input/file")}} 특성을 사용한 경우, 기준 디렉토리에 대한 파일의 상대적인 경로. 비표준 특성이므로 사용에 주의가 필요합니다.
+
+ + + +

가능한 파일 유형 제한하기

+ +

종종, 사용자가 아무 파일이나 선택하지 못하도록 제한하고, 받을 수 있는 파일의 유형을 정해두고 싶을 때가 있습니다. 예를 들어, 프로필 사진을 받는 입력 칸의 경우, {{glossary("JPEG")}}, {{glossary("PNG")}}처럼 웹 호환 가능한 이미지 형식을 선택하도록 해야 할 것입니다.

+ +

허용하는 파일 유형은 {{htmlattrxref("accept","input/file")}} 특성을 사용해 지정할 수 있으며, 허용할 파일 확장자나 MIME 유형을 쉼표로 구분한 값을 제공해야 합니다. 다음은 몇 가지 예시입니다.

+ + + +

보다 완전한 예제 코드를 보겠습니다.

+ +
<form method="post" enctype="multipart/form-data">
+  <div>
+    <label for="profile_pic">Choose file to upload</label>
+    <input type="file" id="profile_pic" name="profile_pic"
+          accept=".jpg, .jpeg, .png">
+  </div>
+  <div>
+    <button>Submit</button>
+  </div>
+</form>
+ + + +

위 코드는 이전 예제와 비슷하게 보이는 결과를 냅니다.

+ +

{{EmbedLiveSample('가능한_파일_유형_제한하기', 650, 60)}}

+ +
+

참고: GitHub에서도 볼 수 있습니다. 소스 코드, 라이브 실행 결과.

+
+ +

외형은 유사해 보일지라도, 이번 예제에서 파일을 선택하려고 한다면 accept에 지정한 파일 유형만 선택 가능함을 확인할 수 있습니다. (정확한 동작은 브라우저와 운영체제에 따라 다를 수 있습니다)

+ +

Screenshot of a macOS file picker dialog. Files other than JPEG are grayed-out and unselectable.

+ +

accept 특성은 선택한 파일 유형을 검증하지는 않으며, 단순히 브라우저가 사용자를 올바른 파일 유형으로 유도하도록 힌트를 제공할 뿐입니다. (대부분의 경우) 사용자가 파일 선택 창의 옵션을 설정해 accept를 덮어쓰고 자신이 원하는 아무 파일이나 선택할 수 있으므로, 파일 입력 칸에 잘못된 유형의 파일이 올 수 있습니다.

+ +

그러므로, 반드시 적절한 서버 사이드 유효성 검증을 통해 accept 특성을 보조해야 합니다.

+ +

참고

+ +
    +
  1. +

    파일 입력 칸의 값을 스크립트에서 설정할 수는 없습니다. 따라서 다음 코드는 아무런 효과도 내지 않습니다.

    + + 
    const input = document.querySelector("input[type=file]");
+input.value = "foo";
+
    +
    2. +
  2. +

    <input type="file">로 선택한 원본 파일의 실제 경로는 명확한 보안상 문제로 인해 알 수 없습니다. 대신 앞에 C:\fakepath\ 를 붙인 파일 이름을 경로로 보여줍니다. 하필 이런 모습이 된 것에는 역사적인 이유가 있지만 이 동작은 모든 최신 브라우저에서 지원하고 있으며, 사실 명세에도 포함되어 있습니다.

    +
    3. +
+ +

예제

+ +

이번 예제에서는 좀 더 발전된 파일 선책 창을 만들어 보겠습니다. HTMLInputElement.files 속성에서 알 수 있는 정보도 활용하면서, 몇 가지 재밌는 활용법도 보여드리겠습니다.

+ +
+

참고: 전체 소스 코드는 GitHub에 있습니다. file-example.html (라이브 실행 결과). 주 목적이 JavaScript이므로 CSS는 따로 설명하지 않겠습니다.

+
+ +

우선 HTML을 살펴보겠습니다.

+ +
<form method="post" enctype="multipart/form-data">
+  <div>
+    <label for="image_uploads">Choose images to upload (PNG, JPG)</label>
+    <input type="file" id="image_uploads" name="image_uploads" accept=".jpg, .jpeg, .png" multiple>
+  </div>
+  <div class="preview">
+    <p>No files currently selected for upload</p>
+  </div>
+  <div>
+    <button>Submit</button>
+  </div>
+</form>
+ + + +

지금까지 봤던 것과 거의 같으므로 설명할 부분은 없겠습니다.

+ +

이제 JavaScript 차례입니다.

+ +

우선 양식의 파일 입력 칸과, .preview 클래스를 가진 {{htmlelement("div")}} 요소에 대한 참조를 가져옵니다. 그 후, {{htmlelement("input")}} 요소를 숨겨버립니다. 파일 입력 칸은 보통 못생겼고, 스타일을 적용하기도 어려우며 브라우저마다 디자인이 다르기 때문입니다. <input>은 연결된 {{htmlelement("label")}}을 클릭해도 활성화할 수 있으므로, 시각적으로 <input>을 숨긴 후 레이블에 버튼처럼 스타일을 적용해서, 파일을 업로드하고 싶은 경우 레이블을 누르라는 것을 알려주는 편이 낫습니다.

+ +
var input = document.querySelector('input');
+var preview = document.querySelector('.preview');
+
+input.style.opacity = 0;
+ +
+

참고: {{cssxref("visibility", "visibility: hidden")}}, {{cssxref("display", "display: none")}}로 숨길 경우 접근성 보조 기술이 파일 입력 칸을 상호작용 할 수 없는 상태라고 인식하기 때문에 {{cssxref("opacity")}}를 대신 사용합니다.

+
+ +

그 다음으로는 입력 칸에 이벤트 수신기를 부착해 그 값이 달라지는지(예제의 경우, 파일을 선택할 때) 지켜봅니다. 이벤트 수신기는 밑에서 만들 updateImageDisplay() 함수를 호출하게 됩니다.

+ +
input.addEventListener('change', updateImageDisplay);
+ +

updateImageDisplay() 함수를 호출하면 다음 작업을 수행하게 됩니다.

+ + + +
function updateImageDisplay() {
+  while(preview.firstChild) {
+    preview.removeChild(preview.firstChild);
+  }
+
+  const curFiles = input.files;
+  if(curFiles.length === 0) {
+    const para = document.createElement('p');
+    para.textContent = 'No files currently selected for upload';
+    preview.appendChild(para);
+  } else {
+    const list = document.createElement('ol');
+    preview.appendChild(list);
+
+    for(const file of curFiles) {
+      const listItem = document.createElement('li');
+      const para = document.createElement('p');
+      if(validFileType(file)) {
+        para.textContent = `File name ${file.name}, file size ${returnFileSize(file.size)}.`;
+        const image = document.createElement('img');
+        image.src = URL.createObjectURL(file);
+
+        listItem.appendChild(image);
+        listItem.appendChild(para);
+      } else {
+        para.textContent = `File name ${file.name}: Not a valid file type. Update your selection.`;
+        listItem.appendChild(para);
+      }
+
+      list.appendChild(listItem);
+    }
+  }
+}
+ +

validFileType() 함수는 매개변수로 {{domxref("File")}} 객체를 받아서, 그 파일의 type이 fileTypes의 아무 값과 동일한지 판별합니다. {{jsxref("Array.prototype.includes()")}}를 사용하여 type과 일치하는 값이 존재하면 true, 아니면 false를 반환합니다.

+ +
// https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types
+const fileTypes = [
+  "image/apng",
+  "image/bmp",
+  "image/gif",
+  "image/jpeg",
+  "image/pjpeg",
+  "image/png",
+  "image/svg+xml",
+  "image/tiff",
+  "image/webp",
+  "image/x-icon"
+];
+
+function validFileType(file) {
+  return fileTypes.includes(file.type);
+}
+ +

returnFileSize() 함수는 숫자(현재 파일의 size 속성에서 가져온, 파일의 바이트 크기)를 받은 후, 읽기 좋게 바이트/KB/MB 단위로 서식을 적용합니다.

+ +
function returnFileSize(number) {
+  if(number < 1024) {
+    return number + 'bytes';
+  } else if(number >= 1024 && number < 1048576) {
+    return (number/1024).toFixed(1) + 'KB';
+  } else if(number >= 1048576) {
+    return (number/1048576).toFixed(1) + 'MB';
+  }
+}
+ +

결과는 다음과 같습니다. 한번 직접 파일을 선택해보세요.

+ +

{{EmbedLiveSample('예제', '100%', 200)}}

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'input.html#file-upload-state-(type=file)', '<input type="file">')}}{{Spec2('HTML WHATWG')}}Initial definition
{{SpecName('HTML5.1', 'sec-forms.html#file-upload-state-typefile', '<input type="file">')}}{{Spec2('HTML5.1')}}Initial definition
{{SpecName('HTML Media Capture', '#the-capture-attribute','capture attribute')}}{{Spec2('HTML Media Capture')}}initial capture attribute
+ +

브라우저 호환성

+ + + +

{{Compat("html.elements.input.input-file")}}

+ +

같이 보 기

+ + diff --git a/files/ko/web/html/element/input/index.html b/files/ko/web/html/element/input/index.html new file mode 100644 index 0000000000..8ff435e12d --- /dev/null +++ b/files/ko/web/html/element/input/index.html @@ -0,0 +1,865 @@ +--- +title: ': 입력 요소' +slug: Web/HTML/Element/Input +tags: + - Element + - Forms + - HTML + - HTML forms + - HTML input tag + - Reference + - Web +translation_of: Web/HTML/Element/input +--- +
{{HTMLRef}}
+ +

HTML <input> 요소는 웹 기반 양식에서 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성합니다. {{glossary("user agent", "사용자 에이전트")}}에 따라서 다양한 종류의 입력 데이터 유형과 컨트롤 위젯이 존재합니다. 입력 유형과 특성의 다양한 조합 가능성으로 인해, <input> 요소는 HTML에서 제일 강력하고 복잡한 요소 중 하나입니다.

+ +
{{EmbedInteractiveExample("pages/tabbed/input-text.html", "tabbed-shorter")}}
+ + + +

<input> 유형

+ +

<input> 요소의 동작 방식은 {{htmlattrxref("type")}} 특성에 따라 현격히 달라지므로, 각각의 유형은 별도의 참고 문서에서 더 자세히 확인할 수 있습니다. 특성을 지정하지 않은 경우, 기본값은 text입니다.

+ +

가능한 유형은 다음과 같습니다.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
유형설명기본 예제Spec
{{HTMLElement("input/button", "button")}}기본 행동을 가지지 않으며 {{htmlattrxref("value", "input")}}을 레이블로 사용하는 푸시 버튼. + + {{EmbedLiveSample("examplebutton",200,55,"","", "nobutton")}}
{{HTMLElement("input/checkbox", "checkbox")}}단일 값을 선택하거나 선택 해제할 수 있는 체크박스. + + {{EmbedLiveSample("examplecheckbox",200,55,"","", "nobutton")}}
{{HTMLElement("input/color", "color")}}색을 지정할 수 있는 컨트롤. 브라우저가 지원하는 경우, 활성화 시 색상 선택기를 열어줍니다. + + {{EmbedLiveSample("examplecolor",200,55,"","", "nobutton")}}{{HTMLVersionInline("5")}}
{{HTMLElement("input/date", "date")}}날짜(연월일, 시간 없음)를 지정할 수 있는 컨트롤. 브라우저가 지원하는 경우, 활성화 시 날짜를 선택할 수 있는 달력 등을 열어줍니다. + + {{EmbedLiveSample("exampledate",200,55,"","", "nobutton")}}{{HTMLVersionInline("5")}}
{{HTMLElement("input/datetime-local", "datetime-local")}}날짜와 시간을 지정할 수 있는 컨트롤. 시간대는 지정할 수 없습니다. 브라우저가 지원하는 경우, 활성화 시 날짜를 선택할 수 있는 달력과, 시계 등을 열어줍니다. + + {{EmbedLiveSample("exampledtl",200,55,"","", "nobutton")}}{{HTMLVersionInline("5")}}
{{HTMLElement("input/email", "email")}}이메일 주소를 편집할 수 있는 필드. 텍스트 입력 필드처럼 보이지만 유효성 검증 매개변수가 존재하며, 브라우저와 장치가 동적 키보드를 지원하는 경우 이메일에 적합한 키보드를 보여줍니다. + + {{EmbedLiveSample("exampleemail",200,55,"","", "nobutton")}}{{HTMLVersionInline("5")}}
{{HTMLElement("input/file", "file")}}파일을 지정할 수 있는 컨트롤. {{htmlattrxref("accept", "input")}} 특성을 사용하면 허용하는 파일 유형을 지정할 수 있습니다. + + {{EmbedLiveSample("examplefile",'100%',55,"","", "nobutton")}}
{{HTMLElement("input/hidden", "hidden")}}보이지 않지만 값은 서버로 전송하는 컨트롤. 오른쪽 칸에 예제가 있지만 숨겨져서 안보이네요!
{{HTMLElement("input/image", "image")}}src 특성에 지정한 이미지로 나타나는 시각적 제출 버튼. 이미지의 {{anch('src')}}를 누락한 경우 {{anch('alt')}} 특성의 텍스트를 대신 보여줍니다. + + {{EmbedLiveSample("exampleimage",200,55,"","", "nobutton")}}
{{HTMLElement("input/month", "month")}}연과 월을 지정할 수 있는 컨트롤. 시간대는 지정할 수 없습니다. + + {{EmbedLiveSample("examplemonth",200,55,"","", "nobutton")}}{{HTMLVersionInline("5")}}
{{HTMLElement("input/number", "number")}} +

숫자를 입력하기 위한 컨트롤. 스피너를 표시하고 지원되는 기본 확인을 추가합니다. 몇몇 장치에서는 동적 키패드들과 숫자 키패드를 표시합니다.

+ 		+ + {{EmbedLiveSample("examplenumber",200,55,"","", "nobutton")}}{{HTMLVersionInline("5")}}
{{HTMLElement("input/password", "password")}} +

값이 가려진 한줄 텍스트 필드. 사이트가 안전하지 않으면 사용자에게 경고합니다.

+ 		+ + {{EmbedLiveSample("examplepassword",200,55,"","", "nobutton")}}
{{HTMLElement("input/radio", "radio")}} +

같은 {{anch('name')}} 값을 가진 여러개의 선택중에서 하나의 값을 선택하게 하는 라디오 버튼입니다.

+ 		+ + {{EmbedLiveSample("exampleradio",200,55,"","", "nobutton")}}
{{HTMLElement("input/range", "range")}} +

값이 가려진 숫자를 입력하는 컨트롤. 디폴트 값이 중간값인 범위 위젯으로 표시합니다. 접속사 {{anch('min')}} 와 {{anch('max')}} 사이에 사용되며 수용가능한 값의 범위를 정의합니다.

+ 		+ + {{EmbedLiveSample("examplerange",200,55,"","", "nobutton")}}{{HTMLVersionInline("5")}}
{{HTMLElement("input/reset", "reset")}}양식의 내용을 디폴트값(기본값)으로 초기화하는 버튼. 권장되지 않습니다. + + {{EmbedLiveSample("examplereset",200,55,"","", "nobutton")}}
{{HTMLElement("input/search", "search")}} +

검색문자열을 입력하는 한줄 텍스트 필드. 줄바꿈 문자는 입력값에서 자동으로 제거됩니다. 지원 브라우저에서 필드를 클리어하기 위해 사용되는 삭제 아이콘이 포함됩니다. 동적 키패드들이 있는 몇몇 장치에서 엔터키 대신에 검색 아이콘을 표시합니다.

+ 		+ + {{EmbedLiveSample("examplesearch",200,55,"","", "nobutton")}}{{HTMLVersionInline("5")}}
{{HTMLElement("input/submit", "submit")}}양식을 전송하는 버튼 + + {{EmbedLiveSample("examplesubmit",200,55,"","", "nobutton")}}
{{HTMLElement("input/tel", "tel")}}전화번호를 입력하는 컨트롤. 몇몇 장치에서 동적 키패드들과 전화번호 입력기를 표시한다. + + {{EmbedLiveSample("exampletel",200,55,"","", "nobutton")}}{{HTMLVersionInline("5")}}
{{HTMLElement("input/text", "text")}} +

디폴트 값. 한줄의 텍스트 필드입니다. 새줄 문자는 입력값으로부터 자동으로 제거됩니다.

+ 		+ + {{EmbedLiveSample("exampletext",200,55,"","", "nobutton")}}
{{HTMLElement("input/time", "time")}}시간대가 없는 시간값을 입력하는 콘트롤 + + {{EmbedLiveSample("exampletime",200,55,"","", "nobutton")}}{{HTMLVersionInline("5")}}
{{HTMLElement("input/url", "url")}}URL을 입력하는 필드. 텍스트 입력처럼 보이지만, 검증 매개변수가 있습니다. 동적 키보드들을 지원하는 브라우저와 장치들에 관련된 키보드가 있습니다. + + {{EmbedLiveSample("exampleurl",200,55,"","", "nobutton")}}{{HTMLVersionInline("5")}}
{{HTMLElement("input/week", "week")}}시간대가 없는 주-년 값과 주의 값을 구성하는 날짜를 입력하는 컨트롤입니다. + + {{EmbedLiveSample("exampleweek",200,55,"","", "nobutton")}}{{HTMLVersionInline("5")}}
퇴화한 값
{{HTMLElement("input/datetime", "datetime")}} +

{{deprecated_inline}} {{obsolete_inline}} UTC 시간대에 기반한 날짜와 시간(시,분,초 그리고 초의 분수)을 입력하는 콘트롤입니다.

+ 		+ + {{EmbedLiveSample("exampledatetime",200,75,"","", "nobutton")}}{{HTMLVersionInline("5")}}
+ +

속성

+ +

<input> 요소가 강력한 이유는 바로 다양한 속성 때문입니다. 그 중에서도, 위의 표에서 확인할 수 있는 {{htmlattrxref("type", "input")}} 속성이 제일 중요합니다. 모든 <input> 요소는 유형에 상관하지 않고 {{domxref("HTMLInputElement")}} 인터페이스에 기반하므로, 기술적으로는 모든 <input>이 동일한 속성을 가집니다. 그러나 사실 대부분의 속성은 일부 유형에서만 효과를 보입니다. 게다가, 어떤 속성은 유형별로 그 영향이 달라집니다.

+ +

여기에서는 모든 속성값들에 대해 간략한 설명을 담은 표를 제공합니다. 이 표 다음에는 각각의 속성을 더욱 상세하게 설명하는 목록이 나오는데, 그들이 연관된 input 유형과 함께 나옵니다. 대부분의 혹은 모든 input 유형에 공통적인 속성들은 그 아래 더욱 상세하게 설명되어 있습니다. 몇몇 input 유형에만 특정하게 해당하는 속성들이나 모든 유형에 공통적으로 해당하지만 특정 유형에 사용될 때 특정한 행동양식을 나타내는 속성들은 그 유형의 해당 페이지에 대신 기술되어 있습니다. 이 요소에는 글로벌 속성들도 포함됩니다. input에 관련된 특별히 중요한 속성들은 하이라이트로 표시되었습니다. 

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
{{htmlelement('input')}} 요소는 전역 속성(Global Attributes)과 다음 특성을 포함합니다.
특성유형설명
{{anch('htmlattrdefaccept', 'accept')}}file파일을 업로드 컨트롤에서 기대하는 파일 유형을 암시
{{anch('htmlattrdefalt', 'alt')}}image이미지 유형에 대한 대체 속성. accessibiltiy 측면에서 필요.
{{anch('htmlattrdefautocomplete', 'autocomplete')}}all양식 자동생성 기능 (form autofill) 암시
{{anch('htmlattrdefautofocus', 'autofocus')}}all페이지가 로딩될때 양식 제어에 오토포커스
{{anch('htmlattrdefcapture', 'capture')}}file파일 업로드 제어에서 input 방식에서 미디어 capture 
{{anch('htmlattrdefchecked', 'checked')}}radio, checkbox커맨드나 컨트롤이 체크 되었는지의 여부
{{anch('htmlattrdefdirname', 'dirname')}}text, search양식 전송시 요소의 방향성을 전송할 때 양식 필드의 Name
{{anch('htmlattrdefdisabled', 'disabled')}}all양식 컨트롤이 비활성화되었는지의 여부
{{anch('htmlattrdefform', 'form')}}all컨트롤을 양식 요소와 연결
{{anch('htmlattrdefformaction', 'formaction')}}image, submit양식 전송시 URL 사용하기
{{anch('htmlattrdefformenctype', 'formenctype')}}image, submit양식의 데이터 인코딩 유형이 양식 전송시 사용될 것
{{anch('htmlattrdefformmethod', 'formmethod')}}image, submit양식 전송시 HTTP 방식을 사용
{{anch('htmlattrdefformnovalidate', 'formnovalidate')}}image, submit양식 전송시 양식 컨트롤 확인을 무시하기
{{anch('htmlattrdefformtarget', 'formtarget')}}image, submit양식 전송시 브라우징 맥락
{{anch('htmlattrdefheight', 'height')}}image이미지 높이에서  height 속성과 같음
{{anch('htmlattrdeflist', 'list')}}almost alldatalist 자동입력 옵션의 id 속성값
{{anch('htmlattrdefmax', 'max')}}numeric types최대값
{{anch('htmlattrdefmaxlength', 'maxlength')}}password, search, tel, text, urlvalue의 최대 길이 (문자수) 
{{anch('htmlattrdefmin', 'min')}}numeric types최소값
{{anch('htmlattrdefminlength', 'minlength')}}password, search, tel, text, urlvalue의 최소 길이 (문자수)
{{anch('htmlattrdefmultiple', 'multiple')}}email, file불리언값. 여러 값을 허용할지의 여부
{{anch('htmlattrdefname', 'name')}}allinput 양식 컨트롤의 이름. 이름/값 짝(name/value pair)의 일부로서 양식과 함께 전송된다
{{anch('htmlattrdefpattern', 'pattern')}}password, text, telvalue 가 유효하기 위해 일치해야 하는 패턴
{{anch('htmlattrdefplaceholder', 'placeholder')}}password, search, tel, text, url양식 컨트롤이 비어있는 때 양식 컨트롤에 나타나는 내용
readonlyalmost all불리언값. 이 값은 수정이 불가능함
requiredalmost all불리언값. 양식이 전송되기 위해서 반드시 입력하거나 확인이 필요한 값
{{anch('htmlattrdefsize', 'size')}}email, password, tel, text컨트롤의 크기
{{anch('htmlattrdefsrc', 'src')}}image이미지 출처의 주소에서 src 와 같은 속성
{{anch('htmlattrdefstep', 'step')}}numeric types유효한 증분적인 (Incremental)값
{{anch('htmlattrdeftype', 'type')}}allinput 양식 컨트롤의 유형
{{anch('htmlattrdefvalue', 'value')}}all양식 컨트롤의 현재 값. 이름/값 짝(name/value pair)의 일부로서 양식과 함께 전송된다
{{anch('htmlattrdefwidth', 'width')}}image이미지의  width 속성과 같다
+ +

A few additional non-standard attributes are listed following the descriptions of the standard attributes

+ +

개별 속성

+ +
+
{{htmlattrdef("accept")}}
+
+

Valid for the file input type only, the accept property defines which file types are selectable in a file upload control. See the {{HTMLElement("input/file", "file")}} input type.

+
+
{{htmlattrdef("alt")}}
+
+

Valid for the image button only, the alt attribute provides alternative text for the image, displaying the value of the attribute if the image {{anch("src")}} is missing or otherwise fails to load. See the {{HTMLElement("input/image", "image")}} input type.

+
+
{{htmlattrdef("autocomplete")}}
+
+

Not a Boolean attribute, the autocomplete attribute takes as its value a space separated string that describes what, if any, type of autocomplete functionality the input should provide. A typical implementation of autocomplete simply recalls previous values entered in the same input field, but more complex forms of autocomplete can exist. For instance, a browser could integrate with a device's contacts list to autocomplete email addresses in an email input field. See {{SectionOnPage("/en-US/docs/Web/HTML/Attributes/autocomplete", "Values")}} for permitted values.

+ +

The autocomplete attribute is valid on hidden, text, search, url, tel, email, date, month, week, time, datetime-local, number, range, color and password. This attribute has no effect on input types that do not return numeric or text data, being valid for all input types except checkbox, radio, file, or any of the button types. See The HTML autocomplete attribute for additional information, including information on password security and how autocomplete is slightly different for hidden than for other input types.

+
+
{{htmlattrdef("autofocus")}}
+
+

A Boolean attribute which, if present, indicates that the input should automatically have focus when the page has finished loading (or when the {{HTMLElement("dialog")}} containing the element has been displayed).

+ +
+

Note: An element with the autofocus attribute may gain focus before the {{domxref("DOMContentLoaded")}} event is fired.

+
+ +

No more than one element in the document may have the autofocus attribute, and autofocus cannot be used on inputs of type hidden, because hidden inputs can't be focused. If put on more than one element, the first one with the attribute receives focus .

+ +
+

Warning: Automatically focusing a form control can confuse visually-impaired people using screen-reading technology and people with cognitive impairments. When autofocus is assigned, screen-readers "teleport" their user to the form control without warning them beforehand.

+
+ +

For better usability, avoid using autofocus. Automatically focusing on a form control can cause the page to scroll on load. The focus can also cause dynamic keyboards to display on some touch devices. While a screen reader will announce the label of the form control receiving focus, the screen reader will not announce anything before the label, and the sighted user on a small device will equally miss the context created by the preceding content.

+
+
{{htmlattrdef("capture")}}
+
+

Introduced in the HTML Media Capture specification and valid for the file input type only, the capture attribute defines which media - microphone, video, or camera - should be used to capture a new file for upload with file upload control in supporting scenarios. See the {{HTMLElement("input/file", "file")}} input type.

+
+
{{htmlattrdef("checked")}}
+
+

Valid for both radio and checkbox types, checked is a Boolean attribute. If present on a radio type, it indicates that that radio button is the currently selected one in the group of same-named radio buttons. If present on a checkbox type, it indicates that the checkbox is checked by default (when the page loads). It does not indicate whether this checkbox is currently checked: if the checkbox’s state is changed, this content attribute does not reflect the change. (Only the HTMLInputElement’s checked IDL attribute is updated.)

+ +
+

Note: Unlike other input controls, a checkboxes and radio buttons value are only included in the submitted data if they are currently checked. If they are, the name and the value(s) of the checked controls are submitted.

+ +

For example, if a checkbox whose name is fruit has a value of cherry, and the checkbox is checked, the form data submitted will include fruit=cherry. If the checkbox isn't active, it isn't listed in the form data at all. The default value for checkboxes and radio buttons is on.

+
+
+
{{htmlattrdef("dirname")}}
+
+

Valid for text and search input types only, the dirname attribute enables the submission of the directionality of the element. When included, the form control will submit with two name/value pairs: the first being the {{anch('name')}} and {{anch('value')}}, the second being the value of the dirname as the name with the value of ltr or rtl being set by the browser.

+ + 
<form action="page.html" method="post">
+  <label>Fruit: <input type="text" name="fruit" dirname="fruit.dir" value="cherry"></label>
+  <input type="submit"/>
+</form>
+<!-- page.html?fruit=cherry&fruit.dir=ltr -->
+
+ +

When the form above is submitted, the input cause both the name / value pair of fruit=cherry and the dirname / direction pair of fruit.dir=ltr to be sent.

+
+
{{htmlattrdef("disabled")}}
+
+

A Boolean attribute which, if present, indicates that the user should not be able to interact with the input. Disabled inputs are typically rendered with a dimmer color or using some other form of indication that the field is not available for use.

+ +

Specifically, disabled inputs do not receive the {{event("click")}} event, and disabled inputs are not submitted with the form.

+ +
+

Note: Although not required by the specification, Firefox will by default persist the dynamic disabled state of an <input> across page loads. Use the {{htmlattrxref("autocomplete","input")}} attribute to control this feature.

+
+
+
{{htmlattrdef("form")}}
+
+

A string specifying the {{HTMLElement("form")}} element with which the input is associated (that is, its form owner). This string's value, if present, must match the {{htmlattrxref("id")}} of a <form> element in the same document. If this attribute isn't specified, the <input> element is associated with the nearest containing form, if any.

+ +

The form attribute lets you place an input anywhere in the document but have it included with a form elsewhere in the document.

+ +
+

Note: An input can only be associated with one form.

+
+
+
{{htmlattrdef('formaction')}}
+
+

Valid for the image and submit input types only. See the {{HTMLElement("input/submit", "submit")}} input type for more information.

+
+
{{htmlattrdef('formenctype')}}
+
+

Valid for the image and submit input types only. See the {{HTMLElement("input/submit", "submit")}} input type for more information.

+
+
{{htmlattrdef('formmethod')}}
+
+

Valid for the image and submit input types only. See the {{HTMLElement("input/submit", "submit")}} input type for more information.

+
+
{{htmlattrdef('formnovalidate')}}
+
+

Valid for the image and submit input types only. See the {{HTMLElement("input/submit", "submit")}} input type for more information.

+
+
{{htmlattrdef('formtarget')}}
+
+

Valid for the image and submit input types only. See the {{HTMLElement("input/submit", "submit")}} input type for more information.

+
+
{{htmlattrdef("height")}}
+
+

Valid for the image input button only, the height is the height of the image file to display to represent the graphical submit button. See the {{HTMLElement("input/image", "image")}} input type.

+
+
{{htmlattrdef("id")}}
+
+

Global attribute valid for all elements, including all the input types, it defines a unique identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking. The value is used as the value of the {{htmlelement('label')}}'s for attribute to link the label with the form control. See the {{anch('the label element')}} below.

+
+
{{htmlattrdef("inputmode")}}
+
+

Global value valid for all elements, it provides a hint to browsers as to the type of virtual keyboard configuration to use when editing this element or its contents. Values include none
+ text, tel, url, email, numeric, decimal, and search

+
+
{{htmlattrdef("list")}}
+
+

The values of the list attribute is the {{domxref("Element.id", "id")}} of a {{HTMLElement("datalist")}} element located in the same document. The <datalist> provides a list of predefined values to suggest to the user for this input. Any values in the list that are not compatible with the {{htmlattrxref("type", "input")}} are not included in the suggested options. The values provided are suggestions, not requirements: users can select from this predefined list or provide a different value.

+ + + +

{{EmbedLiveSample("datalist",400,275,"","", "nobutton")}}

+ +

It is valid on text, search, url, tel, email, date, month, week, time, datetime-local, number, range, and color.Per the specifications, the list attribute is not supported by the hidden, password, checkbox, radio, file, or any of the button types.

+ +

Depending on the browser, the user may see a custom color palette suggested, tic marks along a range, or even a input that opens like a select but allows for non-listed values. Check out the browser compatibility table for the other input types.

+ +

See the {{htmlelement('datalist')}} element.

+
+
{{htmlattrdef("max")}}
+
+

Valid for date, month, week, time, datetime-local, number, and range, it defines the greatest value in the range of permitted values. If the {{htmlattrxref("value", "input")}} entered into the element exceeds this, the element fails constraint validation. If the value of the max attribute isn't a number, then the element has no maximum value.

+
+
{{htmlattrdef("maxlength")}}
+
+

Valid for text, search, url, tel, email, and password, it defines the maximum number of characters (as UTF-16 code units) the user can enter into the field. This must be an integer value 0 or higher. If no maxlength is specified, or an invalid value is specified, the field has no maximum length. This value must also be greater than or equal to the value of minlength.

+ +

The input will fail constraint validation if the length of the text entered into the field is greater than maxlength UTF-16 code units long. By default, browsers prevent users from entering more characters than allowed by the maxlength attribute. See {{anch("Client-side validation")}} for more information.

+
+
{{htmlattrdef("min")}}
+
+

Valid for date, month, week, time, datetime-local, number, and range, it defines the most negative value in the range of permitted values. If the {{htmlattrxref("value", "input")}} entered into the element is less than this this, the element fails constraint validation. If the value of the min attribute isn't a number, then the element has no minimum value.

+ +

This value must be less than or equal to the value of the max attribute. If the min attribute is present by is not specified or is invalid, no min value is applied. If the min attribute is valid and a non-empty value is less than the minimum allowed by the min attribute, constraint validation will prevent form submission. See {{anch("Client-side validation")}} for more information.

+
+
{{htmlattrdef("minlength")}}
+
+

Valid for text, search, url, tel, email, and password, it defines the minimum number of characters (as UTF-16 code units) the user can enter into the entry field. This must be an non-negative integer value smaller than or equal to the value specified by maxlength. If no minlength is specified, or an invalid value is specified, the input has no minimum length.

+ +

The input will fail constraint validation if the length of the text entered into the field is fewer than minlength UTF-16 code units long, preventing form submission. See {{anch("Client-side validation")}} for more information.

+
+
{{htmlattrdef("multiple")}}
+
+

The Boolean multiple attribute, if set, means the user can enter comma separated email addresses in the email widget or can choose more than one file with the file input. See the {{HTMLElement("input/email", "email")}} and {{HTMLElement("input/file", "file")}} input type.

+
+
{{htmlattrdef("name")}}
+
+

A string specifying a name for the input control. This name is submitted along with the control's value when the form data is submitted.

+ +
What's in a name
+ +

Consider the name a required attribute (even though it's not). If an input has no name specified, or name is empty, the input's value is not submitted with the form. (Disabled controls, unchecked radio buttons, unchecked checkboxes, and reset buttons are also not sent.)

+ +

There are two special cases:

+ +
    +
  1. _charset_ : If used as the name of an <input> element of type hidden, the input's value is automatically set by the user agent to the character encoding being used to submit the form.
    2. +
  2. isindex: For historical reasons, the name isindex is not allowed.
    3. +
+ +
name and radio buttons
+ +

The {{anch('name')}} attribute creates a unique behavior for radio buttons.

+ +

Only one radio button in a same-named group of radio buttons can be checked at a time. Selecting any radio button in that group automatically deselects any currently-selected radio button in the same group. The value of that one checked radio button is sent along with the name if the form is submitted,

+ +

When tabbing into a series of same-named group of radio buttons, if one is checked, that one will receive focus. If they aren't grouped together in source order, if one of the group is checked, tabbing into the group starts when the first one in the group is encountered, skipping all those that aren't checked. In other words, if one is checked, tabbing skips the unchecked radio buttons in the group. If none are checked, the radio button group receives focus when the first button in the same name group is reached.

+ +

Once one of the radio buttons in a group has focus, using the arrow keys will navigate thru all the radio buttons of the same name, even if the radio buttons are not grouped together in the source order.

+ +
{{domxref("HTMLFormElement.elements")}}
+ +

When an input element is given a name, that name becomes a property of the owning form element's {{domxref("HTMLFormElement.elements")}} property. If you have an input whose name is set to guest and another whose name is hat-size, the following code can be used:

+ + 
let form = document.querySelector("form");
+
+let guestName = form.elements.guest;
+let hatSize = form.elements["hat-size"];
+
+ +

When this code has run, guestName will be the {{domxref("HTMLInputElement")}} for the guest field, and hatSize the object for the hat-size field.

+ +
+

Warning: You should avoid giving form elements a name that corresponds to a built-in property of the form, since you would then override the predefined property or method with this reference to the corresponding input.

+
+
+
{{htmlattrdef("pattern")}}
+
+
+

The pattern attribute, when specified, is a regular expression that the input's {{htmlattrxref("value")}} must match in order for the value to pass constraint validation. It must be a valid JavaScript regular expression, as used by the {{jsxref("RegExp")}} type, and as documented in our guide on regular expressions; the 'u' flag is specified when compiling the regular expression, so that the pattern is treated as a sequence of Unicode code points, instead of as ASCII. No forward slashes should be specified around the pattern text.

+ +

If the pattern attribute is present but is not specified or is invalid, no regular expression is applied and this attribute is ignored completely. If the pattern attribute is valid and a non-empty value does not match the pattern, constraint validation will prevent form submission.

+ +
+

Tip: If using the pattern attribute, inform the user about the expected format by including explanatory text nearby. You can also include a {{htmlattrxref("title", "input")}} attribute to explain what the requirements are to match the pattern; most browsers will display this title as as a tooltip The visible explanation is required for accessibilty. The tooltip is an enhancement.

+
+
+ +

See {{anch("Client-side validation")}} for more information.

+
+
{{htmlattrdef("placeholder")}}
+
+

The placeholder attribute is a string that provides a brief hint to the user as to what kind of information is expected in the field. It should be a word or short phrase that demonstrates the expected type of data, rather than an explanatory message. The text must not include carriage returns or line feeds.

+ +
+

Note: The placeholder attribute is not as semantically useful as other ways to explain your form, and can cause unexpected technical issues with your content. See {{SectionOnPage("/en-US/docs/Web/HTML/Element/input", "Labels and placeholders")}} for more information.

+
+
+
{{htmlattrdef("readonly")}}
+
+

A Boolean attribute which, if present, indicates that the user should not be able to edit the value of the input. The readonly attribute is supported text, search, url, tel, email, date, month, week, time, datetime-local, number, and password input types.

+ +

See the HTML attribute: readonly for more information.

+
+
{{htmlattrdef("required")}}
+
+

required is a Boolean attribute which, if present, indicates that the user must specify a value for the input before the owning form can be submitted. The required attribute is supported text, search, url, tel, email, date, month, week, time, datetime-local, number, password, checkbox, radio, and file.

+ +

See {{anch("Client-side validation")}} and the HTML attribute: required for more information.

+
+
{{htmlattrdef("size")}}
+
Valid for email, password, tel, and text input types only. Specifies how much of the input is shown. Basically creates same result as setting CSS width property with a few specialities. The actual unit of the value depends on the input type. For password and text it's number of characters (or em units) and pixels for others. CSS width takes precedence over size attribute.
+
{{htmlattrdef("src")}}
+
+

Valid for the image input button only, the src is string specifying the URL of the image file to display to represent the graphical submit button. See the {{HTMLElement("input/image", "image")}} input type.

+
+
{{htmlattrdef("step")}}
+
+
+

Valid for the numeric input types, including number, date/time input types, and range, the step attribute is a number that specifies the granularity that the value must adhere to.

+ +

If not explicitly included, step defaults to 1 for number and range, and 1 unit type (second, week, month, day) for the date/time input types. The value can must be a positive number - integer or float -- or the special value any, which means no stepping is implied, and any value is allowed (barring other constraints, such as {{anch("min")}} and {{anch("max")}}).

+ +

If any is not explicity set, valid values for the number, date/time input types, and range input types are equal to the basis for stepping - the {{anch("min")}} value and increments of the step value, up to the {{anch("max")}} value, if specified. For example, if we have <input type="number" min="10" step="2"> any even integer, 10 or great, is valid. If omitted, <input type="number">, any integer is valid, but floats, like 4.2, are not valid, as step defaults to 1. For 4.2 to be valid, step would have had to be set to any, 0.1, 0.2, or any the min value would have had to be a number ending in .2, such as <input type="number" min="-5.2">

+ +
+

Note: When the data entered by the user doesn't adhere to the stepping configuration, the value is considered invalid in contraint validation and will match the :invalid pseudoclass

+
+
+ +

The default stepping value for number inputs is 1, allowing only integers to be entered, unless the stepping base is not an integer. The default stepping value for time is 1 second, with 900 being equal to 15 minutes.

+ +

See {{anch("Client-side validation")}} for more information.

+
+
{{htmlattrdef("tabindex")}}
+
+

Global attribute valid for all elements, including all the input types, an integer attribute indicating if the element can take input focus (is focusable), if it should participate to sequential keyboard navigation. As all input types except for input of type hidden are focusable, this attribute should not be used on form controls, because doing so would require the management of the focus order for all elements within the document with the risk of harming usability and accessibility if done incorrectly.

+
+
{{htmlattrdef('title')}}
+
+

Global attribute valid for all elements, including all input types, containing a text representing advisory information related to the element it belongs to. Such information can typically, but not necessarily, be presented to the user as a tooltip. The title should NOT be used as the primary explanation of the purpose of the form control. Instead, use the {{htmlelement('label')}} element with a for attribute set to the form control's {{htmlattrdef('id')}} attribute. See {{anch("Labels")}} below.

+
+
{{htmlattrdef("type")}}
+
+

A string specifying the type of control to render. For example, to create a checkbox, a value of checkbox is used. If omitted (or an unknown value is specified), the input type text is used, creating a plaintext input field.

+ +

Permitted values are listed in {{anch("<input> types")}} above.

+
+
{{htmlattrdef("value")}}
+
+

The input control's value. When specified in the HTML, this is the initial value, and from then on it can be altered or retrieved at any time using JavaScript to access the respective {{domxref("HTMLInputElement")}} object's value property. The value attribute is always optional, though should be considered mandatory for checkbox, radio, and hidden.

+
+
{{htmlattrdef("width")}}
+
+

Valid for the image input button only, the width is the width of the image file to display to represent the graphical submit button. See the {{HTMLElement("input/image", "image")}} input type.

+
+
+ +

Non-standard attributes

+ +

The following non-standard attributes are also available on some browsers. As a general rule, you should avoid using them unless it can't be helped.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AttributeDescription
{{anch("autocorrect")}}A string indicating whether or not autocorrect is on or off. Safari only.
{{anch("incremental")}}Whether or not to send repeated {{event("search")}} events to allow updating live search results while the user is still editing the value of the field. WebKit and Blink only (Safari, Chrome, Opera, etc.).
{{anch("mozactionhint")}}A string indicating the type of action that will be taken when the user presses the Enter or Return key while editing the field; this is used to determine an appropriate label for that key on a virtual keyboard. Firefox for Android only.
{{anch("orient")}}Sets the orientation of the range slider. Firefox only.
{{anch("results")}}The maximum number of items that should be displayed in the drop-down list of previous search queries. Safari only.
{{anch("webkitdirectory")}}A Boolean indicating whether or not to only allow the user to choose a directory (or directories, if {{anch("multiple")}} is also present)
+ +
+
{{htmlattrdef("autocorrect")}} {{non-standard_inline}}
+
{{page("/en-US/docs/Web/HTML/Element/input/text", "autocorrect-include")}}
+
{{htmlattrdef("incremental")}} {{non-standard_inline}}
+
{{page("/en-US/docs/Web/HTML/Element/input/search", "incremental-include")}}
+
{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}
+
{{page("/en-US/docs/Web/HTML/Element/input/text", "mozactionhint-include")}}
+
{{htmlattrdef("orient")}} {{non-standard_inline}}
+
{{page("/en-US/docs/Web/HTML/Element/input/range", "orient-include")}}
+
{{htmlattrdef("results")}} {{non-standard_inline}}
+
{{page("/en-US/docs/Web/HTML/Element/input/search", "results-include")}}
+
{{htmlattrdef("webkitdirectory")}} {{non-standard_inline}}
+
{{page("/en-US/docs/Web/HTML/Element/input/file", "webkitdirectory-include")}}
+
+ +

예제

+ +

A simple input box

+ +
<!-- A basic input -->
+<input type="text" name="input" value="Type here">
+
+ +

+ +

A common use-case scenario

+ +
<!-- A common form that includes input tags -->
+<form action="getform.php" method="get">
+    <label>First name: <input type="text" name="first_name" /></label><br />
+    <label>Last name: <input type="text" name="last_name" /></label><br />
+    <label>E-mail: <input type="email" name="user_email" /></label><br />
+    <input type="submit" value="Submit" />
+</form>
+
+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
명세상태주석
{{SpecName('HTML WHATWG', 'the-input-element.html#the-input-element', '<input>')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'forms.html#the-input-element', '<input>')}}{{Spec2('HTML5 W3C')}}
{{SpecName('HTML4.01', 'interact/forms.html#h-17.4', '<form>')}}{{Spec2('HTML4.01')}}
+ +

브라우저 호환성

+ +

{{Compat("html.elements.input")}}

diff --git a/files/ko/web/html/element/input/radio/index.html b/files/ko/web/html/element/input/radio/index.html new file mode 100644 index 0000000000..827c5005d5 --- /dev/null +++ b/files/ko/web/html/element/input/radio/index.html @@ -0,0 +1,367 @@ +--- +title: +slug: Web/HTML/Element/Input/radio +tags: + - Element + - HTML + - HTML Input Types + - HTML forms + - HTML input + - Input + - Input Types + - Reference + - 라디오 + - 라디오 그룹 + - 라디오 버튼 +translation_of: Web/HTML/Element/input/radio +--- +
{{HTMLRef}}
+ +

radio 유형의 {{htmlelement("input")}} 요소는 보통 서로 관련된 옵션을 나타내는 라디오 버튼 콜렉션, 라디오 그룹에 사용합니다. 임의의 그룹 내에서는 동시에 하나의 라디오 버튼만 선택할 수 있습니다. 라디오 버튼은 흔히 원형으로 그려지며, 선택한 경우 속을 채우거나 강조 표시를 합니다.

+ +
{{EmbedInteractiveExample("pages/tabbed/input-radio.html", "tabbed-standard")}}
+ + + +
+

오래된 라디오의 버튼과 비슷한 형태와 동작 방식을 가졌기에 라디오 버튼이라고 부릅니다.

+ +

Shows what radio buttons looked like in the olden days.

+
+ +
+

참고: 체크박스도 라디오 버튼과 비슷하지만 중요한 차이점이 하나 있습니다. 라디오 버튼은 여러 값에서 단 하나만 선택할 때 사용하지만, 체크박스는 각각의 값을 켜고 끌 수 있다는 점입니다. 다수의 컨트롤이 존재할 때 라디오 버튼은 전체에서 하나를 허용하고, 체크박스는 여러 개 선택을 허용합니다.

+
+ + + + + + + + + + + + + + + + + + + + + + + + +
{{anch("값")}}라디오 버튼의 값을 나타내는 {{domxref("DOMString")}}.
이벤트{{event("change")}}, {{event("input")}}
지원하는 공통 특성checked, value
IDL 특성{{anch("checked")}}, {{anch("value")}}
메서드{{domxref("HTMLInputElement.select", "select()")}}
+ +

값

+ +

The value attribute is a {{domxref("DOMString")}} containing the radio button's value. The value is never shown to the user by their {{Glossary("user agent")}}. Instead, it's used to identify which radio button in a group is selected.

+ +

라디오 그룹 정의하기

+ +

A radio group is defined by giving each of radio buttons in the group the same {{htmlattrxref("name", "input")}}. Once a radio group is established, selecting any radio button in that group automatically deselects any currently-selected radio button in the same group.

+ +

You can have as many radio groups on a page as you like, as long as each has its own unique name.

+ +

For example, if your form needs to ask the user for their preferred contact method, you might create three radio buttons, each with the name property set to contact but one with the {{htmlattrxref("value", "input")}} email, one with the value phone, and one with the value mail. The user never sees the value or the name (unless you expressly add code to display it).

+ +

The resulting HTML looks like this:

+ +
<form>
+  <p>Please select your preferred contact method:</p>
+  <div>
+    <input type="radio" id="contactChoice1"
+     name="contact" value="email">
+    <label for="contactChoice1">Email</label>
+
+    <input type="radio" id="contactChoice2"
+     name="contact" value="phone">
+    <label for="contactChoice2">Phone</label>
+
+    <input type="radio" id="contactChoice3"
+     name="contact" value="mail">
+    <label for="contactChoice3">Mail</label>
+  </div>
+  <div>
+    <button type="submit">Submit</button>
+  </div>
+</form>
+ +

Here you see the three radio buttons, each with the name set to contact and each with a unique value that uniquely identifies that individual radio button within the group. They each also have a unique {{domxref("Element.id", "id")}}, which is used by the {{HTMLElement("label")}} element's {{htmlattrxref("for", "label")}} attribute to associate the labels with the radio buttons.

+ +

You can try out this example here:

+ +

{{EmbedLiveSample('Defining_a_radio_group', 600, 130)}}

+ +

라디오 그룹의 데이터 표현

+ +

When the above form is submitted with a radio button selected, the form's data includes an entry in the form contact=value. For example, if the user clicks on the "Phone" radio button then submits the form, the form's data will include the line contact=phone.

+ +

If you omit the value attribute in the HTML, the submitted form data assigns the value on to the group. In this scenario, if the user clicked on the "Phone" option and submitted the form, the resulting form data would be contact=on, which isn't helpful. So don't forget to set your value attributes!

+ +
+

Note: If no radio button is selected when the form is submitted, the radio group is not included in the submitted form data at all, since there is no value to report.

+
+ +

It's fairly uncommon to actually want to allow the form to be submitted without any of the radio buttons in a group selected, so it is usually wise to have one default to the checked state. See {{anch("Selecting a radio button by default")}} below.

+ +

Let's add a little bit of code to our example so we can examine the data generated by this form. The HTML is revised to add a {{HTMLElement("pre")}} block to output the form data into:

+ +
<form>
+  <p>Please select your preferred contact method:</p>
+  <div>
+    <input type="radio" id="contactChoice1"
+           name="contact" value="email">
+    <label for="contactChoice1">Email</label>
+    <input type="radio" id="contactChoice2"
+           name="contact" value="phone">
+    <label for="contactChoice2">Phone</label>
+    <input type="radio" id="contactChoice3"
+           name="contact" value="mail">
+    <label for="contactChoice3">Mail</label>
+  </div>
+  <div>
+    <button type="submit">Submit</button>
+  </div>
+</form>
+<pre id="log">
+</pre>
+
+ +

Then we add some JavaScript to set up an event listener on the {{domxref("HTMLFormElement/submit_event", "submit")}} event, which is sent when the user clicks the "Submit" button:

+ +
var form = document.querySelector("form");
+var log = document.querySelector("#log");
+
+form.addEventListener("submit", function(event) {
+  var data = new FormData(form);
+  var output = "";
+  for (const entry of data) {
+    output = output + entry[0] + "=" + entry[1] + "\r";
+  };
+  log.innerText = output;
+  event.preventDefault();
+}, false);
+ +

Try this example out and see how there's never more than one result for the contact group.

+ +

{{EmbedLiveSample("Data_representation_of_a_radio_group", 600, 130)}}

+ +

추가 특성

+ +

In addition to the common attributes shared by all {{HTMLElement("input")}} elements, radio inputs support the following attributes:

+ + + + + + + + + + + + + + + + + + +
AttributeDescription
{{anch("checked")}}A Boolean indicating whether or not this radio button is the currently-selected item in the group
{{anch("value")}}The string to use as the value of the radio when submitting the form, if the radio is currently toggled on
+ +

{{htmlattrdef("checked")}}

+ +

A Boolean attribute which, if present, indicates that this radio button is the currently selected one in the group.

+ +

Unlike other browsers, Firefox by default persists the dynamic checked state of an <input> across page loads. Use the {{htmlattrxref("autocomplete","input")}} attribute to control this feature.

+ +

{{htmlattrdef("value")}}

+ +

The value attribute is one which all {{HTMLElement("input")}}s share; however, it serves a special purpose for inputs of type radio: when a form is submitted, only radio buttons which are currently checked are submitted to the server, and the reported value is the value of the value attribute. If the value is not otherwise specified, it is the string on by default. This is demonstrated in the section {{anch("Value")}} above.

+ +

라디오 입력 칸 사용하기

+ +

We already covered the fundamentals of radio buttons above. Let's now look at the other common radio-button-related features and techniques you may need to know about.

+ +

기본 선택 항목 지정하기

+ +

To make a radio button selected by default, you simply include checked attribute, as shown in this revised version of the previous example:

+ +
<form>
+  <p>Please select your preferred contact method:</p>
+  <div>
+    <input type="radio" id="contactChoice1"
+     name="contact" value="email" checked>
+    <label for="contactChoice1">Email</label>
+
+    <input type="radio" id="contactChoice2"
+     name="contact" value="phone">
+    <label for="contactChoice2">Phone</label>
+
+    <input type="radio" id="contactChoice3"
+     name="contact" value="mail">
+    <label for="contactChoice3">Mail</label>
+  </div>
+  <div>
+    <button type="submit">Submit</button>
+  </div>
+</form>
+ +

{{EmbedLiveSample('기본_선택_항목_지정하기', 600, 130)}}

+ +

In this case, the first radio button is now selected by default.

+ +
+

Note: If you put the checked attribute on more than one radio button, later instances will override earlier ones; that is, the last checked radio button will be the one that is selected. This is because only one radio button in a group can ever be selected at once, and the user agent automatically deselects others each time a new one is marked as checked.

+
+ +

라디오 버튼의 클릭 범위 키우기

+ +

In the above examples, you may have noticed that you can select a radio button by clicking on its associated {{htmlelement("label")}} element, as well as on the radio button itself. This is a really useful feature of HTML form labels that makes it easier for users to click the option they want, especially on small-screen devices like smartphones.

+ +

Beyond accessibility, this is another good reason to properly set up <label> elements on your forms.

+ +

유효성 검사

+ +

Radio buttons don't participate in constraint validation; they have no real value to be constrained.

+ +

스타일링

+ +

The following example shows a slightly more thorough version of the example we've seen throughout the article, with some additional styling, and with better semantics established through use of specialized elements. The HTML looks like this:

+ +
<form>
+  <fieldset>
+    <legend>Please select your preferred contact method:</legend>
+    <div>
+      <input type="radio" id="contactChoice1"
+       name="contact" value="email" checked>
+      <label for="contactChoice1">Email</label>
+
+      <input type="radio" id="contactChoice2"
+       name="contact" value="phone">
+      <label for="contactChoice2">Phone</label>
+
+      <input type="radio" id="contactChoice3"
+       name="contact" value="mail">
+      <label for="contactChoice3">Mail</label>
+    </div>
+    <div>
+      <button type="submit">Submit</button>
+    </div>
+  </fieldset>
+</form>
+ +

There's not much new to note here except for the addition of {{htmlelement("fieldset")}} and {{htmlelement("legend")}} elements, which help to group the functionality nicely and in a semantic way.

+ +

The CSS involved is a bit more significant:

+ +
html {
+  font-family: sans-serif;
+}
+
+div:first-of-type {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 5px;
+}
+
+label {
+  margin-right: 15px;
+  line-height: 32px;
+}
+
+input {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+
+  border-radius: 50%;
+  width: 16px;
+  height: 16px;
+
+  border: 2px solid #999;
+  transition: 0.2s all linear;
+  margin-right: 5px;
+
+  position: relative;
+  top: 4px;
+}
+
+input:checked {
+  border: 6px solid black;
+}
+
+button,
+legend {
+  color: white;
+  background-color: black;
+  padding: 5px 10px;
+  border-radius: 0;
+  border: 0;
+  font-size: 14px;
+}
+
+button:hover,
+button:focus {
+  color: #999;
+}
+
+button:active {
+  background-color: white;
+  color: black;
+  outline: 1px solid black;
+}
+ +

Most notable here is the use of the {{cssxref("-moz-appearance")}} property (with prefixes needed to support some browsers). By default, radio buttons (and checkboxes) are styled with the operating system's native styles for those controls. By specifying appearance: none, you can remove the native styling altogether, and create your own styles for them. Here we've used a {{cssxref("border")}} along with {{cssxref("border-radius")}} and a {{cssxref("transition")}} to create a nice animating radio selection. Notice also how the {{cssxref(":checked")}} pseudo-class is used to specify the styles for the radio button's appearance when selected.

+ +
+

Compatibility note: If you wish to use the {{cssxref("appearance")}} property, you should test it very carefully. Although it is supported in most modern browsers, its implementation varies widely. In older browsers, even the keyword none does not have the same effect across different browsers, and some do not support it at all. The differences are smaller in the newest browsers.

+
+ +

{{EmbedLiveSample('Styling_radio_inputs', 600, 120)}}

+ +

Notice that when clicking on a radio button, there's a nice, smooth fade out/in effect as the two buttons change state. In addition, the style and coloring of the legend and submit button are customized to have strong contrast. This might not be a look you'd want in a real web application, but it definitely shows off the possibilities.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatus
{{SpecName('HTML WHATWG', 'forms.html#radio-button-state-(type=radio)', '<input type="radio">')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'forms.html#radio-button-state-(type=radio)', '<input type="radio">')}}{{Spec2('HTML5 W3C')}}
+ +

브라우저 호환성

+ + + +

{{Compat("html.elements.input.input-radio")}}

+ +

같이 보기

+ + -- cgit v1.2.3-54-g00ecf