차례
      1. 4.10.8 The button element
      2. 4.10.9 The select element
      3. 4.10.10 The datalist element
      4. 4.10.11 The optgroup element
      5. 4.10.12 The option element
      6. 4.10.13 The textarea element
      7. 4.10.14 The keygen element
      8. 4.10.15 The output element
      9. 4.10.16 The progress element
      10. 4.10.17 The meter element

4.10.8 The button element

요소가 속하는 범주Categories
플로우 컨텐츠Flow content
구문 컨텐츠Phrasing content
대화형 컨텐츠Interactive content

목록화된, 레이블을 붙일 수 있는, 제출할 수 있는 폼 관련 요소

Listed, labelable, and submittable form-associated element.

이 요소가 사용될 수 있는 문맥:Contexts in which this element can be used

구문 컨텐츠가 사용될 수 있는 곳

Where phrasing content is expected.

이 요소가 포함할 수 있는 것:Content model

구문 컨텐츠. 하지만 대화형 컨텐츠를 자손으로 가질수는 없습니다.

Phrasing content, but there must be no interactive content descendant.

요소에 사용할 수 있는 속성:Content attributes
전역 속성Global attributes
autofocus
disabled
form
formaction
formenctype
formmethod
formnovalidate
formtarget
name
type
value
DOM interface:
interface HTMLButtonElement : HTMLElement {
           attribute boolean autofocus;
           attribute boolean disabled;
  readonly attribute HTMLFormElement form;
           attribute DOMString formAction;
           attribute DOMString formEnctype;
           attribute DOMString formMethod;
           attribute DOMString formNoValidate;
           attribute DOMString formTarget;
           attribute DOMString name;
           attribute DOMString type;
           attribute DOMString value;

  readonly attribute boolean willValidate;
  readonly attribute ValidityState validity;
  readonly attribute DOMString validationMessage;
  boolean checkValidity();
  void setCustomValidity(in DOMString error);

  readonly attribute NodeList labels;
};

button 요소는 버튼을 나타냅니다.

The button element represents a button. If the element is not disabled, then the user agent should allow the user to activate the button.

요소는 버튼입니다.

The element is a button.

type 속성은 나열 속성이며 버튼이 활성화되었을때의 동작을 제어합니다. 다음의 표는 키워드와 상태의 목록을 보여줍니다. 왼쪽 열의 키워드는 두번째 열의 상태와 연결됩니다.

The type attribute controls the behavior of the button when it is activated. It is an enumerated attribute. The following table lists the keywords and states for the attribute — the keywords in the left column map to the states in the cell in the second column on the same row as the keyword.

Keyword State Brief description
submit Submit Button

폼을 제출합니다.

Submits the form.

reset Reset Button

폼을 리셋합니다.

Resets the form.

button Button

아무것도 하지 않습니다.

Does nothing.

기본값은 제출 버튼 상태입니다.

The missing value default is the Submit Button state.

type 속성이 제출 버튼 상태이면, 요소는 제출 버튼입니다.

If the type attribute is in the Submit Button state, the element is specifically a submit button.

유효성 검사: 요소의 type 속성이 리셋 버튼 상태이거나 버튼 상태인 경우, 요소는 유효성 검사에서 제외됩니다.

Constraint validation: If the type attribute is in the Reset Button state or the Button state, the element is barred from constraint validation.

If the element is not disabled, the activation behavior of the button element is to run the steps defined in the following list for the current state of the element's type attribute.

Submit Button

If the element has a form owner, the element must submit the form owner from the button element.

Reset Button

If the element has a form owner, the element must reset the form owner.

Button

Do nothing.

form 속성을 이용해서 button 요소와 그 폼 소유자를 명시적으로 연결할 수 있습니다. name 속성은 요소의 이름을 나타냅니다. disabled 속성으로 컨트롤의 상호작용을 비활성화하고 그 값이 제출되지 않게 할 수 있습니다. autofocus 속성으로 포커스를 제어할 수 있습니다. formactionformenctype, formmethod, formnovalidate, formtarget 속성은 폼 제출을 위한 속성입니다.

The form attribute is used to explicitly associate the button element with its form owner. The name attribute represents the element's name. The disabled attribute is used to make the control non-interactive and to prevent its value from being submitted. The autofocus attribute controls focus. The formaction, formenctype, formmethod, formnovalidate, and formtarget attributes are attributes for form submission.

formnovalidate 속성을 쓰면 제출 버튼을 눌러도 유효성 검사를 하지 않습니다.

The formnovalidate attribute can be used to make submit buttons that do not trigger the constraint validation.

요소의 type 속성이 제출 버튼 상태가 아닐 때는 formactionformenctype, formmethod, formnovalidate, formtarget 속성을 쓸 수 없습니다.

The formaction, formenctype, formmethod, formnovalidate, and formtarget must not be specified if the element's type attribute is not in the Submit Button state.

value 속성은 폼을 제출하기 위해 썼을 때 요소에 표시할 이름입니다. 요소의 value 는 이 속성의 값이며, 없다면 빈 문자열이 사용됩니다.

The value attribute gives the element's value for the purposes of form submission. The element's value is the value of the element's value attribute, if there is one, or the empty string otherwise.

버튼을 폼 제출을 위해 사용했을 경우에만 버튼(과 그 값)이 폼 제출시에 포함됩니다.

A button (and its value) is only included in the form submission if the button itself was used to initiate the form submission.

The value IDL attribute must reflect the content attribute of the same name.

The type IDL attribute must reflect the content attribute of the same name, limited to only known values.

The willValidate, validity, and validationMessage attributes, and the checkValidity() and setCustomValidity() methods, are part of the constraint validation API. The labels attribute provides a list of the element's labels. The autofocus, disabled, form, and name IDL attributes are part of the element's forms API.

다음의 버튼은 show hint 라는 레이블을 갖고 있고, 활성화되면 대화상자를 표시합니다.

The following button is labeled "Show hint" and pops up a dialog box when activated:

<button type=button
        onclick="alert('This 15-20 minute piece was composed by George Gershwin.')">
 Show hint
</button>

4.10.9 The select element

요소가 속하는 범주Categories
플로우 컨텐츠Flow content
구문 컨텐츠Phrasing content
대화형 컨텐츠Interactive content

목록화된, 레이블을 붙일 수 있는, 제출할 수 있는, 리셋할 수 있는 폼 관련 요소

Listed, labelable, submittable, and resettable form-associated element.

이 요소가 사용될 수 있는 문맥:Contexts in which this element can be used

구문 컨텐츠가 사용될 수 있는 곳

Where phrasing content is expected.

이 요소가 포함할 수 있는 것:Content model

0개 이상의 option 또는 optgroup 요소

Zero or more option or optgroup elements.

요소에 사용할 수 있는 속성:Content attributes
전역 속성Global attributes
autofocus
disabled
form
multiple
name
required
size
DOM interface:
interface HTMLSelectElement : HTMLElement {
           attribute boolean autofocus;
           attribute boolean disabled;
  readonly attribute HTMLFormElement form;
           attribute boolean multiple;
           attribute DOMString name;
           attribute boolean required;
           attribute unsigned long size;

  readonly attribute DOMString type;

  readonly attribute HTMLOptionsCollection options;
           attribute unsigned long length;
  getter any item(in unsigned long index);
  any namedItem(in DOMString name);
  void add(in HTMLElement element, in optional HTMLElement before);
  void add(in HTMLElement element, in long before);
  void remove(in long index);

  readonly attribute HTMLCollection selectedOptions;
           attribute long selectedIndex;
           attribute DOMString value;

  readonly attribute boolean willValidate;
  readonly attribute ValidityState validity;
  readonly attribute DOMString validationMessage;
  boolean checkValidity();
  void setCustomValidity(in DOMString error);

  readonly attribute NodeList labels;
};

select 요소는 옵션의 목록 중에서 선택할 수 있는 컨트롤을 나타냅니다.

The select element represents a control for selecting amongst a set of options.

multiple 속성은 불리언 속성입니다. 이 속성이 존재한다면, select 요소는 옵션의 목록 중에서 0개 이상의 옵션을 선택할 수 있습니다. 이 속성이 존재하지 않는다면, select 요소는 옵션의 목록에서 하나의 옵션을 선택하는 컨트롤이 됩니다.

The multiple attribute is a boolean attribute. If the attribute is present, then the select element represents a control for selecting zero or more options from the list of options. If the attribute is absent, then the select element represents a control for selecting a single option from the list of options.

size 속성은 사용자에게 보여줄 옵션의 숫자를 나타냅니다. 속성을 사용했다면, 그 값은 유효한 양의 정수여야 합니다. multiple 속성이 존재한다면, size 속성의 기본값은 4 입니다. 그렇지 않다면 기본값은 1입니다.

The size attribute gives the number of options to show to the user. The size attribute, if specified, must have a value that is a valid non-negative integer greater than zero. If the multiple attribute is present, then the size attribute's default value is 4. If the multiple attribute is absent, then the size attribute's default value is 1.

The display size of a select element is the result of applying the rules for parsing non-negative integers to the value of element's size attribute, if it has one and parsing it is successful. If applying those rules to the attribute's value is not successful, or if the size attribute is absent, the element's display size is the default value of the attribute.

select 요소의 옵션 목록은 해당 요소의 자식인 모든 option요소, 그리고 해당 요소의 자식인 optgroup의 자식인 모든 option요소로 구성되며, 트리 순서입니다.

The list of options for a select element consists of all the option element children of the select element, and all the option element children of all the optgroup element children of the select element, in tree order.

required 속성은 불리언 속성입니다. 명시되었다면, 사용자는 폼을 전송하기 전에 값을 선택할 것을 요청받을 것입니다.

