input

설명

The input (<input>) element is used to create interactive controls for web-based forms.

<input>은 HTML의 <form> 안에서 사용자에게 간단한 입력을 받을 때 쓰인다. 웹페이지에서 흔히 보이는 체크박스, 버튼, 텍스트박스 등이 <input>으로 만든 것이다. 사용자가 무언가 선택하거나 써서 전송함으로써 웹페이지의 상태를 바꿀 수 있기 때문에 대화형(interactive) 컨트롤이라고 한다.

Usage Context

Permitted content	Flow content; Phrasing content; interactive content (if not in the hidden state);listed, labelable, submittable, resettable, Form-associated content element.
Tag omission	Must have a start tag and must not have an end tag.
Permitted parent elements	None, this is a void element.
Normative document	HTML 5, section 4.10.7; HTML 4.01, section 17.4

속성

이 요소는 전역속성을 지원한다.

type

The type of control to display. The default type is text, if this attribute is not specified. Possible values are:

이 속성은 컨트롤의 형태를 설정한다. 이 속성이 따로 명시되지 않으면, 기본 타입인 '텍스트 박스' 가 생성된다. type으로 가능한 값들은 아래와 같다:

• button: A push button with no default behavior.

• button: 누를 수 있는 버튼을 만든다.

• checkbox: A check box. You must use the value attribute to define the value submitted by this item. Use the checked attribute to indicate whether this item is selected. You can also use the indeterminate attribute to indicate that the checkbox is in an indeterminate state (on most platforms, this draws a horizontal line across the checkbox).

• checkbox: 체크 박스를 만든다. 체크박스 각각마다 눌렀을 때 어떤 값이 전달될지를 'value' 속성으로 지정해야 한다. 'checked' 속성으로 이 박스가 체크되었는지 아닌지 표시할 수 있다. <input type="checkbox" id="ch" checked=true>는 이렇게 보인다.
• 한 가지 더! 'indeterminate' 속성으로 박스가 확정되지 않은 상태라는 것을 나타낼 수도 있다. checked=true도 false도 아닌 상태로, 브라우저에 따라 다르게 나타난다. 'indeterminate'는 html이 아니라 자바스크립트로 컨트롤해야 하는데, 예를 들어 이 버튼으로 위 체크박스의 indeterminate 속성을 true로 만들 수 있다. <input type="button" value="indeterminate 활성" onclick="ch.indeterminate=true">

• color: HTML5 A control for specifying a color.

• color: HTML5 전용. 컨트롤의 색상을 지정한다.

• date: HTML5 A control for entering a date (year, month, and day, with no time).

• date: HTML5 전용. 연월일을 정하는 컨트롤을 만든다.

• datetime: HTML5 A control for entering a date and time (hour, minute, second, and fraction of a second) based on UTC time zone.

• datetime: HTML5 전용. 협정 세계시(UTC) 시간대를 바탕으로 연월일 그리고 시분초 컨트롤을 만든다.

• datetime-local: HTML5 A control for entering a date and time, with no time zone.

• datetime-local: HTML5 전용. 특정 시간대 없이 날짜와 시간을 정하는 컨트롤을 만든다.

• email: HTML5 A field for editing an e-mail address. The :valid and :invalid CSS pseudo-classes are applied as appropriate.

• email: HTML5 전용. 이메일 주소를 입력하는 박스를 만든다. 타입을 'email'로 명시하면 HTML5를 지원하는 웹 브라우저는 이에 적합한 입력기 형태를 만들어 준다. 이는 주로 모바일 환경에서 키보드로 이메일 주소를 입력할때 email 타입으로 지정된 필드에 포커스를 갖다놓는 순간 자동으로 키보드 입력화면이 전환되어 .com 이나 @키가 표시된다. css valid invalid 부분은 모르겠어요..

• file: A control that lets the user select a file. Use the accept attribute to define the types of files that the control can select.

• file: 사용자가 파일을 선택할 수 있는 컨트롤을 만든다. 'accept' 속성을 이용하여 파일 형식을 선택하게 할 수 있다. <input type="file" accept="image/jpeg">와 같이 쓴다.

• hidden: A control that is not displayed, but whose value is submitted to the server.

