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

The HTML <form> Elements

HTML <form> 요소는 다음 폼(form, 양식) 요소 중 하나 이상을 포함 할 수 있습니다.

<input>, <label>, <select>, <textarea>, <button>, <fieldset>, <legend>, <datalist>, <output>, <option>, <optgroup>

The <input> Element

가장 많이 사용되는 폼 요소 중 하나는 <input> 요소입니다.

<input> 요소는 type 속성에 따라 여러 가지 방법으로 표시될 수 있습니다.

Example

<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>

type 속성의 모든 다른 값은 다음 챕터인 HTML Input Types에서 다룹니다.

The <label> Element

<label> 요소는 여러 폼 요소에 대한 레이블을 정의합니다.

<label> 요소는 스크린 리더기 사용자에게 유용합니다. 사용자가 입력 요소에 집중할 때 스크린 리더기가 레이블을 소리내어 읽어주기 때문입니다.

<label> 요소는 또한 매우 작은 영역 (예:라디오 버튼 또는 체크박스)을 클릭하는 데 어려움이 있는 사용자에게 도움이 됩니다. 사용자가 <label> 요소 내의 텍스트를 클릭하면, 라디오 버튼/체크박스를 토글되기 때문입니다.

<label> 태그의 for 속성은 <input> 요소와 함께 바인딩 하려면 <input> 요소의 id 속성과 동일해야 합니다.

The <select> Element

<select> 요소는 드롭다운 목록(drop-down list)을 정의합니다.

<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>

<option> 요소는 선택할 수 있는 옵션을 정의합니다.

기본적으로, 드롭 다운 목록의 첫 번째 항목이 선택됩니다.

미리 선택된 옵션을 정의하려면, 선택한 속성을 아래의 예제처럼 옵션에 추가합니다.

Example

<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>
      <!-- 옵션에서 fiat가 먼저 보여집니다 -->
      <option value="audi">Audi</option>
    </select>
    <input type="submit">
  </form>
 
</body>

Visible Values:

보여지는 값의 개수를 지정하려면 size 속섣을 사용합니다.

Example

<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">
    <!-- 4개의 옵션 중 세 개 옵션이 보이는 스크롤 창이 생깁니다. -->
  </form>
 
</body>

Allow Multiple Selections:

사용자가 하나 이상의 값을 선택하게 하려면 multiple 속성을 사용합니다:

Example

<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>
  <!-- select 태그에 multiple 속성을 적용하면, Ctrl을 누른 채로 여러 개의 옵션을 선택할 수 있습니다. -->
  <p>Hold down the Ctrl (Windows) / Command (Mac) button to select multiple options.</p>
 
</body>

The <textarea> Element

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

Example

<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.</textarea>
    <br><br>
    <input type="submit">
  </form>
 
</body>

rows 속성은 텍스트 영역에 표시되는 줄 수를 지정합니다.

cols 속성은 텍스트 영역의 보이는 너비를 지정합니다.

위의 HTML 코드가 브라우저에 표시되는 방법은 다음과 같습니다.

CSS를 사용하여 텍스트 영역의 크기도 정의할 수 있습니다.

Example

<body>
 
  <h2>Styling Textarea</h2>
 
  <p>Use CSS to change the size of the textarea:</p>
 
  <form action="/action_page.php">
    <textarea name="message" style="width:200px; height:600px;">The cat was playing in the garden.</textarea>
    <br>
    <input type="submit">
  </form>
 
</body>

The <button> Element

<button> 요소는 클릭할 수 있는 버튼을 정의합니다.

Example

<body>
 
  <h2>The button Element</h2>
 
  <button type="button" onclick="alert('Hello Darling~~')">Click Me!</button>
 
</body>

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

The <fieldset> and <legend> Element

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

<legend> 요소는 <fieldset> 요소의 캡션(caption, 설명)을 정의합니다.

Example

<body>
 
  <h2>Grouping Form Data with Fieldset</h2>
 
  <p>
    The fieldset element is used to group related data in a form, and the legend element defines a caption for the fieldset element.
  </p>
 
  <form action="/action_page.php">
    <fieldset>
      <legend>Personalia:</legend>
      <label for="fname">First name:</label><br>
      <input type="text" id="fname" name="fname" value="John"><br>
      <label for="lname">Last name</label><br>
      <input type="text" id="lname" name="lname" value="Smith"><br><br>
      <input type="submit" value="Submit">
    </fieldset>
  </form>
 
</body>

The <datalist> Element

<datalist> 요소는 <input> 요소에 대해 미리 정의된 옵션 목록을 지정합니다.

사용자는 데이터를 입력할 때 미리 정의된 옵션의 드롭다운 목록을 볼 수 있습니다.

<input> 요소의 <list> 속성은 <datalist> 요소의 id 속성을 참조해야 합니다.

Example

<body>
 
  <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>

The <output> Element

<output> 요소는 계산 결과를 나타냅니다 (예:스크립트에서 수행한 계산)

Example

계산을 수행하고 결과를 <output> 요소에 표시합니다.

<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)">
    0
    <input type="range" id="a" name="a" value="50">
    100 +
    <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>

HTML Form Elements

Tag	Description
<form>	사용자 입력을 위한 HTML 폼을 정의합니다
<input>	입력 컨트롤을 정의합니다
<textarea>	여러 줄의 입력 컨트롤(텍스트 영역)을 정의합니다.
<label>	<input> 요소에 대한 레이블을 정의합니다
<fieldset>	폼에서 관련된 요소들을 그룹화 합니다.
<legned>	<filedset> 요소에 대한 캡션(설명)을 정의합니다.
<select>	드롭다운 목록을 정의합니다.
<optgroup>	드롭다운 목록에서 관련 옵션 그룹을 정의합니다
<option>	드롭다운 목록에서 옵션을 정의합니다
<button>	클릭할 수 있는 버튼을 정의합니다
<datalist>	사용자 입력 컨트롤을 위한 사전 정의된 옵션 목록을 지정합니다.
<output>	계산 결과를 정의합니다.

사용 가능한 모든 HTML 태그의 전체 목록을 보려면, HTML Element Reference를 방문하십시오.

오션, HTML, Form, Elements

목차

HTML Forms - HTML Form Elements

The Source of this article

The HTML <form> Elements

The <input> Element

Example

The <label> Element

The <select> Element

Example

Visible Values:

Example

Allow Multiple Selections:

Example

The <textarea> Element

Example

Example

The <button> Element

Example

The <fieldset> and <legend> Element

Example

The <datalist> Element

Example

The <output> Element

Example

HTML Form Elements