메뉴 건너뛰기



input요소의 속성들

엘리후 2015.07.27 15:34 조회 수 : 471 The autocomplete attribute

사용자 에이전트는 이따금씩 사용자들의 입력을 도와주는 기능을 갖추고 있습니다. 예를 들자면 이전의 입력에 기초해서 사용자의 주소를 미리 채우는 기능이 있을 수 있습니다.

User agents sometimes have features for helping users fill forms in, for example prefilling the user's address based on earlier user input.

autocomplete 속성은 나열 속성입니다. 이 속성은 세가지의 상태 - onoffdefault 상태를 갖습니다. 기본값은 default 입니다.

The autocomplete attribute is an enumerated attribute. The attribute has three states. The on keyword maps to the on state, and the offkeyword maps to the off state. The attribute may also be omitted. The missing value default is the default state.

off 상태는
1) 컨트롤의 입력 데이터가 부분적으로 민감하거나(예를 들어 핵무기의 활성화 코드 등),
2) 은행 로그인을 위한 OTP 처럼 똑같은 데이터를 재사용할 일이 전혀 없고 사용자가 사용자 에이전트의 도움 없이 매번 그 데이터를 명시적으로 입력할 것이 분명하거나,
3) 문서가 그 나름의 자동입력 방식을 갖추고 있어서 사용자 에이전트가 개입하는 것을 원치 않는 경우입니다.

The off state indicates either that the control's input data is particularly sensitive (for example the activation code for a nuclear weapon); or that it is a value that will never be reused (for example a one-time-key for a bank login) and the user will therefore have to explicitly enter the data each time, instead of being able to rely on the UA to prefill the value for him; or that the document provides its own autocomplete mechanism and does not want the user agent to provide autocompletion values.

바꿔 말해서, on 상태는 그 값이 부분적으로라도 민감하지 않으며 사용자는 사용자 에이전트가 그 값을 기억하는 것을 기대할 수 있다는 것입니다.

Conversely, the on state indicates that the value is not particularly sensitive and the user can expect to be able to rely on his user agent to remember values he has entered for that control.

default 상태는 사용자 에이전트가 autocomplete 속성을 요소의 폼 소유자에게 사용함을 나타냅니다. (기본값으로, form 요소의 autocomplete 속성은 on 상태입니다)

The default state indicates that the user agent is to use the autocomplete attribute on the element's form owner instead. (By default, theautocomplete attribute of form elements is in the on state.)

브라우저 제작자 대상 내용입니다.

은행들은 보통 사용자 에이전트가 로그인 정보를 대신 입력하는 것을 원하지 않습니다:

Banks frequently do not want UAs to prefill login information:

  1. <p><label>Account: <input type="text" name="ac" autocomplete="off"></label></p>
  2. <p><label>PIN: <input type="password" name="pin" autocomplete="off"></label></p>

pin은 personal identification number의 약어로, 우리나라의 주민등록번호와 같은 것입니다.

브라우저 제작자 대상 내용입니다. The dirname attribute

dirname 속성은 폼 컨트롤 dirname 속성을 나타냅니다.

The dirname attribute, when it applies, is a form control dirname attribute.

폼에 텍스트 필드와 제출 버튼이 있습니다.

In this example, a form contains a text field and a submission button:

  1. <form action="addcomment.cgi" method=post>
  2. <p><label>Comment: <input type=text name="comment" dirname="comment.dir" required></label></p>
  3. <p><button name="mode" type=submit value="add">Post Comment</button></p>
  4. </form>

사용자가 폼을 제출할 때 사용자 에이전트는 세개의 필드를 전송합니다: comment, comment.dir, mode. 즉 사용자가 "Hello" 라고 입력하면, 제출 양식은 아래와 흡사한 형태가 될 것입니다.

When the user submits the form, the user agent includes three fields, one called "comment", one called "comment.dir", and one called "mode"; so if the user types "Hello", the submission body might be something like:

  1. comment=Hello&comment.dir=ltr&mode=add

사용자가 직접 오른쪽에서 왼쪽으로 쓰는 방향을 명시하고 مرحبًا 라고 입력한다면, 제출 양식은 아래와 흡사한 형태가 될 것입니다.

If the user manually switches to a right-to-left writing direction and enters "مرحبًا", the submission body might be something like:

  1. comment=%D9%85%D8%B1%D8%AD%D8%A8%D9%8B%D8%A7&comment.dir=rtl&mode=add The list attribute

