====== HTML Forms - HTML Form Elements ====== * description : HTML Forms - HTML Form Elements * author : 오션 * email : shlim@repia.com * lastupdate : 2021-05-27 \\ =====The Source of this article===== [[https://www.w3schools.com/html/html_form_elements.asp|HTML Form Elements]]\\ =====The HTML

Elements===== %%HTML%% ''%%%%'' 요소는 다음 폼(form, 양식) 요소 중 하나 이상을 포함 할 수 있습니다.\\ \\ ''%%%%'', ''%%%%'', ''%%

%%'', ''%%<button>%%'', ''%%<fieldset>%%'', ''%%<legend>%%'', ''%%<datalist>%%'', ''%%<output>%%'', ''%%<option>%%'', ''%%<optgroup>%%''\\

=====The <input> Element=====
가장 많이 사용되는 폼 요소 중 하나는 ''%%<input>%%'' 요소입니다.\\
\\
''%%<input>%%'' 요소는 ''%%type%%'' 속성에 따라 여러 가지 방법으로 표시될 수 있습니다.\\

====Example====
<code html>
<body>

<h2>The input Element</h2>

<form action="/action_page.php">
    <label for="fname">First name</label><br>
    <input type="text" id="fname" name="fname"><br><br>
    <input type="submit" value="submit">
  </form>

</body>
</code>
\\
''%%type%%'' 속성의 모든 다른 값은 다음 챕터인 [[https://www.w3schools.com/html/html_form_input_types.asp|HTML Input Types]]에서 다룹니다.\\

=====The <label> Element=====
''%%<label>%%'' 요소는 여러 폼 요소에 대한 레이블을 정의합니다.\\
\\
''%%<label>%%'' 요소는 스크린 리더기 사용자에게 유용합니다. 사용자가 입력 요소에 집중할 때 스크린 리더기가 레이블을 소리내어 읽어주기 때문입니다.\\
\\
''%%<label>%%'' 요소는 또한 매우 작은 영역 (예:라디오 버튼 또는 체크박스)을 클릭하는 데 어려움이 있는 사용자에게 도움이 됩니다. 사용자가 ''%%<label>%%'' 요소 내의 텍스트를 클릭하면, 라디오 버튼/체크박스를 토글되기 때문입니다.\\
\\
''%%<label>%%'' 태그의 ''%%for%%'' 속성은 ''%%<input>%%'' 요소와 함께 바인딩 하려면 ''%%<input>%%'' 요소의 ''%%id%%'' 속성과 동일해야 합니다.\\

=====The <select> Element=====
''%%<select>%%'' 요소는 드롭다운 목록(drop-down list)을 정의합니다.\\
<code html>
<body>

<h2>The select Element</h2>

<p>The select element defines a drop-down list:</p>

<form action="/action_page.php">
    <label for="cars">Choose a car</label>
    <select name="cars" id="cars">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="fiat">Fiat</option>
      <option value="audi">Audi</option>
    </select>
    <input type="submit">
  </form>

</body>
</code>

{{:wiki:html:html_note:select-dropdown.png?400|}}
\\
''%%<option>%%'' 요소는 선택할 수 있는 옵션을 정의합니다.\\
\\
기본적으로, 드롭 다운 목록의 첫 번째 항목이 선택됩니다.\\
\\
미리 선택된 옵션을 정의하려면, 선택한 속성을 아래의 예제처럼 옵션에 추가합니다.\\

====Example====
<code html>
<body>

<h2>Pre-selected Option</h2>

<p>You can preselect an option with the selected attributes:</p>

<form action="/action_page.php">
    <label for="cars">Choose a car</label>
    <select name="cars" id="cars">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="fiat" selected>Fiat</option>
      
      <option value="audi">Audi</option>
    </select>
    <input type="submit">
  </form>

</body>
</code>

=====Visible Values:=====
보여지는 값의 개수를 지정하려면 ''%%size%%'' 속섣을 사용합니다.\\

====Example====
<code html>
<body>

<h2>Visible Option Values</h2>

<p>Use the size attribute to specify the number of visible values.</p>

<form action="/action_page.php">
    <label for="cars">Choose a car:</label>
    <select name="cars" id="cars" size="3">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="fiat">Fiat</option>
      <option value="audi">Audi</option>
    </select><br><br>
    <input type="submit">
    
  </form>

</body>
</code>

=====Allow Multiple Selections:=====
사용자가 하나 이상의 값을 선택하게 하려면 ''%%multiple%%'' 속성을 사용합니다:\\

====Example====
<code html>
<body>

<h2>Allow Multiple Selections</h2>

<p>Use the multiple attribute to allow the user to select more than one value.</p>

<form action="/action_page.php">
    <label for="cars">Choose a car:</label>
    <select name="cars" id="cars" size="4" multiple>
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="fiat">Fiat</option>
      <option value="audi">Audi</option>
    </select><br><br>
    <input type="submit">
  </form>
  
  <p>Hold down the Ctrl (Windows) / Command (Mac) button to select multiple options.</p>

</body>
</code>

=====The <textarea> Element=====
''%%<textarea>%%'' 요소는 여러 줄 입력 필드 (텍스트 영역)를 정의합니다.\\

====Example====
<code html>
<body>

<h2>Textarea</h2>
  <p>The textarea element defines a multi-line input field.</p>

<form action="/action_page.php">
    <textarea name="message" cols="30" rows="10">The cat was playing in the garden.

\\ ''%%rows%%'' 속성은 텍스트 영역에 표시되는 줄 수를 지정합니다.\\ \\ ''%%cols%%'' 속성은 텍스트 영역의 보이는 너비를 지정합니다.\\ \\ 위의 HTML 코드가 브라우저에 표시되는 방법은 다음과 같습니다.\\ {{:wiki:html:html_note:textarea.png?400|}} \\ %%CSS%%를 사용하여 텍스트 영역의 크기도 정의할 수 있습니다.\\ ====Example====




  Styling Textarea

  Use CSS to change the size of the textarea:

  
    The cat was playing in the garden.

=====The

\\ Note: 버튼 요소의 type 속성을 항상 지정하십시오. 다른 브라우저는 버튼 요소에 대해 다른 기본 유형을 사용할 수 있습니다. =====The

and Element===== ''%%

%%'' 요소는 폼(form)에서 관련 데이터를 그룹화 하는 데 사용됩니다.\\ \\ ''%%%%'' 요소는 ''%%

%%'' 요소의 캡션(caption, 설명)을 정의합니다.\\ ====Example====




  Grouping Form Data with Fieldset

  
    The fieldset element is used to group related data in a form, and the legend element defines a caption for the fieldset element.
  

  
    
      Personalia:
      First name:

      

      Last name

=====The Element===== ''%%%%'' 요소는 ''%%%%'' 요소에 대해 미리 정의된 옵션 목록을 지정합니다.\\ \\ 사용자는 데이터를 입력할 때 미리 정의된 옵션의 드롭다운 목록을 볼 수 있습니다.\\ \\ ''%%%%'' 요소의 ''%%%%'' 속성은 ''%%%%'' 요소의 ''%%id%%'' 속성을 참조해야 합니다.\\ ====Example====




  The datalist Element

  The datalist element specifies a list of pre-defined options for an input element.

  
    
    
      
      
      
      
      
    
    
  

  Note: The datalist tag is not supported in Safari prior version 12.1

\\ {{:wiki:html:html_note:datalist-element.png?400|}}\\ =====The Element===== ''%%%%'' 요소는 계산 결과를 나타냅니다 (예:스크립트에서 수행한 계산)\\ ====Example==== 계산을 수행하고 결과를 ''%%%%'' 요소에 표시합니다.\\




  The output Element
  The output element represents the result of a calculation

  
    0
    
    100 +
    
    =
    
    


    
  

  Note: The output element is not supported in Edge prior version 13.

\\ {{:wiki:html:html_note:output-element.png?400|}}\\ \\ =====HTML Form Elements===== ^ Tag ^ Description ^ | %%

%% | 사용자 입력을 위한 %%HTML%% 폼을 정의합니다 | | %%%% | 입력 컨트롤을 정의합니다 | | %%

Styling Textarea

The button Element

Grouping Form Data with Fieldset

The datalist Element

The output Element