차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

--- wiki:html:html_note:html_form_elements [2021/05/27 10:22]
emblim98
+++ wiki:html:html_note:html_form_elements [2023/01/13 18:44] (현재)
@@ 줄 178: / 줄 178: @@
 \\
 위의 HTML 코드가 브라우저에 표시되는 방법은 다음과 같습니다.\\
-{{:wiki:html:html_note:textarea.png?200|}}
+{{:wiki:html:html_note:textarea.png?400|}}
 \\
 %%CSS%%를 사용하여 텍스트 영역의 크기도 정의할 수 있습니다.\\
@@ 줄 254: / 줄 254: @@
 ====Example====
 <code html>
+<body>
-</code>
+  <h2>The datalist Element</h2>
+  <p>The datalist element specifies a list of pre-defined options for an input element.</p>
+  <form action="/action_page.php">
+    <input list="browsers" name="browsers">
+    <datalist id="browsers">
+      <option value="Internet Explorer"></option>
+      <option value="Firefox"></option>
+      <option value="Chrome"></option>
+      <option value="Opera"></option>
+      <option value="Safari"></option>
+    </datalist>
+    <input type="submit" value="Submit">
+  </form>
+  <p><b>Note:</b> The datalist tag is not supported in Safari prior version 12.1</p>
+</body>
+</code>
+\\
+{{:wiki:html:html_note:datalist-element.png?400|}}\\
+=====The <output> Element=====
+''%%<output>%%'' 요소는 계산 결과를 나타냅니다 (예:스크립트에서 수행한 계산)\\
+====Example====
+계산을 수행하고 결과를 ''%%<output>%%'' 요소에 표시합니다.\\
+<code html>
+<body>
+  <h2>The output Element</h2>
+  <p>The output element represents the result of a calculation</p>
+  <form action="/action_page.php" oninput="x.value=parseInt(a.value)+parseInt(b.value)">
+    <input type="range" id="a" name="a" value="50">
++
+    <input type="number" id="b" name="b" value="50">
+    =
+    <output name="x" for="a b"></output>
+    <br><br>
+    <input type="submit" value="Submit">
+  </form>
+  <p><strong>Note:</strong> The output element is not supported in Edge prior version 13.</p>
+</body>
+</code>
+\\
+{{:wiki:html:html_note:output-element.png?400|}}\\
+\\
+=====HTML Form Elements=====
+^ Tag             ^ Description                           ^
+| %%<form>%%      | 사용자 입력을 위한 %%HTML%% 폼을 정의합니다          |
+| %%<input>%%     | 입력 컨트롤을 정의합니다                         |
+| %%<textarea>%%  | 여러 줄의 입력 컨트롤(텍스트 영역)을 정의합니다.          |
+| %%<label>%%     | %%<input>%% 요소에 대한 레이블을 정의합니다         |
+| %%<fieldset>%%  | 폼에서 관련된 요소들을 그룹화 합니다.                 |
+| %%<legned>%%    | %%<filedset>%% 요소에 대한 캡션(설명)을 정의합니다.  |
+| %%<select>%%    | 드롭다운 목록을 정의합니다.                       |
+| %%<optgroup>%%  | 드롭다운 목록에서 관련 옵션 그룹을 정의합니다             |
+| %%<option>%%    | 드롭다운 목록에서 옵션을 정의합니다                   |
+| %%<button>%%    | 클릭할 수 있는 버튼을 정의합니다                    |
+| %%<datalist>%%  | 사용자 입력 컨트롤을 위한 사전 정의된 옵션 목록을 지정합니다.   |
+| %%<output>%%    | 계산 결과를 정의합니다.                         |
+\\
+사용 가능한 모든 %%HTML%% 태그의 전체 목록을 보려면, [[https://www.w3schools.com/tags/default.asp|HTML Element Reference]]를 방문하십시오.\\
 {{tag>오션 HTML Form Elements}}

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

차이

문서 도구