The required attribute is a boolean attribute. When specified, the user will be required to select a value before submitting the form.

다음과 같은 조건들이 만족되면, select 요소의 option 목록 중 첫번째 것이 플레이스홀더 레이블 옵션입니다: select 요소에 required 속성이 있고, multiple 속성은 없으며, 요소의 표시 크기가 1이고, option 목록 중 첫번째 것의 값이 비어 있으며, 그 option이 비활성화되어 있지 않고, 그 option이 select 요소의 직접적인 자식 요소인 경우

If a select element has a required attribute specified, does not have a multiple attribute specified, and has a display size of 1; and if the value of the first option element in the select element's list of options (if any) is the empty string, and that option is not disabled, and, finally, that option element's parent node is the select element (and not an optgroup element), then that option is the select element's placeholder label option.

유효성 검사: 다음의 경우 요소는 suffering from being missing 상태입니다: 요소에 required 속성이 있고, 이 요소의 옵션 목록 중 어떤것도 선택된 것이 없거나, 또는 선택된 유일한 옵션이 이 요소의 플레이스홀더 레이블 옵션인 경우

Constraint validation: If the element has its required attribute specified, and either none of the option elements in the select element's list of options have their selectedness set to true, or the only option element in the selected element's list of options with its selectedness set to true is the placeholder label option, then the element is suffering from being missing.

If the multiple attribute is absent, and the element is not disabled, then the user agent should allow the user to pick an option element in its list of options that is itself not disabled. Upon this option element being picked (either through a click, or through unfocusing the element after changing its value, or through a menu command, or through any other mechanism), and before the relevant user interaction event is queued (e.g. before the click event), the user agent must set the selectedness of the picked option element to true and then queue a task to first fire a simple event that bubbles named change at the select element, using the user interaction task source as the task source, and then to broadcast formchange events from the element's form owner.

If the multiple attribute is absent, whenever an option element in the select element's list of options has its selectedness set to true, and whenever an option element with its selectedness set to true is added to the select element's list of options, the user agent must set the selectedness of all the other option element in its list of options to false.

If the multiple attribute is absent and the element's display size is greater than 1, then the user agent should also allow the user to request that the option whose selectedness is true, if any, be unselected. Upon this request being conveyed to the user agent, and before the relevant user interaction event is queued (e.g. before the click event), the user agent must set the selectedness of that option element to false and then queue a task to first fire a simple event that bubbles named change at the select element, using the user interaction task source as the task source, and then to broadcast formchange events from the element's form owner.

If the multiple attribute is absent and the element's display size is 1, then whenever there are no option elements in the select element's list of options that have their selectedness set to true, the user agent must set the selectedness of the first option element in the list of options in tree order that is not disabled, if any, to true.

If the multiple attribute is present, and the element is not disabled, then the user agent should allow the user to toggle the selectedness of the option elements in its list of options that are themselves not disabled (either through a click, or through a menu command, or any other mechanism). Upon the selectedness of one or more option elements being changed by the user, and before the relevant user interaction event is queued (e.g. before a related click event), the user agent must queue a task to first fire a simple event that bubbles named change at the select element, using the user interaction task source as the task source, and then to broadcast formchange events from the element's form owner.

The reset algorithm for select elements is to go through all the option elements in the element's list of options, and set their selectedness to true if the option element has a selected attribute, and false otherwise.

form 속성은 요소를 그 폼 소유자와 명시적으로 연결합니다. name 속성은 요소의 이름을 나타냅니다. disabled 속성은 요소의 상호작용성을 제거하며, 그 값이 제출되지 못하게 합니다. autofocus 속성은 요소의 포커스를 제어합니다.

The form attribute is used to explicitly associate the select element with its form owner. The name attribute represents the element's name. The disabled attribute is used to make the control non-interactive and to prevent its value from being submitted. The autofocus attribute controls focus.

select . type

multiple 속성이 존재한다면 "select-multiple"을 반환합니다. 그렇지 않다면 "select-one"을 반환합니다.

Returns "select-multiple" if the element has a multiple attribute, and "select-one" otherwise.

select . options

옵션 목록에 대한 HTMLOptionsCollection 을 반환합니다.

Returns an HTMLOptionsCollection of the list of options.

select . length [ = value ]

옵션 목록에 포함된 요소의 숫자를 반환합니다.

Returns the number of elements in the list of options.

더 작은 숫자로 설정될 경우, 요소에 포함된 옵션의 수를 줄입니다.

When set to a smaller number, truncates the number of option elements in the select.

더 큰 숫자로 설정될 경우, 새로운 빈 옵션을 요소에 추가합니다.

When set to a greater number, adds new blank option elements to the select.

element = select . item(index)
select[index]

옵션의 목록 중에서 매개변수 index에 해당하는 것을 반환합니다. 옵션들은 트리 순서로 정렬됩니다.

Returns the item with index index from the list of options. The items are sorted in tree order.

매개변수가 범위를 벗어날 경우 null을 반환합니다.

Returns null if index is out of range.

element = select . namedItem(name)

옵션의 목록 중에서 이름, 혹은 ID가 매개변수 name에 해당하는 것을 반환합니다.

Returns the item with ID or name name from the list of options.

일치하는 것이 여럿이라면, 일치하는 모든 요소를 포함하는 NodeList 객체를 반환합니다.

If there are multiple matching items, then a NodeList object containing all those elements is returned.

그 ID에 해당하는 것이 없다면 null을 반환합니다.

Returns null if no element with that ID could be found.

select . add(element [, before ])

매개변수 before 로 지정된 노드 앞에 element 요소를 삽입합니다.

Inserts element before the node given by before.

before 매개변수는 숫자가 될 수 있습니다. 이 경우, element 는 그 숫자에 해당하는 옵션 앞에 삽입됩니다. before 매개변수가 요소인 경우, element는 그 앞에 삽입됩니다.

The before argument can be a number, in which case element is inserted before the item with that number, or an element from the list of options, in which case element is inserted before that element.

before 매개변수가 생략되었거나, null 이거나, 범위를 벗어나는 숫자인 경우 element는 목록의 마지막에 추가됩니다.

If before is omitted, null, or a number out of range, then element will be added at the end of the list.

element가 자신이 삽입되어질 요소의 조상 요소라면, 메서드는 HIERARCHY_REQUEST_ERR 예외를 반환합니다. element가 option, 혹은 optgroup 요소가 아닐 경우 이 메서드는 아무 행동도 하지 않습니다.

This method will throw a HIERARCHY_REQUEST_ERR exception if element is an ancestor of the element into which it is to be inserted. If element is not an option or optgroup element, then the method does nothing.

select . selectedOptions

옵션 목록 중 선택된 것들의 HTMLCollection을 반환합니다.

Returns an HTMLCollection of the list of options that are selected.

select . selectedIndex [ = value ]

선택된 첫번째 아이템이 있다면 그것의 인덱스를, 없다면 -1을 반환합니다.

Returns the index of the first selected item, if any, or −1 if there is no selected item.

선택된 옵션을 바꾸기 위해 사용할 수 있습니다.

Can be set, to change the selection.

select . value [ = value ]

선택된 첫번째 아이템이 있다면 그것의 값을, 없다면 빈 문자열을 반환합니다.

Returns the value of the first selected item, if any, or the empty string if there is no selected item.

선택된 옵션을 바꾸기 위해 사용할 수 있습니다.

Can be set, to change the selection.

The type IDL attribute, on getting, must return the string "select-one" if the multiple attribute is absent, and the string "select-multiple" if the multiple attribute is present.

The options IDL attribute must return an HTMLOptionsCollection rooted at the select node, whose filter matches the elements in the list of options.

The options collection is also mirrored on the HTMLSelectElement object. The supported property indices at any instant are the indices supported by the object returned by the options attribute at that instant.

The length IDL attribute must return the number of nodes represented by the options collection. On setting, it must act like the attribute of the same name on the options collection.

The item(index) method must return the value returned by the method of the same name on the options collection, when invoked with the same argument.

The namedItem(name) method must return the value returned by the method of the same name on the options collection, when invoked with the same argument.

Similarly, the add() and remove() methods must act like their namesake methods on that same options collection.

The selectedOptions IDL attribute must return an HTMLCollection rooted at the select node, whose filter matches the elements in the list of options that have their selectedness set to true.

The selectedIndex IDL attribute, on getting, must return the index of the first option element in the list of options in tree order that has its selectedness set to true, if any. If there isn't one, then it must return −1.

On setting, the selectedIndex attribute must set the selectedness of all the option elements in the list of options to false, and then the option element in the list of options whose index is the given new value, if any, must have its selectedness set to true.

The value IDL attribute, on getting, must return the value of the first option element in the list of options in tree order that has its selectedness set to true, if any. If there isn't one, then it must return the empty string.

On setting, the value attribute must set the selectedness of all the option elements in the list of options to false, and then the first option element in the list of options, in tree order, whose value is equal to the given new value, if any, must have its selectedness set to true.

The multiple, required, and size IDL attributes must reflect the respective content attributes of the same name. The size IDL attribute is limited to only non-negative numbers greater than zero, and has no default value (unlike the size content attribute that it reflects).

The willValidate, validity, and validationMessage attributes, and the checkValidity() and setCustomValidity() methods, are part of the constraint validation API. The labels attribute provides a list of the element's labels. The autofocus, disabled, form, and name IDL attributes are part of the element's forms API.

다음 예제는 select 요소를 어떻게 사용하는지 보여줍니다. 기본값은 미리 선택되어져 있습니다.