list 속성은 사용자에게 제안되는 미리 정의된 옵션들의 목록을 나타냅니다.

The list attribute is used to identify an element that lists predefined options suggested to the user.

사용했다면, 그 값은 동일한 문서 내에 있는 datalist 요소의 ID여야 합니다.

If present, its value must be the ID of a datalist element in the same document.

브라우저 제작자 대상 내용입니다.

이 URL 필드는 몇가지 제시사항을 갖고 있습니다.

This URL field offers some suggestions.

  1. <label>Homepage: <input name=hp type=url list=hpurls></label>
  2. <datalist id=hpurls>
  3. <option value="http://www.google.com/" label="Google">
  4. <option value="http://www.reddit.com/" label="Reddit">
  5. </datalist>

사용자의 방문 기록에 기초해서 다른 URL을 제시할수도 있습니다. 이것은 사용자 에이전트의 재량입니다.

Other URLs from the user's history might show also; this is up to the user agent.

이 예제는 자동완성 리스트를 사용하면서도, 구형 사용자 에이전트에서 효과적으로 단계적 기능 축소를 하는 방법을 보여주고 있습니다.

This example demonstrates how to design a form that uses the autocompletion list feature while still degrading usefully in legacy user agents.

자동완성 목록이 단순히 보조적일 뿐이며 중요한 내용은 아니라면, 간단히 datalist 요소를 사용하고 그 자식 요소로서 option 요소들을 사용하면 충분합니다. 구형 사용자 에이전트에서 그 값들이 노출되는 것을 방지하기 위해, 이러한 옵션들은 인라인으로 사용되는 것이 아니라 value 속성 안에 위치해야 합니다.

If the autocompletion list is merely an aid, and is not important to the content, then simply using a datalist element with children optionelements is enough. To prevent the values from being rendered in legacy user agents, they should be placed inside the value attribute instead of inline.

  1. <p>
  2. <label>
  3. Enter a breed:
  4. <input type="text" name="breed" list="breeds">
  5. <datalist id="breeds">
  6. <option value="Abyssinian">
  7. <option value="Alpaca">
  8. <!-- ... -->
  9. </datalist>
  10. </label>
  11. </p>

반대로, 그 값들이 중요하고 구형 사용자 에이전트에서도 보여져야 하는 것이라면, datalist 요소 안에 폴백 컨텐츠를 위치시킬 수 있습니다. 다음과 같이 하면 됩니다.

However, if the values need to be shown in legacy UAs, then fallback content can be placed inside the datalist element, as follows:

  1. <p>
  2. <label>
  3. Enter a breed:
  4. <input type="text" name="breed" list="breeds">
  5. </label>
  6. <datalist id="breeds">
  7. <label>
  8. or select one from the list:
  9. <select name="breed">
  10. <option value=""> (none selected)
  11. <option>Abyssinian
  12. <option>Alpaca
  13. <!-- ... -->
  14. </select>
  15. </label>
  16. </datalist>
  17. </p>

폴백 컨텐츠는 사용자 에이전트가 datalist 요소를 지원하지 못하는 경우에만 보여질 것입니다. 옵션들은, 설령 그것이 datalist 요소의 직접적인 자식 요소가 아니더라도 모든 사용자 에이전트에서 노출될 것입니다.

The fallback content will only be shown in UAs that don't support datalist. The options, on the other hand, will be detected by all UAs, even though they are not direct children of the datalist element.

datalist 내부에 위치한 option 요소가 selected 상태라면, 구형 사용자 에이전트에서는 기본적으로 선택되겠지만(이것이 select 요소에 영향을 미치므로), datalist 요소를 지원하는 사용자 에이전트에서는 그렇지 않을 것임을 염두에 두십시오.

Note that if an option element used in a datalist is selected, it will be selected by default by legacy UAs (because it affects the select), but it will not have any effect on the input element in UAs that support datalist. The readonly attribute

readonly 속성은 불리언 속성입니다. 요소의 값을 수정할 수 있는지의 여부를 나타냅니다.

The readonly attribute is a boolean attribute that controls whether or not the user can edit the form control. When specified, the element isimmutable.

브라우저 제작자 대상 내용입니다.

다음의 예제에서는, 이미 존재하는 제품의 식별자들을 수정할 수는 없지만 여전히 폼의 요소로서 보여지고 있습니다. 이것은 새로운 상품들(식별자들이 아직 채워지지 않은)과 함께 일관되게 보일 것입니다.