• hidden: 화면에 보이지는 않지만 값은 서버로 전달되는 컨트롤을 만든다.

• image: A graphical submit button. You must use the src attribute to define the source of the image and the alt attribute to define alternative text. You can use the height and width attributes to define the size of the image in pixels.

• image: 그림으로 된 'submit' 버튼이다. 반드시 'src' 속성을 사용해서 그림의 주소를 명시하고, 'alt'속성을 사용해서 대체 텍스트를 정의해야 한다. 대체 텍스트는 검색엔진이 그림의 메타데이터를 검색할 때 사용되며, 시각장애인이 이미지의 내용을 알 수 있도록 해준다. 'height'와 'width' 속성으로 그림의 픽셀 크기를 지정할 수 있다.

• month: HTML5 A control for entering a month and year, with no time zone.

• month: HTML5 전용. 시간대 없이 연도와 월을 입력하는 컨트롤을 만든다.

• number: HTML5 A control for entering a floating point number.

•number: HTML5 전용. 실수 숫자를 입력하는 컨트롤을 만든다.

• password: A single-line text field whose value is obscured. Use the maxlength attribute to specify the maximum length of the value that can be entered.

• password: 비밀번호를 입력하는 한 줄짜리 텍스트 박스를 만든다. 여기에 쓴 글자는 *로 대신 표시된다. 'maxlength' 속성으로 최대 몇 글자까지 입력이 가능한지 정할 수 있다.
<input type="password" maxlength="10">

• radio: A radio button. You must use the value attribute to define the value submitted by this item. Use the checked attribute to indicate whether this item is selected by default. Radio buttons that have the same value for the name attribute are in the same "radio button group"; only one radio button in a group can be selected at one time.

• radio: 라디오 버튼을 만든다. 반드시 'value' 속성을 사용해서 그 버튼을 클릭했을 때 전송되는 값을 정해야 한다. 'cheked'속성을 이용해서 해당 버튼이 기본적으로 선택되어 있는 상태로 만들 것인지를 정할 수 있다. 만약 여러 버튼의 'name'속성이 같은 값을 가지고 있다면 그 버튼들은 같은 '라디오 버튼 그룹'에 속하게 된다. 그러면 그 그룹 안에서는 한 번에 버튼 하나만 선택할 수 있다.
<input type="radio" value="test1" name="radio1">
<input type="radio" value="test2" checked="true" name="radio1">
<input type="radio" value="test3" name="radio2">

• range: HTML5 A control for entering a number whose exact value is not important. This type control uses the following default values if the corresponding attributes are not specified:
◦ min: 0
◦ max: 100
◦ value: min + (max-min)/2, or min if max is less than min
◦ step: 1

• range: HTML5 전용. 특정값이 요구되지 않는 숫자를 입력하는 컨트롤을 만든다. 'min', 'max', 'value', 'step' 속성을 사용할 수 있는데, 각각은 만약 따로 값을 지정하지 않는다면 min=0, max=100, value=min+(max-min)/2, step=1의 기본값을 가진다. 단, 만약 max가 min보다 작다면 value는 min이 기본값이 된다. 여기서 step은 한 칸당 변하는 숫자의 값이다.
<input type="range" step="2">

• reset: A button that resets the contents of the form to default values.

• reset: 폼의 내용을 기본값으로 바꾸는 버튼을 만든다.

• search: HTML5 A single-line text field for entering search strings; line-breaks are automatically removed from the input value.

• HTML5 전용. 문자열을 검색하는 한 줄짜리 텍스트 박스를 만든다. '줄 바꿈'을 입력으로 넣으면 자동으로 무시된다.

• submit: A button that submits the form.

• submit: 전송 버튼이다.

• tel: HTML5 A control for entering a telephone number; line-breaks are automatically removed from the input value, but no other syntax is enforced. You can use attributes such as pattern and maxlength to restrict values entered in the control. The :valid and :invalid CSS pseudo-classes are applied as appropriate.

• tel: HTML5 전용. 전화번호를 입력하는 컨트롤을 만든다. '줄 바꿈'을 입력으로 넣으면 자동으로 무시된다. 특별히 다른 제약사항은 없다. 'pattern'이나 'maxlength' 같은 속성으로 입력받는 값을 제한할 수도 있다.