The following example shows how a select element can be used to offer the user with a set of options from which the user can select a single option. The default option is preselected.

<p>
 <label for="unittype">Select unit type:</label>
 <select id="unittype" name="unittype">
  <option value="1"> Miner </option>
  <option value="2"> Puffer </option>
  <option value="3" selected> Snipey </option>
  <option value="4"> Max </option>
  <option value="5"> Firebot </option>
 </select>
</p>

이 예제에서는 사용자가 아무 숫자나 선택할 수 있습니다. 기본값으로는 5개의 옵션 모두가 선택되어져 있습니다.

Here, the user is offered a set of options from which he can select any number. By default, all five options are selected.

<p>
 <label for="allowedunits">Select unit types to enable on this map:</label>
 <select id="allowedunits" name="allowedunits" multiple>
  <option value="1" selected> Miner </option>
  <option value="2" selected> Puffer </option>
  <option value="3" selected> Snipey </option>
  <option value="4" selected> Max </option>
  <option value="5" selected> Firebot </option>
 </select>
</p>

4.10.10 The datalist element

요소가 속하는 범주Categories
플로우 컨텐츠Flow content
구문 컨텐츠Phrasing content
이 요소가 사용될 수 있는 문맥:Contexts in which this element can be used

구문 컨텐츠가 사용될 수 있는 곳

Where phrasing content is expected.

이 요소가 포함할 수 있는 것:Content model
구문 컨텐츠phrasing content
또는, 0개 이상의 option 요소Or: Zero or more option elements.
요소에 사용할 수 있는 속성:Content attributes
전역 속성Global attributes
DOM interface:
interface HTMLDataListElement : HTMLElement {
  readonly attribute HTMLCollection options;
};

datalist 요소는 다른 컨트롤에서 사용할 수 있도록 미리 정의된 옵션 집합을 나타냅니다. 요소의 내용은 미리 정의되어진 옵션들을 나타내는 option요소와 섞여서, 구형 사용자 에이전트를 위한 폴백 요소를 나타냅니다. 이 요소는 렌더링 과정에서는 아무것도 나타내지 않습니다.

The datalist element represents a set of option elements that represent predefined options for other controls. The contents of the element represents fallback content for legacy user agents, intermixed with option elements that represent the predefined options. In the rendering, the datalist element represents nothing and it, along with its children, should be hidden.

datalist 요소는 input 요소에 묶여 있습니다.

The datalist element is hooked up to an input element using the list attribute on the input element.

disabled 상태가 아니고, 그 값이 빈 문자열이 아니면서 datalist의 자식 요소인 각각의 option 요소들은 하나의 제시를 나타냅니다. 각각의 제시는 값과 레이블을 가집니다.

Each option element that is a descendant of the datalist element, that is not disabled, and whose value is a string that isn't the empty string, represents a suggestion. Each suggestion has a value and a label.

datalist . options

테이블(..?)에서 option 요소들의 HTMLCollection을 반환합니다.

Returns an HTMLCollection of the options elements of the table.

The options IDL attribute must return an HTMLCollection rooted at the datalist node, whose filter matches option elements.

Constraint validation: If an element has a datalist element ancestor, it is barred from constraint validation.

4.10.11 The optgroup element

요소가 속하는 범주Categories
없음None
이 요소가 사용될 수 있는 문맥:Contexts in which this element can be used
select 요소의 자식 요소 As a child of a select element.
이 요소가 포함할 수 있는 것:Content model
0개 이상의 option 요소Zero or more option elements.
요소에 사용할 수 있는 속성:Content attributes
전역 속성Global attributes
disabled
label
DOM interface:
interface HTMLOptGroupElement : HTMLElement {
           attribute boolean disabled;
           attribute DOMString label;
};

optgroup 요소는 동일한 레이블을 가진 옵션 요소들의 그룹입니다.

The optgroup element represents a group of option elements with a common label.

option 요소의 그룹은 optgroup 요소의 자식인 option 요소들로 구성됩니다.

The element's group of option elements consists of the option elements that are children of the optgroup element.

When showing option elements in select elements, user agents should show the option elements of such groups as being related to each other and separate from other option elements.

disabled 속성은 옵션 그룹 전체를 비활성화시킵니다.

The disabled attribute is a boolean attribute and can be used to disable a group of option elements together.

label 속성은 반드시 명시되어야 합니다. 이 값이 그룹의 이름을 결정하며 사용자 인터페이스에서 사용됩니다.

The label attribute must be specified. Its value gives the name of the group, for the purposes of the user interface. User agents should use this attribute's value when labelling the group of option elements in a select element.

The disabled and label attributes must reflect the respective content attributes of the same name.

다음의 예제는 select 요소를 이용한 드롭다운 위젯에서, 세가지 과정으로부터의 수업 선택을 어떻게 제공할지 보여줍니다.

The following snippet shows how a set of lessons from three courses could be offered in a select drop-down widget:

<form action="courseselector.dll" method="get">
 <p>Which course would you like to watch today?
 <p><label>Course:
  <select name="c">
   <optgroup label="8.01 Physics I: Classical Mechanics">
    <option value="8.01.1">Lecture 01: Powers of Ten
    <option value="8.01.2">Lecture 02: 1D Kinematics
    <option value="8.01.3">Lecture 03: Vectors
   <optgroup label="8.02 Electricity and Magnestism">
    <option value="8.02.1">Lecture 01: What holds our world together?
    <option value="8.02.2">Lecture 02: Electric Field
    <option value="8.02.3">Lecture 03: Electric Flux
   <optgroup label="8.03 Physics III: Vibrations and Waves">
    <option value="8.03.1">Lecture 01: Periodic Phenomenon
    <option value="8.03.2">Lecture 02: Beats
    <option value="8.03.3">Lecture 03: Forced Oscillations with Damping
  </select>
 </label>
 <p><input type=submit value="▶ Play">
</form>

4.10.12 The option element

요소가 속하는 범주Categories
없음None
이 요소가 사용될 수 있는 문맥:Contexts in which this element can be used
select 요소의 자식 요소 As a child of a select element.
datalist 요소의 자식 요소As a child of a datalist element.
optgroup 요소의 자식 요소As a child of an optgroup element.
이 요소가 포함할 수 있는 것:Content model
텍스트Text
요소에 사용할 수 있는 속성:Content attributes
전역 속성Global attributes
disabled
label
selected
value
DOM interface:
[NamedConstructor=Option(),
 NamedConstructor=Option(in DOMString text),
 NamedConstructor=Option(in DOMString text, in DOMString value),
 NamedConstructor=Option(in DOMString text, in DOMString value, in boolean defaultSelected),
 NamedConstructor=Option(in DOMString text, in DOMString value, in boolean defaultSelected, in boolean selected)]
interface HTMLOptionElement : HTMLElement {
           attribute boolean disabled;
  readonly attribute HTMLFormElement form;
           attribute DOMString label;
           attribute boolean defaultSelected;
           attribute boolean selected;
           attribute DOMString value;

           attribute DOMString text;
  readonly attribute long index;
};

option 요소는 select 요소의 옵션, 혹은 datalist 요소가 나타내는 제시 목록의 부분을 나타냅니다.

The option element represents an option in a select element or as part of a list of suggestions in a datalist element.

select 요소의 정의에서 설명된 상황에서, option 요소는 select 요소의 플레이스홀더 레이블 옵션이 될 수 있습니다. 플레이스홀더 레이블 옵션은 실제 옵션이 아니라 select 컨트롤에 대한 레이블을 나타냅니다.

In certain circumstances described in the definition of the select element, an option element can be a select element's placeholder label option. A placeholder label option does not represent an actual option, but instead represents a label for the select control.

disabled 속성은 불리언 속성입니다. option 요소에 disabled 속성이 있거나 요소를 포함한 optgroup 요소에 disabled 속성이 있다면 요소는 비활성화됩니다.

The disabled attribute is a boolean attribute. An option element is disabled if its disabled attribute is present or if it is a child of an optgroup element whose disabled attribute is present.

An option element that is disabled must prevent any click events that are queued on the user interaction task source from being dispatched on the element.

label 속성은 요소의 레이블을 나타냅니다. 속성이 있다면 그 값이 요소의 레이블을 나타내며, 없다면 요소의 textContent가 레이블을 나타냅니다.

The label attribute provides a label for element. The label of an option element is the value of the label attribute, if there is one, or the textContent of the element, if there isn't.

value 속성은 요소의 값을 나타냅니다. 속성이 있다면 그 값이 요소의 을 나타내며, 없다면 요소의 textContent가 값을 나타냅니다.

The value attribute provides a value for element. The value of an option element is the value of the value attribute, if there is one, or the textContent of the element, if there isn't.

selected 속성은 불리언 속성이며 요소의 선택 여부에 대한 기본값을 나타냅니다.

The selected attribute is a boolean attribute. It represents the default selectedness of the element.

The selectedness of an option element is a boolean state, initially false. Except where otherwise specified, when the element is created, its selectedness must be set to true if the element has a selected attribute. Whenever an option element's selected attribute is added, its selectedness must be set to true.

The Option() constructor with three or fewer arguments overrides the initial state of the selectedness state to always be false even if the third argument is true (implying that a selected attribute is to be set). The fourth argument can be used to explicitly set the initial selectedness state when using the constructor.

multiple 속성이 없는 select 요소는 단 하나의 선택된 옵션만을 가질 수 있습니다.

A select element whose multiple attribute is not specified must not have more than one descendant option element with its selected attribute set.

An option element's index is the number of option element that are in the same list of options but that come before it in tree order. If the option element is not in a list of options, then the option element's index is zero.

option . selected

요소가 선택되었다면 true를, 그렇지 않다면 false를 반환합니다.