In the following example, the existing product identifiers cannot be modified, but they are still displayed as part of the form, for consistency with the row representing a new product (where the identifier is not yet filled in).

  1. <form action="products.cgi" method=post enctype="multipart/form-data">
  2. <table>
  3. <tr> <th> Product ID <th> Product name <th> Price <th> Action
  4. <tr>
  5. <td> <input readonly name="1.pid" value="H412">
  6. <td> <input required name="1.pname" value="Floor lamp Ulke">
  7. <td> $<input required type=number min=0 step=0.01 name="1.pprice" value="49.99">
  8. <td> <button formnovalidate name="action" value="delete:1">Delete</button>
  9. <tr>
  10. <td> <input readonly name="2.pid" value="FG28">
  11. <td> <input required name="2.pname" value="Table lamp Ulke">
  12. <td> $<input required type=number min=0 step=0.01 name="2.pprice" value="24.99">
  13. <td> <button formnovalidate name="action" value="delete:2">Delete</button>
  14. <tr>
  15. <td> <input required name="3.pid" value="" pattern="[A-Z0-9]+">
  16. <td> <input required name="3.pname" value="">
  17. <td> $<input required type=number min=0 step=0.01 name="3.pprice" value="">
  18. <td> <button formnovalidate name="action" value="delete:3">Delete</button>
  19. </table>
  20. <p> <button formnovalidate name="action" value="add">Add</button> </p>
  21. <p> <button name="action" value="update">Save</button> </p>
  22. </form> The size attribute

size 속성은 사용자 에이전트가 그 값을 수정하려는 사용자에게 시각적으로 보여줄 글자수를 나타냅니다.

The size attribute gives the number of characters that, in a visual rendering, the user agent is to allow the user to see while editing the element'svalue.

값을 명시했다면, 그 값은 유효한 양의 정수여야 합니다.

The size attribute, if specified, must have a value that is a valid non-negative integer greater than zero.

브라우저 제작자 대상 내용입니다. The required attribute

required 속성은 불리언 속성입니다. 명시되었다면, 그 요소는 필수적인 것입니다.

The required attribute is a boolean attribute. When specified, the element is required.

브라우저 제작자 대상 내용입니다.

다음의 폼은 두개의 필수적인 필드를 갖고 있습니다. 하나는 이메일 주소이며, 다른 하나는 비밀번호입니다. 세번째 필드는 사용자가 비밀번호 필드에 입력한 것과 동일한 것을 입력했을 경우에만 올바르다고 판단될 것입니다.

The following form has two required fields, one for an e-mail address and one for a password. It also has a third field that is only considerd valid if the user types the same password in the password field and this third field.

  1. <h1>Create new account</h1>
  2. <form action="/newaccount" method=post>
  3. <p>
  4. <label for="username">E-mail address:</label>
  5. <input id="username" type=email required name=un>
  6. <p>
  7. <label for="password1">Password:</label>
  8. <input id="password1" type=password required name=up>
  9. <p>
  10. <label for="password2">Confirm password:</label>
  11. <input id="password2" type=password onforminput="setCustomValidity(value != password1.value ? 'Passwords do not match.' : '')">
  12. <p>
  13. <input type=submit value="Create account">
  14. </form> The multiple attribute

multiple 속성은 불리언 속성입니다. 사용자가 여러개의 값을 입력하는 것을 허용하는지를 나타냅니다.

The multiple attribute is a boolean attribute that indicates whether the user is to be allowed to specify more than one value.

다음은 이메일 클라이언트의 CC 필드가 여러개의 이메일 주소를 받아들일 수 있는지를 나타냅니다.

The following extract shows how an e-mail client's "Cc" field could accept multiple e-mail addresses.

  1. <label>Cc: <input type=email multiple name=cc></label>

만약 사용자의 연락처 데이터베이스 중에 "Arthur Dent" ("art@example.net")와 "Adam Josh" ("adamjosh@example.net") 라는 항목이 있는 상태에서 사용자가 a 를 입력했다면, 사용자 에이전트는 두개의 이메일 주소를 사용자에게 제시할 수 있을 것입니다.

If the user had, amongst many friends in his user contacts database, two friends "Arthur Dent" (with address "art@example.net") and "Adam Josh" (with address "adamjosh@example.net"), then, after the user has typed "a", the user agent might suggest these two e-mail addresses to the user.