• text : A single-line text field; line-breaks are automatically removed from the input value.

• text: 한 줄짜리 텍스트 박스를 만든다. '줄 바꿈'을 입력으로 넣으면 자동으로 무시된다.

• time: HTML5 A control for entering a time value with no time zone.

• time: HTML5 전용. 시간대 없이 시간을 입력하는 컨트롤을 만든다. 시간을 입력하는 컨트롤 중 가장 범용적인 것이다.

• url: HTML5 A field for editing a URL. The user may enter a blank or invalid address. Line-breaks are automatically removed from the input value. You can use attributes such as pattern and maxlength to restrict values entered in the control. The :valid and :invalid CSS pseudo-classes are applied as appropriate.

• url: HTML5 전용. URL을 입력하는 텍스트 박스를 만든다. 사용자는 빈 주소나 유효하지 않는 주소를 넣을 수 있다. '줄 바꿈'을 입력으로 넣으면 자동으로 무시된다. 'pattern'이나 'maxlength' 같은 속성으로 입력받는 값을 제한할 수도 있다.

• week: HTML5 A control for entering a date consisting of a week-year number and a week number with no time zone.

• week: HTML5 전용. 시간대 없이, 어떤 연도의 몇 주차인지 입력하는 컨트롤을 만든다.

accept