Returns true if the element is selected, and false otherwise.

설정하여 상태를 바꿀 수 있습니다.

Can be set, to override the current state of the element.

option . index

포함된 select 요소 내에서 해당 options 요소의 인덱스를 반환합니다.

Returns the index of the element in its select element's options list.

option . form

요소의 form 요소를 - 그러한 것이 있다면 - 반환합니다. 없다면 null을 반환합니다.

Returns the element's form element, if any, or null otherwise.

option . text

textContent 와 같은데, 공백문자들이 하나로 합쳐진다는 점에서는 다릅니다.

Same as textContent, except that spaces are collapsed.

option = new Option( [ text [, value [, defaultSelected [, selected ] ] ] ] )

새로운 option 요소를 반환합니다.

Returns a new option element.

text 매개변수는 요소의 내용을 정합니다.

The text argument sets the contents of the element.

value 매개변수는 value 속성을 정합니다.

The value argument sets the value attribute.

defaultSelected 매개변수는 selected 속성을 정의합니다.

The defaultSelected argument sets the selected attribute.

selected 매개변수는 요소가 선택되었는지의 여부를 정합니다. 만약 생략되었다면, 설령 defaultSelected 매개변수가 true라고 하더라도 요소는 선택되지 않은 것입니다.

The selected argument sets whether or not the element is selected. If it is omitted, even if the defaultSelected argument is true, the element is not selected.

The disabled and label IDL attributes must reflect the respective content attributes of the same name. The defaultSelected IDL attribute must reflect the selected content attribute.

The value IDL attribute, on getting, must return the value of the element's value content attribute, if it has one, or else the value of the element's textContent IDL attribute. On setting, the element's value content attribute must be set to the new value.

The selected IDL attribute, on getting, must return true if the element's selectedness is true, and false otherwise. On setting, it must set the element's selectedness to the new value.

The index IDL attribute must return the element's index.

The text IDL attribute, on getting, must return the value of the textContent IDL attribute on the element with leading and trailing space characters removed, and with any sequences of two or more space characters replaced by a single U+0020 SPACE character. On setting, it must act as if the textContent IDL attribute on the element had been set to the new value.

The form IDL attribute's behavior depends on whether the option element is in a select element or not. If the option has a select element as its parent, or has a colgroup element as its parent and that colgroup element has a select element as its parent, then the form IDL attribute must return the same value as the form IDL attribute on that select element. Otherwise, it must return null.

Several constructors are provided for creating HTMLOptionElement objects (in addition to the factory methods from DOM Core such as createElement()): Option(), Option(text), Option(text, value), Option(text, value, defaultSelected), and Option(text, value, defaultSelected, selected). When invoked as constructors, these must return a new HTMLOptionElement object (a new option element). If the text argument is present, the new object must have as its only child a Node with node type TEXT_NODE (3) whose data is the value of that argument. If the value argument is present, the new object must have a value attribute set with the value of the argument as its value. If the defaultSelected argument is present and true, the new object must have a selected attribute set with no value. If the selected argument is present and true, the new object must have its selectedness set to true; otherwise the fourth argument is absent or false, and the selectedness must be set to false, even if the defaultSelected argument is present and true. The element's document must be the active document of the browsing context of the Window object on which the interface object of the invoked constructor is found.

4.10.13 The textarea element

요소가 속하는 범주Categories
플로우 컨텐츠Flow content
구문 컨텐츠Phrasing content
대화형 컨텐츠Interactive content

목록화된, 레이블을 붙일 수 있는, 제출할 수 있는, 리셋할 수 있는 폼 관련 요소

Listed, labelable, submittable, and resettable form-associated element.

이 요소가 사용될 수 있는 문맥:Contexts in which this element can be used

구문 컨텐츠가 사용될 수 있는 곳

Where phrasing content is expected.

이 요소가 포함할 수 있는 것:Content model
텍스트Text
요소에 사용할 수 있는 속성:Content attributes
전역 속성Global attributes
autofocus
cols
disabled
dirname
form
maxlength
name
placeholder
readonly
required
rows
wrap
DOM interface:
interface HTMLTextAreaElement : HTMLElement {
           attribute boolean autofocus;
           attribute unsigned long cols;
           attribute boolean disabled;
           attribute DOMString dirName;
  readonly attribute HTMLFormElement form;
           attribute long maxLength;
           attribute DOMString name;
           attribute DOMString placeholder;
           attribute boolean readOnly;
           attribute boolean required;
           attribute unsigned long rows;
           attribute DOMString wrap;

  readonly attribute DOMString type;
           attribute DOMString defaultValue;
           attribute DOMString value;
  readonly attribute unsigned long textLength;

  readonly attribute boolean willValidate;
  readonly attribute ValidityState validity;
  readonly attribute DOMString validationMessage;
  boolean checkValidity();
  void setCustomValidity(in DOMString error);

  readonly attribute NodeList labels;

  void select();
           attribute unsigned long selectionStart;
           attribute unsigned long selectionEnd;
  void setSelectionRange(in unsigned long start, in unsigned long end);
};

textarea 요소는 여러줄의 평범한 텍스트를 편집할 수 있는 컨트롤입니다. 컨트롤의 내용이 기본 값이 됩니다.

The textarea element represents a multiline plain text edit control for the element's raw value. The contents of the control represent the control's default value.

The raw value of a textarea control must be initially the empty string.

readonly 속성을 통해 사용자가 요소의 내용을 편집할 수 있는지 여부를 결정할 수 있습니다.

The readonly attribute is a boolean attribute used to control whether the text can be edited by the user or not.

Constraint validation: If the readonly attribute is specified on a textarea element, the element is barred from constraint validation.

A textarea element is mutable if it is neither disabled nor has a readonly attribute specified.

When a textarea is mutable, its raw value should be editable by the user. Any time the user causes the element's raw value to change, the user agent must queue a task to first fire a simple event that bubbles named input at the textarea element, and then to broadcast forminput events from the textarea element's form owner. User agents may wait for a suitable break in the user's interaction before queuing the task; for example, a user agent could wait for the user to have not hit a key for 100ms, so as to only fire the event when the user pauses, instead of continuously for each keystroke.

A textarea element has a dirty value flag, which must be initially set to false, and must be set to true whenever the user interacts with the control in a way that changes the raw value.

When the textarea element's textContent IDL attribute changes value, if the element's dirty value flag is false, then the element's raw value must be set to the value of the element's textContent IDL attribute.

The reset algorithm for textarea elements is to set the element's value to the value of the element's textContent IDL attribute.

If the element is mutable, the user agent should allow the user to change the writing direction of the element, setting it either to a left-to-right writing direction or a right-to-left writing direction. If the user does so, the user agent must then run the following steps:

  1. Set the element's dir attribute to "ltr" if the user selected a left-to-right writing direction, and "rtl" if the user selected a right-to-left writing direction.

  2. Queue a task to first fire a simple event that bubbles named input at the textarea element, and to then broadcast forminput events from the textarea element's form owner, if any.

cols 속성을 통해 한 줄당 입력할 수 있는 글자수를 제한할 수 있습니다. 속성을 사용한다면, 그 값은 양의 정수여야 합니다.

The cols attribute specifies the expected maximum number of characters per line. If the cols attribute is specified, its value must be a valid non-negative integer greater than zero. If applying the rules for parsing non-negative integers to the attribute's value results in a number greater than zero, then the element's character width is that value; otherwise, it is 20.

The user agent may use the textarea element's character width as a hint to the user as to how many characters the server prefers per line (e.g. for visual user agents by making the width of the control be that many characters). In visual renderings, the user agent should wrap the user's input in the rendering so that each line is no wider than this number of characters.

rows 속성은 몇개의 줄이 보여질지를 결정합니다. 속성을 사용한다면, 그 값은 양의 정수여야 합니다.

The rows attribute specifies the number of lines to show. If the rows attribute is specified, its value must be a valid non-negative integer greater than zero. If applying the rules for parsing non-negative integers to the attribute's value results in a number greater than zero, then the element's character height is that value; otherwise, it is 2.

Visual user agents should set the height of the control to the number of lines given by character height.

wrap 속성은 나열 속성이며, 두개의 키워드와 상태를 갖습니다. soft 키워드는 soft 상태를 나타내며, hard 상태를 나타내는 hard 키워드가 있습니다. 값을 명시하지 않았을 경우 기본값은 soft 입니다.

The wrap attribute is an enumerated attribute with two keywords and states: the soft keyword which maps to the Soft state, and the hard keyword which maps to the Hard state. The missing value default is the Soft state.

Soft 상태는 요소 내부의 텍스트가 제출될 때 줄바꿈되지 않음을 나타냅니다(렌더링 상에서는 줄바꿈된것처럼 보이더라도).

The Soft state indicates that the text in the textarea is not to be wrapped when it is submitted (though it can still be wrapped in the rendering).

Hard 상태는 요소 내부의 텍스트가 제출될 때 줄바꿈되도록 사용자 에이전트가 줄바꿈 문자들을 삽입할 것을 나타냅니다.

The Hard state indicates that the text in the textarea is to have newlines added by the user agent so that the text is wrapped when it is submitted.

요소의 wrap 속성이 hard로 설정되었다면 cols 속성이 반드시 명시되어야 합니다.

If the element's wrap attribute is in the Hard state, the cols attribute must be specified.