페이지에서는 사용자의 연락처 데이터베이스를 사이트에서 링크할수도 있을 것입니다:

The page could also link in the user's contacts database from the site:

  1. <label>Cc: <input type=email multiple name=cc list=contacts></label>
  2. ...
  3. <datalist id="contacts">
  4. <option value="hedral@damowmow.com">
  5. <option value="pillar@example.com">
  6. <option value="astrophy@cute.example">
  7. <option value="astronomy@science.example.org">
  8. </datalist>

사용자가 텍스트 필드에 "bob@example.net"이라고 입력한 후, a로 시작하는 두번째 이메일 주소를 타이핑하기 시작했다고 가정합니다. 사용자 에이전트는 위에서 언급했던 두개의 주소에 더해, datalist 요소에서 "astrophy" 와 "astronomy" 를 찾아서 보여줄 수 있을 것입니다.

Suppose the user had entered "bob@example.net" into this text field, and then started typing a second e-mail address starting with "a". The user agent might show both the two friends mentioned earlier, as well as the "astrophy" and "astronomy" values given in the datalistelement.

다음은 이메일 클라이언트에서 첨부 필드에 여러개의 파일을 받아들일 수 있음을 나타냅니다.

The following extract shows how an e-mail client's "Attachments" field could accept multiple files for upload.

  1. <label>Attachments: <input type=file multiple name=att></label> The maxlength attribute

maxlength 속성은 폼 컨트롤의 maxlength 속성입니다.

The maxlength attribute, when it applies, is a form control maxlength attribute controlled by the input element's dirty value flag.

input 요소가 허용하는 값의 길이에 제한이 있다면, 그 값의 길이는 요소가 허용하는 값의 길이 제한과 같거나 그 이하여야 합니다.

If the input element has a maximum allowed value length, then the code-point length of the value of the element's value attribute must be equal to or less than the element's maximum allowed value length.

다음의 예제는 메시징 클라이언트의 텍스트 입력이 정해진 숫자의 글자들로 제한되는 방법을 보여줍니다. 따라서 이 매체로 옮기는 것은 간결해야 할 것이며 지식의 담론은 불가능할 것입니다.

The following extract shows how a messaging client's text entry could be arbitrarily restricted to a fixed number of characters, thus forcing any conversation through this medium to be terse and discouraging intelligent discourse.

  1. What are you doing? <input name=status maxlength=140> The pattern attribute

pattern 속성은 컨트롤의 값이 통과해야 할 정규 표현식을 명시합니다.

The pattern attribute specifies a regular expression against which the control's value, or, when the multiple attribute applies and is set, the control's values, are to be checked.

명시되었다면, 이 속성의 값은 자바스크립트 정규 표현식과 일치해야 합니다.

If specified, the attribute's value must match the JavaScript Pattern production. [ECMA262]

브라우저 제작자 대상 내용입니다.

pattern 속성을 사용했다면 반드시 title 속성을 써서 이 패턴에 대한 설명을 제공해야 합니다. 사용자 에이전트는 이 속성의 내용을 활용해서, 패턴이 일치하지 않을 경우 사용자에게 알려줄 수 있을 것입니다. 이러한 활용은 또한 툴팁이라든가, 보조 기술을 사용해서 해당 컨트롤에 포커스를 이동하는 등으로도 가능할 것입니다.

When an input element has a pattern attribute specified, authors should include a title attribute to give a description of the pattern. User agents may use the contents of this attribute, if it is present, when informing the user that the pattern is not matched, or at any other suitable time, such as in a tooltip or read out by assistive technology when the control gains focus.

예를 들어 다음의 예제는:

For example, the following snippet:

  1. <label> Part number:
  2. <input pattern="[0-9][A-Z]{3}" name="part"
  3. title="A part number is a digit followed by three uppercase letters."/>
  4. </label>

사용자 에이전트로 하여금 다음과 같은 알림창을 보이게 할 수 있습니다.

...could cause the UA to display an alert such as:

  1. A part number is a digit followed by three uppercase letters.
  2. You cannot submit this form when the field is incorrect.
  3. 하나의 숫자 뒤에 3개의 대문자가 이어지는 형태입니다.
  4. 이 필드가 올바르지 않다면 폼을 제출할 수 없습니다.