If the value of the type attribute is file, this attribute indicates the types of files that the server accepts; otherwise it is ignored. The value must be a comma-separated list of unique content type specifiers:
• A valid MIME type with no extensions
• audio/* representing sound files HTML5
• video/* representing video files HTML5
• image/* representing image files HTML5

타입속성이 'file'로 지정되었을때, 이 속성은 서버가 수용하는 파일(file)의 형식을 설정한다. ('file' 타입이 아니면 accept 속성은 무시된다.) accept속성의 값들은 콤마(,)로 구분된 유일한 컨텐츠 타입(파일 지정자) 들로 쓰여야한다.
- 확장자가 없는 유효한 MIME 타입
- audio/*: HTML5에서의 오디오 파일 ex)audio/MP3
- video/*: HTML5에서의 비디오 파일 ex)video/MPEG
- image/*: HTML5에서의 이미지 파일 ex)image/JPEG

accesskey - HTML 4 only, Obsolete since HTML5 (HTML 4 전용. HTML5부터 폐지됨)

A single-character that the user can press to switch input focus to the control. This attribute is global in HTML5.

사용자가 눌러서 입력 커서(포커스)를 바꿀 수 있는 한 자를 설정한다. 이 속성은 HTML5 전역에서 쓰인다.

mozactionhint - Non-standard (표준은 아님)

Specifies an "action hint" used to determine how to label the enter key on mobile devices with virtual keyboards. Supported values are go, done, next, search, and send; these automatically get mapped to the appropriate string (and are case-insensitive).

모바일상의 키보드에서 엔터키의 작동방식을 설정한다. 'go'가기, 'done'완료, 'next'다음, 'search'검색, 'send'전송 의 값을 지원한다. 이 값들은 자동으로 적절한 문자열 값에 대응해 작동하고 대소문자를 구별한다.

autocomplete - HTML5 전용

This attribute indicates whether the value of the control can be automatically completed by the browser. This attribute is ignored if the value of the type attribute is hidden, checkbox, radio, file, or a button type (button, submit, reset, image). Possible values are:

이 속성은 컨트롤에 입력된 값이 웹 브라우저에 의해 자동완성 될 수 있는지를 지정한다. 이 속성은 'hidden', 'checkbox', 'radio', 'file', 'button', 'submit', 'reset', 'image' 타입에서는 무시된다. 'autocomplete' 속성의 값으로 가능한 것은 다음과 같다:

• off: The user must explicitly enter a value into this field for every use, or the document provides its own auto-completion method; the browser does not automatically complete the entry.
• on: The browser can automatically complete the value based on values that the user has entered during previous uses.

-off: 사용자가 반드시 모든 값을 다 입력해야 한다. (해당 웹페이지가 문서 자체로서 완성된 기능을 제공하지 않는다면)
-on: 사용자가 이전에 입력했던 값들을 바탕으로 웹 브라우저가 자동으로 입력값을 채워넣는다.

If the autocomplete attribute is not specified on an input element, then the browser uses the autocomplete attribute value of the <input> element's form owner. The form owner is either the <form> element that this <input> element is a descendant of or the form element whose id is specified by the form attribute of the input element.

'autocomplete' 속성이 <input> 요소에 지정되어 있지 않다면, 웹 브라우저는 <input>의 부모인 <form>에 있는 'autocomplete'의 속성값으로 대체한다.

<~> element's form owner => 이것 해석을 계속 뭐라할지 모르겠어요.. 아래에도 계속 생략해버렸는데 ㅠㅠ

autofocus - HTML5 전용

This Boolean attribute lets you specify that a form control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form element in a document can have the autofocus attribute, which is a Boolean. It cannot be applied if the type attribute is set to hidden (that is, you cannot automatically set focus to a hidden control).

'autofocus' 속성은 불리언 값을 가진다. 이 속성이 지정되면 해당 폼 컨트롤은 웹 페이지가 로딩됐을 때 자동으로 입력필드에 커서(포커스)가 나타나게 된다. 한 문서에서 한 <form>만 이 속성을 가질 수 있다. 'hidden' 타입에는 커서(포커스)가 갈 수 없으므로 'autofocus'를 지정할 수 없다.

checked

When the value of the type attribute is radio or checkbox, the presence of this Boolean attribute indicates that the control is selected by default; otherwise it is ignored.

'checked'는 불리언 값을 가진다. 'radio'나 'checkbox' 타입에서 이 속성을 지정하면 그 버튼이 선택된 상태로 사용자 입력을 받는다. 다른 타입에서는 무시된다.

disabled

This Boolean attribute indicates that the form control is not available for interaction.
This attribute is ignored if the value of the type attribute is hidden.

'disabled'는 불리언 값을 가진다. 이 속성이 지정되면 해당 폼 컨트롤은 사용자가 조작할 수 없게 된다. 'hidden' 타입에서는 무시된다.

form - HTML5 전용

The form element that the input element is associated with (its form owner). The value of the attribute must be an id of a <form> element in the same document. If this attribute is not specified, this <input> element must be a descendant of a <form> element. This attribute enables you to place <input> elements anywhere within a document, not just as descendants of their form elements.

<input> 요소와 관계된 <form> 요소가 무엇인지 나타내는 속성으로, 그 속성의 값은 같은 문서 안에 있는 <form> 요소의 id 여야만한다. 이 속성이 명시되지 않았다면, 해당 <input> 요소는 반드시 어떤 <form>요소의 안쪽에 위치해야 한다. 이 속성을 쓰면 <input> 요소를 문서 form 요소 안 쪽 뿐만 아니라 문서 어느 곳에나 위치시킬 수 있다.

formaction - HTML5 전용

The URI of a program that processes the information submitted by the input element, if it is a submit button or image. If specified, it overrides the action attribute of the element's form owner

입력요소가 submit 버튼 혹은 image일때, 그 입력요소에 의해 전송된 정보들을 처리할 프로그램이 있는 URI를 지정한다. <form>의 action 속성과 함께 쓰였을때 formation 속성을 우선시한다.

formenctype - HTML5 전용

If the input element is a submit button or image, this attribute specifies the type of content that is used to submit the form to the server. Possible values are:

• application/x-www-form-urlencoded: The default value if the attribute is not specified.
• multipart/form-data: Use this value if you are using an <input> element with the type attribute set to file.
• text/plain
If this attribute is specified, it overrides the enctype attribute of the element's form owner.

입력 요소가 submit 버튼 혹은 이미지일때, 이 속성은 form에 사용된 컨텐츠의 타입을 지정한다.
formenctype 의 속성으로 가능한 값들은 :

application/x-www-form-urlencoded: (default) 기본 값.
multipart/form-data: <input>요소의 속성값으로 file이 쓰인경우 이 값을 사용한다.
text/plain: enctype 속성과 함께 쓰였을 경우, formenctype 속성을 우선시한다.

formmethod - HTML5 전용

If the input element is a submit button or image, this attribute specifies the HTTP method that the browser uses to submit the form. Possible values are:
• post: The data from the form is included in the body of the form and is sent to the server.
• get: The data from the form are appended to the form attribute URI, with a '?' as a separator, and the resulting URI is sent to the server. Use this method when the form has no side-effects and contains only ASCII characters.

If specified, this attribute overrides the method attribute of the element's form owner.

입력요소가 submit 버튼 혹은 이미지 일때, 이 속성은 브라우저가 폼을 전송하기위해 사용하는 방식을 지정한다. formmethod의 속성으로 가능한 값을은:

post : header의 body에 데이터가 포함되어 서버에 전송된다.
get : form 속성에 지정된 URI에 데이터가 '?'로 분리되어 덧붙혀지고, 그 덧붙혀진 URI가 서버로 전송된다. 이 방식은 양식에 오류가 없고 데이터가 오직 ASCII 문자만을 포함했을 때 사용한다.

단, method 속성과 함께 쓰였을 경우에는 formmethod 속성이 우선시된다.

formnovalidate - HTML5 전용

If the input element is a submit button or image, this Boolean attribute specifies that the form is not to be validated when it is submitted. If this attribute is specified, it overrides the novalidate attribute of the element's form owner.

입력요소가 submit 버튼 또는 이미지 일 때, 이 Boolean 속성은 폼이 전송될때 입력값의 유효성 검사를 거치지 않도록 명시한다. 예를 들면, 모든 입력필드가 완전히 다 채워지지 않아도 폼의 전송이 가능케 한다. 단 novalidate 속성과 함께 쓰였을 경우, formnovalidate 속성이 우선시된다.

formtarget - HTML5 전용

If the input element is a submit button or image, this attribute is a name or keyword indicating where to display the response that is received after submitting the form. This is a name of, or keyword for, a browsing context (for example, tab, window, or inline frame). If this attribute is specified, it overrides the target attribute of the elements's form owner. The following keywords have special meanings:

• _self: Load the response into the same browsing context as the current one. This value is the default if the attribute is not specified.
• _blank: Load the response into a new unnamed browsing context.
• _parent: Load the response into the parent browsing context of the current one. If there is no parent, this option behaves the same way as _self.
• _top: Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as _self.

입력요소가 submit 버튼 또는 이미지 일 때, 이 속성은 폼 전송 후 서버로 부터 받은 응답을 띄울 브라우저 창(새탭, 현재 창, 프레임)의 장소를 명시한다. target 속성과 함께 쓰였을 경우, formtarget이 우선시된다.

_self: 현재창에 창을 로드한다.
_blank: 새창에 창을 로드한다.
_parent: 현재창을 기준으로 부모창에 로드한다. 부모가 없는 경우, 이는 _self 처럼 작동한다.
_top: 최상위창에서 로드한다. 부모가 없는 경우, 이는 _self처럼 작동한다.

height - HTML5 전용

If the value of the type attribute is image, this attribute defines the height of the image displayed for the button.

이 속성은 타입 속성의 값이 이미지일 때 버튼을 나타내는 이미지의 높이를 지정한다.

list - HTML5 전용

Identifies a list of pre-defined options to suggest to the user. The value must be the id of a <datalist> element in the same document. The browser displays only options that are valid values for this input element. This attribute is ignored when the type attribute's value is hidden, checkbox, radio, file, or a button type.

사용자가 컨트롤에서 선택할 수 있는 옵션들의 목록을 미리 정의한다. 그 값은 같은 문서 안에 있는<datalist>의 요소의 id 여야한다. 브라우저는 컨트롤 창에서 입력값으로 유효한 옵션들만 보여준다. 이 속성은 타입 속성이 hidden, checkbox, radio, file 또는 button 타입일 때 무시된다.

max - HTML5 전용

The maximum (numeric or date-time) value for this item, which must not be less than its minimum (min attribute) value.

숫자의 유효범위나 날짜/시간의 최대값을 설정한다. (단, 최소값 보다는 커야한다)

maxlength - HTML5 전용

If the value of the type attribute is text, email, search, password, tel, or url, this attribute specifies the maximum number of characters (in Unicode code points) that the user can enter; for other control types, it is ignored. It can exceed the value of the size attribute. If it is not specified, the user can enter an unlimited number of characters. Specifying a negative number results in the default behavior; that is, the user can enter an unlimited number of characters. The constraint is evaluated only when the value of the attribute has been changed.

타입 속성이 text, email, search, password, tel 또는 url 일때 입력할 수 있는 최대 문자(유니코드 기준)의 수를 지정한다. 이외의 타입속성일때 이는 무시된다. 이 값은 size 속성의 값보다 클 수 있고 명시되지 않으면 제한없이 문자를 입력할수 있다. 만약 음수로 값을 지정하면 default(기본값)이 적용되어 사용자는 제한없이 문자를 입력할 수 있다. 이 제한은 속성값이 바꼈을 때만 검사된다.

min - HTML5 전용

The minimum (numeric or date-time) value for this item, which must not be greater than its maximum (max attribute) value.

숫자의 유효범위나 날짜/시간의 최솟값을 설정한다. (단, 최대값 보다는 작아야한다)

multiple - HTML5 전용

This Boolean attribute indicates whether the user can enter more than one value. This attribute applies when the type attribute is set to email or file; otherwise it is ignored.

이 속성은 사용자가 하나 이상의 값을 입력할 수 있게 지정해준다. 이 속성은 타입속성이 email 또는 file일때 적용되고 다른 타입일땐 무시된다.

name

The name of the control, which is submitted with the form data.

컨트롤의 이름을 지정한다.

pattern - HTML5 전용

A regular expression that the control's value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is text, search, tel, url or email; otherwise it is ignored.

이 속성은 컨트롤의 값을 확인해야 할 때 쓰이는 정규 표현식을 설정한다. pattern 은 일부분이 아닌 전체 값을 비교한다. pattern에 대한 설명은 title 속성에 반드시 명시되야 한다. 타입 속성이 text, search, tel, url 또는 email일때만 적용되고 이외에는 무시된다.

아래예제 확인해주시고 쓸모없으면 폐기해주세요~ 예를 하나 끼워넣으면 좋을것같아요

placeholder - HTML5 전용

A hint to the user of what can be entered in the control. The placeholder text must not contain carriage returns or line-feeds. This attribute applies when the value of the type attribute is text, search, tel, url or email; otherwise it is ignored.

사용자가 컨트롤에 입력할 수 있는 값에 대한 힌트를 보여준다. placeholder로 쓰이는 텍스트는 캐리지리턴 이나 줄바꿈을 포함할 수 없다. 이 속성은 타입이 text, search, tel, url 또는 email 일때만 적용되고 다른 타입에서는 무시된다.

예제 : "5자미만 공백없이"

readonly

This Boolean attribute indicates that the user cannot modify the value of the control. This attribute is ignored if the value of the type attribute is hidden, range, color, checkbox, radio, file, or a button type.

이 boolean 속성은 사용자가 컨트롤에 입력되는 값을 수정할 수 없도록 지정한다. 이 속성은 타입속성이 hidden, range, color, checkbox, radio, file 혹은 button type 일때 무시된다.

required - HTML5 전용

This attribute specifies that the user must fill in a value before submitting a form. It cannot be used when the type attribute is hidden, image, or a button type (submit, reset, or button). The :optional and :required CSS pseudo-classes will be applied to the field as appropriate.

이 속성은 서버로 form을 전송하기전에 사용자가 반드시 채워야할 값들을 명시한다. 타입속성이 hidden, image 혹은 button 타입(submit, reset 혹은 button)일때 는 사용할 수 없다.

selectionDirection - HTML5 전용

The direction in which selection occurred. This is "forward" if the selection was made from left-to-right in an LTR locale or right-to-left in an RTL locale, or "backward" if the selection was made in the opposite direction. This can be "none" if the selection direction is unknown.

선택이 일어나는 방향을 나타낸다. 선택이 왼쪽에서 오른쪽(LTR locale)으로 이뤄진다면 "forward"이고 그 반대라면(RTL locale) "backward"방향으로 표현한다. 선택방향을 알 수 없을때는 "none"으로 설정한다.

size

The initial size of the control. This value is in pixels unless the value of the type attribute is text or password, in which case, it is an integer number of characters. Starting in HTML5./, this attribute applies only when the type attribute is set to text, search, tel, url, email, or password; otherwise it is ignored. In addition, the size must be greater than zero. If you don't specify a size, a default value of 20 is used.

컨트롤박스의 초기 크기를 지정한다. 이 값은 text나 password가 아닌 이상 정수형 문자로 나타난다.HTML5부터 이 속성은 text, search, tel, url, email 또는 password일때만 적용되고 다른 타입일 때는 무시된다. 추가로 size는 0보다 커야한다. 만약 size를 명시하지 않으면 default 값은 20이 사용된다.

예 :size 속성이 3일때와 10일때

src

If the value of the type attribute is image, this attribute specifies a URI for the location of an image to display on the graphical submit button; otherwise it is ignored.

타입속성이 이미지일때 이를 표현하기 위한 이미지의 URI를 지정한다. 다른 타입에서는 무시된다.

step - HTML5 전용

Works with the min and max attributes to limit the increments at which a numeric or date-time value can be set. It can be the string any or a positive floating point number. If this attribute is not set to any, the control accepts only values at multiples of the step value greater than the minimum.

min과 max 와 함께 쓰여 숫자의 유효범위나 날짜/시간의 범위의 단계적 증감을 제한 할때 쓰인다. 기본값은 1이며 생략이가능하다. 이 값으로는 'any'문자열에 해당하는 값 또는 양의 부동소수가 가능하다. 'any'로 속성이 지정되지 않으면 컨트롤은 step의 multiple 값들 중 최소값보다 큰값을 오직 허용한다.

tabindex - element-specific in HTML 4, global in HTML5
(HTML4에서는 특정요소에 적용, HTML5에서는 전역속성)

The position of the element in the tabbing navigation order for the current document.

현재 문서에 탭을 눌렀을때 나타나는 네비게이션 포커스의 순서를 지정 하는 속성이다.

usemap - HTML 4 only, Obsolete since HTML5 (HTML5부터 폐지됨)

The name of a <map> element to as an image map.

<map>요소와 이미지 맵을 연결한다.(이미지 맵이란 하나의 이미지를 여러개의 구역으로 나눠서 구역마다 링크를 부여하는 방법이다.)

value

The initial value of the control. This attribute is optional except when the value of the type attribute is radio or checkbox.

컨트롤의 초기값이다. 이 속성은 타입속성이 radio 또는 checkbox일때는 선택적 예외가 있다.

width - HTML5 전용

If the value of the type attribute is image, this attribute defines the width of the image displayed for the button.

타입 속성값이 이미지일때, 이 속성은 버튼을 나타내는 이미지의 가로를 정의한다.

x-moz-errormessage - Non-standard (표준은 아님)

This Mozilla extension allows you to specify the error message to display when a field doesn't successfully validate.

유효하지 않은 필드가 나타났을때 Mozilla 확장기능이 에러메시지를 띄운다.

File inputs

Gecko 2.0 note (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) Starting in Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) , calling the click() method on an <input> element of type file opens the file picker and lets the user select files. See Using files from web applications for an example and more details.

You can't set the value of a file picker from a script; doing something like the following has no effect:

var e = getElementById("someFileInputElement");
e.value = "foo";

Error messages
If you want Firefox to present a custom error message when a field fails to validate, you can use the x-moz-errormessage attribute to do so:

<input type="email" x-moz-errormessage="Please specify a valid email address.">

Note, however, that this is not standard and will not have an effect on other browsers.

예제

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

DOM Interface

This element implements the HTMLInputElement interface.

호환성

Desktop
기능	구글크롬	파이어폭스Gecko)	인터넷 익스플로러	Opera	Safari
기본적인 지원

Mobile
기능	안드로이드	파이어폭스 모바일(Gecko)	인터넷 익스플로러 모바일	오페라 모바일	사파리 모바일
기본적인 지원

참고

https://developer.mozilla.org/en/HTML/Element/input
Other form-related elements: <form>, <button>, <datalist>, <legend>, <label>, <select>, <optgroup>, <option>, <textarea>, <keygen>, <fieldset>, <output>, <progress> and <meter>.
Cross-browser HTML5 placeholder text
HTMLInputElement

설명