The element's value is defined to be the element's raw value with the following transformation applied:

  1. Replace every occurrence of a U+000D CARRIAGE RETURN (CR) character not followed by a U+000A LINE FEED (LF) character, and every occurrence of a U+000A LINE FEED (LF) character not preceded by a U+000D CARRIAGE RETURN (CR) character, by a two-character string consisting of a U+000D CARRIAGE RETURN U+000A LINE FEED (CRLF) character pair.

  2. If the element's wrap attribute is in the Hard state, insert U+000D CARRIAGE RETURN U+000A LINE FEED (CRLF) character pairs into the string using a UA-defined algorithm so that each line has no more than character width characters. For the purposes of this requirement, lines are delimited by the start of the string, the end of the string, and U+000D CARRIAGE RETURN U+000A LINE FEED (CRLF) character pairs.

maxlength 속성은 textarea 요소의 dirty value flag에 의해 제어되는 속성입니다.

The maxlength attribute is a form control maxlength attribute controlled by the textarea element's dirty value flag.

요소에 maxlength 속성이 있다면, 요소의 IDL 속성 textContent의 code-point length값이 maxlength 속성의 값보다 작거나 같아야 합니다.

If the textarea element has a maximum allowed value length, then the element's children must be such that the code-point length of the value of the element's textContent IDL attribute is equal to or less than the element's maximum allowed value length.

required 속성을 명시했다면, 폼을 제출하기 전에 값을 요구받을 것입니다.

The required attribute is a boolean attribute. When specified, the user will be required to enter a value before submitting the form.

Constraint validation: If the element has its required attribute specified, and the element is mutable, and the element's value is the empty string, then the element is suffering from being missing.

placeholder 속성은 힌트(단어나, 짧은 구절)를 제공합니다. 이 힌트는 사용자의 데이터 입력을 돕는 것으로 값의 예제나, 기대되는 형식의 짧은 설명 등이 가능합니다. 속성을 명시하였다면, 그 값은 줄바꿈 문자를 포함할 수 없습니다.

The placeholder attribute represents a 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.

User agents should present this hint to the user, after having stripped line breaks from it, when the element's value is the empty string and the control is not focused (e.g. by displaying it inside a blank unfocused control).

dirname 속성은 폼 컨트롤 dirname 속성입니다.

The dirname attribute is a form control dirname attribute.

form 속성을 사용해서 폼 소유자를 명시적으로 지정할 수 있습니다. name 속성은 요소의 이름입니다. disabled 속성은 요소를 인터랙티브하지 않은 상태로 바꾸며, 제출시에 그 값을 포함하지 않도록 합니다. autofocus 속성은 포커스를 제어합니다.

The form attribute is used to explicitly associate the textarea element with its form owner. The name attribute represents the element's name. The disabled attribute is used to make the control non-interactive and to prevent its value from being submitted. The autofocus attribute controls focus.

textarea . type

문자열 "textarea"를 반환합니다.

Returns the string "textarea".

textarea . value

요소의 현재 값을 반환합니다.

Returns the current value of the element.

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

Can be set, to change the value.

The cols, placeholder, required, rows, and wrap attributes must reflect the respective content attributes of the same name. The cols and rows attributes are limited to only non-negative numbers greater than zero. The cols attribute's default value is 20. The rows attribute's default value is 2. The dirName IDL attribute must reflect the dirname content attribute. The maxLength IDL attribute must reflect the maxlength content attribute, limited to only non-negative numbers. The readOnly IDL attribute must reflect the readonly content attribute.

The type IDL attribute must return the value "textarea".

The defaultValue IDL attribute must act like the element's textContent IDL attribute.

The value attribute must, on getting, return the element's raw value; on setting, it must set the element's raw value to the new value.

The textLength IDL attribute must return the code-point length of the element's value.

The willValidate, validity, and validationMessage attributes, and the checkValidity() and setCustomValidity() methods, are part of the constraint validation API. The labels attribute provides a list of the element's labels. The select(), selectionStart, selectionEnd, and setSelectionRange() methods and attributes expose the element's text selection. The autofocus, disabled, form, and name IDL attributes are part of the element's forms API.

요소를 사용하여 제한이나 형식이 없는 텍스트 입력을 나타내고 있습니다:

Here is an example of a textarea being used for unrestricted free-form text input in a form:

<p>If you have any comments, please let us know: <textarea cols=80 name=comments></textarea></p>

의견의 길이를 제한하고 싶다면 maxlength 속성을 사용하면 됩니다.

To specify that a maximum length for the comments, one can use the maxlength attribute:

<p>If you have any short comments, please let us know: <textarea cols=80 name=comments maxlength=200></textarea></p>

기본값을 제공하려면 요소 내에 텍스트를 삽입하면 됩니다.

To give a default value, text can be included inside the element:

<p>If you have any comments, please let us know: <textarea cols=80 name=comments>You rock!</textarea></p>

사용자 에이전트가 텍스트와 함께 그 방향성도 제출하게 하려면, dirname 속성을 사용할 수 있습니다.

To have the browser submit the directionality of the element along with the value, the dirname attribute can be specified:

<p>If you have any comments, please let us know (you may use either English or Hebrew for your comments):
<textarea cols=80 name=comments dirname=comments.dir></textarea></p>

4.10.14 The keygen element

요소가 속하는 범주Categories
플로우 컨텐츠Flow content
구문 컨텐츠Phrasing content
대화형 컨텐츠Interactive content

목록화된, 레이블을 붙일 수 있는, 제출할 수 있는, 리셋할 수 있는폼 관련 요소

Listed, labelable, submittable, and resettable form-associated element.

이 요소가 사용될 수 있는 문맥:Contexts in which this element can be used

구문 컨텐츠가 사용될 수 있는 곳

Where phrasing content is expected.

이 요소가 포함할 수 있는 것:Content model
이 요소는 비어 있어야 합니다.Empty
요소에 사용할 수 있는 속성:Content attributes
전역 속성Global attributes
autofocus
challenge
disabled
form
keytype
name
DOM interface:
interface HTMLKeygenElement : HTMLElement {
           attribute boolean autofocus;
           attribute DOMString challenge;
           attribute boolean disabled;
  readonly attribute HTMLFormElement form;
           attribute DOMString keytype;
           attribute DOMString name;

  readonly attribute DOMString type;

  readonly attribute boolean willValidate;
  readonly attribute ValidityState validity;
  readonly attribute DOMString validationMessage;
  boolean checkValidity();
  void setCustomValidity(in DOMString error);

  readonly attribute NodeList labels;
};

keygen 요소는 키 쌍을 만들어내는 컨트롤을 나타냅니다. 컨트롤의 폼이 제출될 때 개인 키가 로컬 키스토어에 저장되며, 공용 키가 서버로 전송됩니다.

The keygen element represents a key pair generator control. When the control's form is submitted, the private key is stored in the local keystore, and the public key is packaged and sent to the server.

challenge 속성을 사용할 수 있습니다. 이 값은 제출되는 키와 함께 포장됩니다.

The challenge attribute may be specified. Its value will be packaged with the submitted key.

keytype 속성은 나열 속성입니다. 다음의 테이블은 이 속성을 위한 키워드와 상태를 나열(..?)하고 있습니다. 왼쪽 열의 키워드가 두번째 열의 상태와 대응합니다. 사용자 에이전트는 이러한 값들을 지원할 필요는 없으며, 자신이 지원하는 알고리즘에 해당하는 키워드만을 인식해야 합니다.

The keytype attribute is an enumerated attribute. The following table lists the keywords and states for the attribute — the keywords in the left column map to the states listed in the cell in the second column on the same row as the keyword. User agents are not required to support these values, and must only recognize values whose corresponding algorithms they support.

Keyword State
rsa RSA

유효하지 않은 값에 대한 기본값unknown 상태입니다. 값을 명시하지 않았고, 사용자 에이전트가 지원한다면, 기본값은 RSA 입니다. 아니라면 기본값은 unknown 상태입니다.

The invalid value default state is the unknown state. The missing value default state is the RSA state, if it is supported, or the unknown state otherwise.

이 명세서에서는 사용자 에이전트가 어떠한 키 타입을 지원해야 하는지 명시하지 않습니다. 사용자 에이전트가 아무 타입도 지원하지 않는 것도 가능합니다.

This specification does not specify what key types user agents are to support — it is possible for a user agent to not support any key types at all.

The user agent may expose a user interface for each keygen element to allow the user to configure settings of the element's key pair generator, e.g. the key length.

The reset algorithm for keygen elements is to set these various configuration settings back to their defaults.

The element's value is the string returned from the following algorithm:

  1. Use the appropriate step from the following list:

    If the keytype attribute is in the RSA state

    Generate an RSA key pair using the settings given by the user, if appropriate, using the md5WithRSAEncryption RSA signature algorithm (the signature algorithm with MD5 and the RSA encryption algorithm) referenced in section 2.2.1 ("RSA Signature Algorithm") of RFC 3279, and defined in RFC 2313. [RFC3279] [RFC2313]

    Otherwise, the keytype attribute is in the unknown state

    The given key type is not supported. Return the empty string and abort this algorithm.

    Let private key be the generated private key.

    Let public key be the generated public key.

    Let signature algorithm be the selected signature algorithm.

  2. If the element has a challenge attribute, then let challenge be that attribute's value. Otherwise, let challenge be the empty string.

  3. Let algorithm be an ASN.1 AlgorithmIdentifier structure as defined by RFC 5280, with the algorithm field giving the ASN.1 OID used to identify signature algorithm, using the OIDs defined in section 2.2 ("Signature Algorithms") of RFC 3279, and the parameters field set up as required by RFC 3279 for AlgorithmIdentifier structures for that algorithm. [X690] [RFC5280] [RFC3279]

  4. Let spki be an ASN.1 SubjectPublicKeyInfo structure as defined by RFC 5280, with the algorithm field set to the algorithm structure from the previous step, and the subjectPublicKey field set to the BIT STRING value resulting from ASN.1 DER encoding the public key. [X690] [RFC5280]

  5. Let publicKeyAndChallenge be an ASN.1 PublicKeyAndChallenge structure as defined below, with the spki field set to the spki structure from the previous step, and the challenge field set to the string challenge obtained earlier. [X690]

  6. Let signature be the BIT STRING value resulting from ASN.1 DER encoding the signature generated by applying the signature algorithm to the byte string obtained by ASN.1 DER encoding the publicKeyAndChallenge structure, using private key as the signing key. [X690]

  7. Let signedPublicKeyAndChallenge be an ASN.1 SignedPublicKeyAndChallenge structure as defined below, with the publicKeyAndChallenge field set to the publicKeyAndChallenge structure, the signatureAlgorithm field set to the algorithm structure, and the signature field set to the BIT STRING signature from the previous step. [X690]

  8. Return the result of base64 encoding the result of ASN.1 DER encoding the signedPublicKeyAndChallenge structure. [RFC4648] [X690]