컨트롤에 pattern 속성이 있다면, 그 컨트롤의 title은 반드시 그 패턴을 설명해야 합니다. 사용자가 그 컨트롤에 기입하는 것을 도와줄 수 있다면, 추가적인 정보 역시 가능합니다. 그렇게 하지 않는다면 보조 기술의 활용이 어려울 것입니다.

When a control has a pattern attribute, the title attribute, if used, must describe the pattern. Additional information could also be included, so long as it assists the user in filling in the control. Otherwise, assistive technology would be impaired.

예를 들어, 타이틀 속성이 컨트롤의 캡션을 포함한다면, 보조 기술은 결국 "입력하신 텍스트는 폼에서 요구하는 패턴과 맞지 않습니다. 생일" 이정도 밖에는 말할수 없을 것이며, 그다지 유용하지 않을 것입니다.

For instance, if the title attribute contained the caption of the control, assistive technology could end up saying something like The text you have entered does not match the required pattern. Birthday, which is not useful.

사용자 에이전트는, 에러가 아닌 상황에서도, title 을 보여줄 가능성이 있습니다.(예를 들어, 마우스가 지나갈때 툴팁으로 보여준다거나) 따라서, 저자들은 이러한 상황에서 노출될 title이 에러를 암시하는 것처럼 보이게 하지 말아야 합니다.

UAs may still show the title in non-error situations (for example, as a tooltip when hovering over the control), so authors should be careful not to word titles as if an error has necessarily occurred. The min and max attributes

min과 max는 요소에서 허용하는 값의 범위를 나타냅니다.

The min and max attributes indicate the allowed range of values for the element.

브라우저 제작자 대상 내용입니다.

max 속성의 값(최대값)은 min 속성의 값(최소값)보다 작을 수 없습니다.

The max attribute's value (the maximum) must not be less than the min attribute's value (its minimum).

브라우저 제작자 대상 내용입니다.

다음의 날짜 컨트롤은 입력 최소값을 1980년 이전으로 제한하고 있습니다.

The following date control limits input to dates that are before the 1980s:

  1. <input name=bday type=date max="1979-12-31">

다음의 숫자 컨트롤은 0보다 큰 값을 입력하도록 제한하고 있습니다.

The following number control limits input to whole numbers greater than zero:

  1. <input name=quantity required type=number min=1 value=1> The step attribute

step 속성은 허용되는 값을 제한함으로서 값에서 예상되는(그리고 요구되는) 단계성을 나타냅니다.

The step attribute indicates the granularity that is expected (and required) of the value, by limiting the allowed values. The section that defines the type attribute's current state also defines the default step, the step scale factor, and in some cases the default step base, which are used in processing the attribute as described below.

step 속성을 명시하였다면, 그 값은 0 이상의 값으로 파싱될 수 있는 유효한 부동소수점 숫자이거나, 혹은 문자열 "any"와 매칭되는 ASCII 값이어야 합니다.(대소문자는 구분하지 않습니다)

The step attribute, if specified, must either have a value that is a valid floating point number that parses to a number that is greater than zero, or must have a value that is an ASCII case-insensitive match for the string "any".

브라우저 제작자 대상 내용입니다.

다음의 범위 컨트롤은 0부터 1까지의 값으로 제한하며 256 단계를 허용합니다:

The following range control only accepts values in the range 0..1, and allows 256 steps in that range:

  1. <input name=opacity type=range min=0 max=1 step=0.00392156863>

다음의 컨트롤은 하루중 어떤 시간도 선택할 수 있으며, 그 정확도에도 제한이 없습니다.(1 밀리초 단위의 정확도도 상관없으며, 더 세밀해도 좋습니다)

The following control allows any time in the day to be selected, with any accuracy (e.g. thousandth-of-a-second accuracy or more):

  1. <input name=favtime type=time step=any>

일반적으로는, 시간 컨트롤은 분 단위의 정확도로 제한됩니다.

Normally, time controls are limited to an accuracy of one minute. The placeholder attribute

placeholder 속성은 짧은 힌트(한 단어나 짧은 구)를 나타냅니다. 이러한 힌트는 사용자가 데이터를 입력하는데 도움을 주는 목적입니다. 이것은 값의 예가 될수도 있고, 기대하는 형태의 짤막한 설명이 될 수도 있습니다. 이 속성을 사용했다면, 그 값에는 줄바꿈 문자를 사용할 수 없습니다.