The data objects used by the above algorithm are defined as follows. These definitions use the same "ASN.1-like" syntax defined by RFC 5280. [RFC5280]

PublicKeyAndChallenge ::= SEQUENCE {
    spki SubjectPublicKeyInfo,
    challenge IA5STRING
}

SignedPublicKeyAndChallenge ::= SEQUENCE {
    publicKeyAndChallenge PublicKeyAndChallenge,
    signatureAlgorithm AlgorithmIdentifier,
    signature BIT STRING
}

Constraint validation: The keygen element is barred from constraint validation.

form 속성을 사용해서 폼 소유자를 명시적으로 지정할 수 있습니다. name 속성은 요소의 이름입니다. disabled 속성을 사용하면 요소는 상호작용성을 잃고 값은 제출되지 않습니다. autofocus 속성은 포커스를 제어합니다.

The form attribute is used to explicitly associate the keygen element with its form owner. The name attribute represents the element's name. The disabled attribute is used to make the control non-interactive and to prevent its value from being submitted. The autofocus attribute controls focus.

keygen . type

문자열 "keygen"을 반환합니다.

Returns the string "keygen".

The challenge IDL attribute must reflect the content attribute of the same name.

The keytype IDL attribute must reflect the content attribute of the same name, limited to only known values.

The type IDL attribute must return the value "keygen".

The willValidate, validity, and validationMessage attributes, and the checkValidity() and setCustomValidity() methods, are part of the constraint validation API. The labels attribute provides a list of the element's labels. The autofocus, disabled, form, and name IDL attributes are part of the element's forms API.

이 명세는 생성된 개인 키가 어떻게 사용될지를 명시하지는 않습니다. 예측되는 형태는 다음과 같습니다 : SignedPublicKeyAndChallenge(SPKAC) 구조를 넘겨받은 후, 서버는 클라이언트 인증서를 생성하고 사용자가 그 인증서를 다시 다운로드받도록 합니다. 클라이언트는 인증서를 개인 키와 함께 키 스토어에 저장합니다. 이렇게 저장된 인증서는 SSL 확인과 인증서 확인에 사용될 수 있을 것입니다.

This specification does not specify how the private key generated is to be used. It is expected that after receiving the SignedPublicKeyAndChallenge (SPKAC) structure, the server will generate a client certificate and offer it back to the user for download; this certificate, once downloaded and stored in the key store along with the private key, can then be used to authenticate to services that use TLS and certificate authentication.

키 쌍을 생성하기 위해 개인 키를 사용자의 키 스토어에 추가하고 공용 키를 서버에 전송하는 마크업으로 다음과 같은 것을 사용할 수 있습니다:

To generate a key pair, add the private key to the user's key store, and submit the public key to the server, markup such as the following can be used:

<form action="processkey.cgi" method="post" enctype="multipart/form-data">
 <p><keygen name="key"></p>
 <p><input type=submit value="Submit key..."></p>
</form>

서버는 폼 제출을 넘겨받고, 동봉된 RSA 공용키와 key 의 값을 받을 것입니다. 그러면 이것을 다양한 목적으로 사용할 수 있는데, 위에서 언급한 것과 같이 클라이언트 인증서 생성 등입니다.

The server will then receive a form submission with a packaged RSA public key as the value of "key". This can then be used for various purposes, such as generating a client certificate, as mentioned above.

4.10.15 The output element

요소가 속하는 범주Categories
플로우 컨텐츠Flow content
구문 컨텐츠Phrasing content

목록화된, 레이블을 붙일 수 있는, 리셋할 수 있는 폼 관련 요소

Listed, labelable, and resettable form-associated element.

이 요소가 사용될 수 있는 문맥:Contexts in which this element can be used

구문 컨텐츠가 사용될 수 있는 곳

Where phrasing content is expected.

이 요소가 포함할 수 있는 것:Content model
구문 컨텐츠Phrasing content
요소에 사용할 수 있는 속성:Content attributes
전역 속성Global attributes
for
form
name
DOM interface:
interface HTMLOutputElement : HTMLElement {
  [PutForwards=value] readonly attribute DOMSettableTokenList htmlFor;
  readonly attribute HTMLFormElement form;
           attribute DOMString name;

  readonly attribute DOMString type;
           attribute DOMString defaultValue;
           attribute DOMString value;

  readonly attribute boolean willValidate;
  readonly attribute ValidityState validity;
  readonly attribute DOMString validationMessage;
  boolean checkValidity();
  void setCustomValidity(in DOMString error);

  readonly attribute NodeList labels;
};

output 요소는 계산의 결과를 나타냅니다.

The output element represents the result of a calculation.

내용 속성 for는 계산의 결과 및 계산에 사용되었거나 혹은 계산에 영향을 미친 값을 나타내는 요소 사이에 명시적인 연결을 허용합니다. 속성을 사용하였다면, 공백문자로 구분된 예약어 목록 문자열을 반드시 포함하여야 합니다. 예약어는 같은 문서 내에 있는 요소의 ID 값을 포함해야 합니다.

The for content attribute allows an explicit relationship to be made between the result of a calculation and the elements that represent the values that went into the calculation or that otherwise influenced the calculation. The for attribute, if specified, must contain a string consisting of an unordered set of unique space-separated tokens that are case-sensitive, each of which must have the value of an ID of an element in the same Document.

form 속성을 사용해서 폼 소유자와 요소를 명시적으로 연결할 수 있습니다. name 속성은 요소의 이름을 나타냅니다.

The form attribute is used to explicitly associate the output element with its form owner. The name attribute represents the element's name.

The element has a value mode flag which is either value or default. Initially, the value mode flag must be set to default.

The element also has a default value. Initially, the default value must be the empty string.

When the value mode flag is in mode default, the contents of the element represent both the value of the element and its default value. When the value mode flag is in mode value, the contents of the element represent the value of the element only, and the default value is only accessible using the defaultValue IDL attribute.

Whenever the element's descendants are changed in any way, if the value mode flag is in mode default, the element's default value must be set to the value of the element's textContent IDL attribute.

The reset algorithm for output elements is to set the element's value mode flag to default and then to set the element's textContent IDL attribute to the value of the element's default value (thus replacing the element's child nodes).

output . value [ = value ]

요소의 현재 값을 반환합니다.

Returns the element's current value.

값을 변경하기 위해 사용할 수 있습니다.

Can be set, to change the value.

output . defaultValue [ = value ]

요소의 현재 기본값을 반환합니다.

Returns the element's current default value.

기본값을 변경하기 위해 사용할 수 있습니다.

Can be set, to change the default value.

output . type

문자열 "output"을 반환합니다.

Returns the string "output".

The value IDL attribute must act like the element's textContent IDL attribute, except that on setting, in addition, before the child nodes are changed, the element's value mode flag must be set to value.

The defaultValue IDL attribute, on getting, must return the element's default value. On setting, the attribute must set the element's default value, and, if the element's value mode flag is in the mode default, set the element's textContent IDL attribute as well.

The type attribute must return the string "output".

The htmlFor IDL attribute must reflect the for content attribute.

The willValidate, validity, and validationMessage attributes, and the checkValidity() and setCustomValidity() methods, are part of the constraint validation API. The labels attribute provides a list of the element's labels. The form and name IDL attributes are part of the element's forms API.

Constraint validation: output elements are always barred from constraint validation.

간단한 계산기는 계산 결과를 보여주기 위해 output을 사용할 수 있습니다:

A simple calculator could use output for its display of calculated results:

<form onsubmit="return false">
 <input name=a type=number step=any> +
 <input name=b type=number step=any> =
 <output onforminput="value = a.valueAsNumber + b.valueAsNumber"></output>
</form>

4.10.16 The progress element

ISSUE-96 (progress) blocks progress to Last Call

요소가 속하는 범주Categories
플로우 컨텐츠Flow content
구문 컨텐츠Phrasing content
레이블을 붙일 수 있는 폼 관련 요소Labelable form-associated element.
이 요소가 사용될 수 있는 문맥:Contexts in which this element can be used

구문 컨텐츠가 사용될 수 있는 곳

Where phrasing content is expected.

이 요소가 포함할 수 있는 것:Content model

구문 컨텐츠. 하지만 progress 요소를 자손으로 가질 수는 없습니다.

Phrasing content, but there must be no progress element descendants.

요소에 사용할 수 있는 속성:Content attributes
전역 속성Global attributes
value
max
form
DOM interface:
interface HTMLProgressElement : HTMLElement {
           attribute double value;
           attribute double max;
  readonly attribute double position;
  readonly attribute HTMLFormElement form;
  readonly attribute NodeList labels;
};