The placeholder attribute represents a short hint (a word or short phrase) intended to aid the user with data entry. A hint could be a sample value or a brief description of the expected format. The attribute, if specified, must have a value that contains no U+000A LINE FEED (LF) or U+000D CARRIAGE RETURN (CR) characters.

긴 힌트를 제공하려 한다면 title 속성이 좀더 적합합니다.

For a longer hint or other advisory text, the title attribute is more appropriate.

placeholder 속성을 label 을 대체하기 위해 사용할수는 없습니다.

The placeholder attribute should not be used as an alternative to a label.

브라우저 제작자 대상 내용입니다.

placeholder 속성을 사용한 이메일 예제입니다.

Here is an example of a mail configuration user interface that uses the placeholder attribute:

  1. <fieldset>
  2. <legend>Mail Account</legend>
  3. <p><label>Name: <input type="text" name="fullname" placeholder="John Ratzenberger"></label></p>
  4. <p><label>Address: <input type="email" name="address" placeholder="john@example.net"></label></p>
  5. <p><label>Password: <input type="password" name="password"></label></p>
  6. <p><label>Description: <input type="text" name="desc" placeholder="My Email Account"></label></p>
  7. </fieldset> Common input element APIs
input . value [ = value ]

폼 컨트롤의 현재 value 를 반환합니다.

Returns the current value of the form control.

값을 바꾸기 위해 사용할 수 있습니다.

Can be set, to change the value.

파일 업로드 컨트롤에서는 공백 문자열만 사용 가능하며 그렇지 않을 경우 INVALID_STATE_ERR 예외를 반환합니다.

Throws an INVALID_STATE_ERR exception if it is set to any value other than the empty string when the control is a file upload control.

input . checked [ = value ]

폼 컨트롤의 checked 상태를 반환합니다.

Returns the current checkedness of the form control.

checked 상태를 바꾸기 위해 사용할 수 있습니다.

Can be set, to change the checkedness.

input . files

폼 컨트롤에서 선택된 파일들의 목록(FileList객체)를 반환합니다.

Returns a FileList object listing the selected files of the form control.

파일 컨트롤 이외에서 사용하였을 경우 null 을 반환합니다.

Returns null if the control isn't a file control.

input . valueAsDate [ = value ]

가능할 경우, 컨트롤의 값인 Date 객체를 반환합니다. 불가능하다면 null 값을 반환합니다.

Returns a Date object representing the form control's value, if applicable; otherwise, returns null.

값을 바꾸기 위해 사용할 수 있습니다.

Can be set, to change the value.

컨트롤이 date- 또는 time- 기반이 아닐 경우 INVALID_STATE_ERR 예외를 반환합니다.

Throws an INVALID_STATE_ERR exception if the control isn't date- or time-based.

input . valueAsNumber [ = value ]

가능할 경우, 컨트롤의 값을 반환합니다. 불가능하다면 null 값을 반환합니다.

Returns a number representing the form control's value, if applicable; otherwise, returns null.

값을 바꾸기 위해 사용할 수 있습니다.

Can be set, to change the value.

컨트롤이 date-, time-, 또는 숫자 기반이 아닐 경우 INVALID_STATE_ERR 예외를 반환합니다.

Throws an INVALID_STATE_ERR exception if the control is neither date- or time-based nor numeric.

input . stepUp( [ n ] )
input . stepDown( [ n ] )

컨트롤의 값을 step 속성에 준해서, n배 만큼 변경합니다. 기본값은 1 입니다.

Changes the form control's value by the value given in the step attribute, multiplied by n. The default value for n is 1.

컨트롤이 date-, time-, 또는 숫자 기반이 아닐 경우 INVALID_STATE_ERR 예외를 반환합니다. step 속성의 값이 "any"이거나, 현재의 값이 파싱될 수 없는 경우, 혹은 제시된 변경을 가한 결과가 range 속성의 제한을 벗어날 경우에도 마찬가지 예외를 반환합니다.

Throws INVALID_STATE_ERR exception if the control is neither date- or time-based nor numeric, if the step attribute's value is "any", if the current value could not be parsed, or if stepping in the given direction by the given amount would take the value out of range.

input . list

list 속성에서 가리키는 datalist 요소를 반환합니다.

Returns the datalist element indicated by the list attribute.

input . selectedOption

폼 컨트롤의 값과 매치되는, list 속성이 가리키는 datalist 요소 속의 option 요소를 반환합니다.

Returns the option element from the datalist element indicated by the list attribute that matches the form control's value.