progress 요소는 작업의 진척도를 나타냅니다. 이 진척도는 두가지로 구분됩니다 : 작업이 수행되고 있지만 작업이 완료되기 전에는 얼마나 많은 일이 남아있는지 알 수 없는 모호한 경우(예를 들어 원격 서버의 응답을 기다려야 한다든가), 아니면 진척도가 0 부터 최대값 사이의 숫자로서 표현될 수 있는 경우입니다.

The progress element represents the completion progress of a task. The progress is either indeterminate, indicating that progress is being made but that it is not clear how much more work remains to be done before the task is complete (e.g. because the task is waiting for a remote host to respond), or the progress is a number in the range zero to a maximum, giving the fraction of work that has so far been completed.

요소가 현재 작업의 진척도를 표현할 수 있는 두개의 속성이 있습니다. value 속성은 작업이 얼마나 진척되었는지를 나타냅니다. max 속성은 전체적으로 얼마나 많은 작업이 필요한지 나타냅니다. 단위는 임의의 것이며 명시되지 않습니다.

There are two attributes that determine the current task completion represented by the element. The value attribute specifies how much of the task has been completed, and the max attribute specifies how much work the task requires in total. The units are arbitrary and not specified.

현재의 값과 최대값을 요소 내부에 인라인으로도 역시 포함시켜서, 구형 사용자 에이전트의 사용자들도 진척도를 알 수 있게 하기를 권합니다.

Authors are encouraged to also include the current value and the maximum value inline as text inside the element, so that the progress is made available to users of legacy user agents.

일종의 자동 작업의 진척도를 보여줄 수 있는 웹 어플리케이션 예제입니다.

Here is a snippet of a Web application that shows the progress of some automated task:

<section>
 <h2>Task Progress</h2>
 <p>Progress: <progress id="p" max=100><span>0</span>%</progress></p>
 <script>
  var progressBar = document.getElementById('p');
  function updateProgress(newValue) {
    progressBar.value = newValue;
    progressBar.getElementsByTagName('span')[0].textContent = newValue;
  }
 </script>
</section>

(예제의 updateProgress() 메서드는 실제 진척도를 반영하기 위해서 다른 코드에서 호출할 것입니다.)

(The updateProgress() method in this example would be called by some other code on the page to update the actual progress bar as the task progressed.)

value와 max 속성은, 명시되었다면, 유효한 부동소수점 숫자값을 가져야 합니다. value 속성을 사용하였다면, 그 값은 0 이상이어야 하고, max의 값 이하여야 합니다. 만약 max 속성이 명시되지 않았다면 1.0 보다 작은 값이어야 합니다. max 속성을 사용하였다면, 그 값은 0보다 커야 합니다.

The value and max attributes, when present, must have values that are valid floating point numbers. The value attribute, if present, must have a value equal to or greater than zero, and less than or equal to the value of the max attribute, if present, or 1.0, otherwise. The max attribute, if present, must have a value greater than zero.

progress 요소는 게이지를 나타내는 것이 아닙니다. 예를 들어, progress 요소를 사용해서 디스크의 남은 공간을 표시하는 것은 잘못된 것입니다. 그러한 목적을 위해서는 meter 요소가 더 적절합니다.

The progress element is the wrong element to use for something that is just a gauge, as opposed to task progress. For instance, indicating disk space usage using progress would be inappropriate. Instead, the meter element is available for such use cases.

User agent requirements: If the value attribute is omitted, then the progress bar is an indeterminate progress bar. Otherwise, it is a determinate progress bar.

If the progress bar is a determinate progress bar and the element has a max attribute, the user agent must parse the max attribute's value according to the rules for parsing floating point number values. If this does not result in an error, and if the parsed value is greater than zero, then the maximum value of the progress bar is that value. Otherwise, if the element has no max attribute, or if it has one but parsing it resulted in an error, or if the parsed value was less than or equal to zero, then the maximum value of the progress bar is 1.0.

If the progress bar is a determinate progress bar, user agents must parse the value attribute's value according to the rules for parsing floating point number values. If this does not result in an error, and if the parsed value is less than the maximum value and greater than zero, then the current value of the progress bar is that parsed value. Otherwise, if the parsed value was greater than or equal to the maximum value, then the current value of the progress bar is the maximum value of the progress bar. Otherwise, if parsing the value attribute's value resulted in an error, or a number less than or equal to zero, then the current value of the progress bar is zero.

UA requirements for showing the progress bar: When representing a progress element to the user, the UA should indicate whether it is a determinate or indeterminate progress bar, and in the former case, should indicate the relative position of the current value relative to the maximum value.

The form attribute is used to explicitly associate the progress element with its form owner.

progress . position

진척도 막대(최대값과 현재값이 알려진 경우)에서 현재값을 최대값으로 나눈 결과를 반환합니다.

For a determinate progress bar (one with known current and maximum values), returns the result of dividing the current value by the maximum value.

그렇지 않을 경우 -1을 반환합니다.

For an indeterminate progress bar, returns −1.

If the progress bar is an indeterminate progress bar, then the position IDL attribute must return −1. Otherwise, it must return the result of dividing the current value by the maximum value.

Similarly, if the progress bar is an indeterminate progress bar, then the value IDL attribute, on getting, must return −1. Otherwise, it must return the current value. On setting, the given value must be converted to the best representation of the number as a floating point number and then the value content attribute must be set to that string.

The max IDL attribute must reflect the content attribute of the same name. The default value for max is 1.0.

The labels attribute provides a list of the element's labels. The form IDL attribute is part of the element's forms API.

4.10.17 The meter element

요소가 속하는 범주Categories
플로우 컨텐츠Flow content
구문 컨텐츠Phrasing content
레이블을 붙일 수 있는 폼 관련 요소Labelable form-associated element.
이 요소가 사용될 수 있는 문맥:Contexts in which this element can be used

구문 컨텐츠가 사용될 수 있는 곳

Where phrasing content is expected.

이 요소가 포함할 수 있는 것:Content model

구문 컨텐츠. 하지만 meter 요소를 자손으로 가질 수는 없습니다.

Phrasing content, but there must be no meter element descendants.

요소에 사용할 수 있는 속성:Content attributes
전역 속성Global attributes
value
min
max
low
high
optimum
form
DOM interface:
interface HTMLMeterElement : HTMLElement {
           attribute double value;
           attribute double min;
           attribute double max;
           attribute double low;
           attribute double high;
           attribute double optimum;
  readonly attribute HTMLFormElement form;
  readonly attribute NodeList labels;
};

meter 요소는 알려진 범위 내에서의 스칼라 측정 또는 분포비율을 나타냅니다. 예를 들어 디스크 사용현황, 쿼리 결과의 관련성, 특정 후보에 대한 투표율 등입니다.

The meter element represents a scalar measurement within a known range, or a fractional value; for example disk usage, the relevance of a query result, or the fraction of a voting population to have selected a particular candidate.

이것을 게이지라고도 합니다.

This is also known as a gauge.

meter 요소는 진척도를 나타내기 위한 것이 아닙니다. 그러한 역할에는 progress 요소가 적합합니다.

The meter element should not be used to indicate progress (as in a progress bar). For that role, HTML provides a separate progress element.

불명확한 범위의 스칼라 측정을 나타내기 위한 것도 아닙니다. 예를 들어 알려진 최대값이 없는 범주의 무게나 높이 등을 나타내기 위해 이 요소를 사용하는 것은 잘못된 것입니다.

The meter element also does not represent a scalar value of arbitrary range — for example, it would be wrong to use this to report a weight, or height, unless there is a known maximum value.

이 요소가 나타내는 게이지의 의미를 파악하기 위해 6개의 속성이 있습니다.

There are six attributes that determine the semantics of the gauge represented by the element.

min 속성은 범위의 최소값, max 속성은 최대값을 나타냅니다. value 속성은 게이지가 표시하는 "측정" 값입니다.

The min attribute specifies the lower bound of the range, and the max attribute specifies the upper bound. The value attribute specifies the value to have the gauge indicate as the "measured" value.

나머지 세개의 속성들은 게이지의 범위를 "낮음", "중간", "높음" 부분으로 분할하고 어떤 부분이 "최적인" 부분인지 지목합니다. low 속성은 "낮은" 범위로 추정될 만한 범위를 명시합니다. high 속성은 "높은" 범위로 추정될만한 범위를 명시합니다. optimum 속성은 "최적인" 범위를 알려줍니다. 이 범위가 "높은" 범위보다 높다면 값은 클수록 좋은 것입니다. 반대로 "낮은" 범위보다 낮다면 값은 작을수록 좋은 것입니다. 두 범위의 사이에 있다면 너무 높거나 낮은 값은 좋지 않음을 나타냅니다.

The other three attributes can be used to segment the gauge's range into "low", "medium", and "high" parts, and to indicate which part of the gauge is the "optimum" part. The low attribute specifies the range that is considered to be the "low" part, and the high attribute specifies the range that is considered to be the "high" part. The optimum attribute gives the position that is "optimum"; if that is higher than the "high" value then this indicates that the higher the value, the better; if it's lower than the "low" mark then it indicates that lower values are better, and naturally if it is in between then it indicates that neither high nor low values are good.

value 속성은 반드시 명시해야 합니다. 나머지 다섯 속성을 사용하였다면 유효한 부동소수점 숫자를 사용하여야 합니다.

Authoring requirements: The value attribute must be specified. The value, min, low, high, max, and optimum attributes, when present, must have values that are valid floating point numbers.

속성의 값에는 다음과 같은 추가적인 제약이 있습니다.

In addition, the attributes' values are further constrained:

valuevalue 속성의 숫자라고 합니다.

Let value be the value attribute's number.

min 속성을 명시했다면 minimum이 그 값입니다. 명시하지 않았으면 0으로 둡니다.

If the min attribute attribute is specified, then let minimum be that attribute's value; otherwise, let it be zero.

max 속성을 명시했다면 maximum이 그 값입니다. 명시하지 않았다면 1.0으로 둡니다.

If the max attribute attribute is specified, then let maximum be that attribute's value; otherwise, let it be 1.0.

다음의 부등호 관계가 반드시 지켜져야합니다.

The following inequalities must hold, as applicable:

최소값과 최대값을 명시하지 않았다면 범위는 0부터 1까지인 것으로 간주하며 따라서 value 역시 그 범위 안에 있어야 합니다.

If no minimum or maximum is specified, then the range is assumed to be 0..1, and the value thus has to be within that range.

meter 요소를 지원하지 않는 사용자 에이전트를 쓰는 사람을 위해 게이지의 상태를 텍스트로도 나타낼 것을 권장합니다.

Authors are encouraged to include a textual representation of the gauge's state in the element's contents, for users of user agents that do not support the meter element.

3/4 만큼 채워진 3개의 게이지를 보여줍니다.

The following examples show three gauges that would all be three-quarters full:

Storage space usage: <meter value=6 max=8>6 blocks used (out of 8 total)</meter>
Voter turnout: <meter value=0.75><img alt="75%" src="graph75.png"></meter>
Tickets sold: <meter min="0" max="100" value="75"></meter>

이 예제는 범위를 명시하지 않았기 때문에 요소를 잘못 사용한 겁니다. (범위가 없으므로 기본 최대값은 1인데, 두 게이지 모두 이 범위를 벗어났습니다.)

The following example is incorrect use of the element, because it doesn't give a range (and since the default maximum is 1, both of the gauges would end up looking maxed out):

<p>The grapefruit pie had a radius of <meter value=12>12cm</meter>
and a height of <meter value=2>2cm</meter>.</p> <!-- BAD! -->

올바르게 표현하려면 meter 요소를 사용하지 않거나 정해진 범위를 갖는 meter 요소를 사용해서 컨텍스트의 값을 다른 게이지와 비교할 수 있도록 해야 합니다.

Instead, one would either not include the meter element, or use the meter element with a defined range to give the dimensions in context compared to other pies:

<p>The grapefruit pie had a radius of 12cm and a height of
2cm.</p>
<dl>
 <dt>Radius: <dd> <meter min=0 max=20 value=12>12cm</meter>
 <dt>Height: <dd> <meter min=0 max=10 value=2>2cm</meter>
</dl>

meter 요소에서 명시적으로 단위를 나타낼 방법은 없습니다. title 속성에 단위를 텍스트로 특별한 형식 없이 기록해도 무방합니다.

There is no explicit way to specify units in the meter element, but the units may be specified in the title attribute in free-form text.

위의 예제는 다음과 같이 단위를 나타낼 수 있습니다.

The example above could be extended to mention the units:

<dl>
 <dt>Radius: <dd> <meter min=0 max=20 value=12 title="centimeters">12cm</meter>
 <dt>Height: <dd> <meter min=0 max=10 value=2 title="centimeters">2cm</meter>
</dl>

User agent requirements: User agents must parse the min, max, value, low, high, and optimum attributes using the rules for parsing floating point number values.

User agents must then use all these numbers to obtain values for six points on the gauge, as follows. (The order in which these are evaluated is important, as some of the values refer to earlier ones.)

The minimum value

If the min attribute is specified and a value could be parsed out of it, then the minimum value is that value. Otherwise, the minimum value is zero.

The maximum value

If the max attribute is specified and a value could be parsed out of it, the maximum value is that value. Otherwise, the maximum value is 1.0.

If the maximum value would be less than the minimum value, then the maximum value is actually the same as the minimum value.

The actual value

If the value attribute is specified and a value could be parsed out of it, then that value is the actual value. Otherwise, the actual value is zero.

If the actual value would be less than the minimum value, then the actual value is actually the same as the minimum value.

If, on the other hand, the actual value would be greater than the maximum value, then the actual value is the maximum value.

The low boundary

If the low attribute is specified and a value could be parsed out of it, then the low boundary is that value. Otherwise, the low boundary is the same as the minimum value.

If the low boundary is then less than the minimum value, then the low boundary is actually the same as the minimum value. Similarly, if the low boundary is greater than the maximum value, then it is actually the maximum value instead.

The high boundary

If the high attribute is specified and a value could be parsed out of it, then the high boundary is that value. Otherwise, the high boundary is the same as the maximum value.

If the high boundary is then less than the low boundary, then the high boundary is actually the same as the low boundary. Similarly, if the high boundary is greater than the maximum value, then it is actually the maximum value instead.

The optimum point

If the optimum attribute is specified and a value could be parsed out of it, then the optimum point is that value. Otherwise, the optimum point is the midpoint between the minimum value and the maximum value.

If the optimum point is then less than the minimum value, then the optimum point is actually the same as the minimum value. Similarly, if the optimum point is greater than the maximum value, then it is actually the maximum value instead.

All of which will result in the following inequalities all being true:

UA requirements for regions of the gauge: If the optimum point is equal to the low boundary or the high boundary, or anywhere in between them, then the region between the low and high boundaries of the gauge must be treated as the optimum region, and the low and high parts, if any, must be treated as suboptimal. Otherwise, if the optimum point is less than the low boundary, then the region between the minimum value and the low boundary must be treated as the optimum region, the region between the low boundary and the high boundary must be treated as a suboptimal region, and the region between the high boundary and the maximum value must be treated as an even less good region. Finally, if the optimum point is higher than the high boundary, then the situation is reversed; the region between the high boundary and the maximum value must be treated as the optimum region, the region between the high boundary and the low boundary must be treated as a suboptimal region, and the remaining region between the low boundary and the minimum value must be treated as an even less good region.

UA requirements for showing the gauge: When representing a meter element to the user, the UA should indicate the relative position of the actual value to the minimum and maximum values, and the relationship between the actual value and the three regions of the gauge.

다음의 마크업은

The following markup:

<h3>Suggested groups</h3>
<menu type="toolbar">
 <a href="?cmd=hsg" onclick="hideSuggestedGroups()">Hide suggested groups</a>
</menu>
<ul>
 <li>
  <p><a href="/group/comp.infosystems.www.authoring.stylesheets/view">comp.infosystems.www.authoring.stylesheets</a> -
     <a href="/group/comp.infosystems.www.authoring.stylesheets/subscribe">join</a></p>
  <p>Group description: <strong>Layout/presentation on the WWW.</strong></p>
  <p><meter value="0.5">Moderate activity,</meter> Usenet, 618 subscribers</p>
 </li>
 <li>
  <p><a href="/group/netscape.public.mozilla.xpinstall/view">netscape.public.mozilla.xpinstall</a> -
     <a href="/group/netscape.public.mozilla.xpinstall/subscribe">join</a></p>
  <p>Group description: <strong>Mozilla XPInstall discussion.</strong></p>
  <p><meter value="0.25">Low activity,</meter> Usenet, 22 subscribers</p>
 </li>
 <li>
  <p><a href="/group/mozilla.dev.general/view">mozilla.dev.general</a> -
     <a href="/group/mozilla.dev.general/subscribe">join</a></p>
  <p><meter value="0.25">Low activity,</meter> Usenet, 66 subscribers</p>
 </li>
</ul>

이렇게 표현될 수 있습니다.

Might be rendered as follows:

With the <meter> elements rendered as inline green bars of varying lengths.

사용자 에이전트는 title 속성의 값과 다른 속성을 결합하여 컨텍스트에 밀접한 도움말을 제공하거나 실제 값을 자세히 설명하는 인라인 텍스트를 제공할 수 있습니다.

User agents may combine the value of the title attribute and the other attributes to provide context-sensitive help or inline text detailing the actual values.

예를 들어 다음의 마크업은

For example, the following snippet:

<meter min=0 max=60 value=23.2 title=seconds></meter>

사용자 에이전트로 하여금 첫번째 줄에 "60 중 23.2", 그리고 두번째 줄에 "초" 라고 표시된 툴팁을 게이지에 표시하게 할 수 있을 것입니다.

...might cause the user agent to display a gauge with a tooltip saying "Value: 23.2 out of 60." on one line and "seconds" on a second line.

form 속성을 사용해서 meter 요소와 그 폼 소유자를 명시적으로 연결할 수 있습니다.

The form attribute is used to explicitly associate the meter element with its form owner.

The value IDL attribute, on getting, must return the actual value. On setting, the given value must be converted to the best representation of the number as a floating point number and then the value content attribute must be set to that string.

The min, max, low, high, and optimum IDL attributes must reflect the respective content attributes of the same name.

The labels attribute provides a list of the element's labels. The form IDL attribute is part of the element's forms API.

게이지 요소에 대해 지역화된 폴백 요소 또는 인쇄하기 좋은 텍스트를 제공하는 방법입니다.역주

The following example shows how a gauge could fall back to localized or pretty-printed text.

<p>Disk usage: <meter min=0 value=170261928 max=233257824>170 261 928 bytes used
out of 233 257 824 bytes available</meter></p>

지역화라는 것은 170261928에 천 단위 쉼표를 붙인 것입니다. 만 단위 쉼표를 붙여야 쉽게 이해하는 지역이 있을 수도 있으니까요. 폴백이라 함은, meter 요소를 지원하지 않는 브라우저에서 디스크 사용량이 텍스트로 나타날 것임을 뜻합니다. 돌아가기