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

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
====== HTML Forms - HTML Forms ======
<WRAP left notice 70%>
  * description : HTML Forms - HTML Forms
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-05-11
</WRAP>
<WRAP clear></WRAP>
\\
=====The Source of this article===== 
[[https://www.w3schools.com/html/html_forms.asp|HTML Forms]]\\
\\
%%HTML form%%은 사용자의 입력정보를 수집하기 위해 사용합니다.\\
사용자 입력 정보는 대부분 처리를 위해 서버로 전송됩니다.\\

====Example====
<code html>
<!DOCTYPE html>
<html>
<body>

  <h2>HTML Forms</h2>

  <form action="/action_page.php">
    <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="Doe"><br><br>
    <input type="submit" value="Submit">
  </form>

  <p>
    If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".
  </p>

</body>
</html>
</code>
\\
=====The <form> Element=====
%%HTML ''<form>''%% 요소는 사용자 입력을 위한 %%HTML form%%을 만들기 위해 사용합니다.\\
\\
<code html>
<form>
.
form elements
.
</form>
</code> 
\\
''%%<form>%%'' 요소는 텍스트 필드, 체크 박스, 라디오 버튼, 제출 버튼 등과 같은\\ 
다양한 유형의 입력 요소에 대한 컨테이너입니다.\\

====The <input> Element====
%%HTML%% ''%%<input>%%'' 요소는 가장 많이 사용되는 폼 요소입니다.\\
\\
''%%<input>%%'' 요소는 ''%%type%%'' 속성에 따라 다양한 방법으로 표시될 수 있습니다.\\
\\
| Type                     | Description                                              |
^ <input type="text">      ^ 한 줄 입력 필드를 표시합니다                              ^
| <input type="radio">     | 라디오 버튼을 표시합니다 (여러 선택 항목 중 하나를 선택).  |
^ <input type="checkbox">  ^ 체크박스를 표시합니다 (0개 이상의 항목을 선택).            ^
| <input type="submit">    | 제출 버튼을 표시합니다 (양식 제출 용)                      |
^ <input type="button">    ^ 클릭 가능한 버튼을 표시합니다.                             ^
\\
=====Text Fields=====
''%%<input type="text">%%''는 텍스트 입력을 위한 한 줄 입력 필드를 정의합니다.\\

====Example====
텍스트를 위한 입력 필드를 가진 폼:\\
<code html>
<body>

  <h2>Text Input Fields</h2>

  <form>
    <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="Doe">
  </form>

  <p>Note that the form itself is not visible.</p>

  <p>Also note that the default width of text input fields is 20 characters.</p>
  
</body>
</code>

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

=====Radio Buttons=====
''%%<input type="radio">%%''는 라디오 버튼을 정의합니다.\\
\\
라디오 버튼을 사용하면 제한된 수의 선택 항목 중 하나를 선택할 수 있습니다.\\

====Example====
라디오 버튼이 있는 폼\\
<code html>
<body>

  <h2>Radio Buttons</h2>

  <form>
    <input type="radio" id="male" name="gender" value="male">
    <label for="male">Male</label><br>

    <input type="radio" id="female" name="gender" value="female">
    <label for="female">female</label><br>

    <input type="radio" id="other" name="gender" value="other">
    <label for="other">Other</label>
  </form>

</body>
</code>

=====Checkboxes=====
''%%<input type="checkbox">%%''는 체크박스를 정의합니다.\\
\\
체크 박스를 사용하면 제한된 수의 선택 항목 중 0 개 이상의 옵션을 선택할 수 있습니다.\\

====Example====
체크박스가 있는 폼\\
<code html>
<body>

  <h2>Checkboxes</h2>
  <p>The <strong>input type="checkbox</strong> defines a checkbox:</p>

  <form action="/action_page.php">
    <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
    <label for="vehicle1"> I have a bike</label><br>

    <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
    <label for="vehicle2"> I have a car</label><br>

    <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
    <label for="vehicle3"> I have a boat</label><br><br>

    <input type="submit" value="submit">
  </form>
</body>
</code>
\\
=====The Submit Button=====
''%%<input type="submit">%%''은 폼-핸들러(form-handler)에 폼 데이터(form ddata)를 제출하기 위한 버튼을 정의합니다.\\
\\
폼-핸들러는 일반적으로 입력 데이터를 처리하기 위한 스크립트가 있는 서버의 파일입니다.\\
\\
폼-핸들러는 폼의 ''action'' 속성에 지정됩니다.\\

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

  <h2>HTML Forms</h2>

  <form action="/action_page.php">
    <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="Doe"><br><br>

    <input type="submit" value="submit">

    <p>
      If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".
    </p>
  </form>

</body>
</code>
\\
=====The Name Attribute for <input>=====
각 입력 필드에는 제출할 ''%%name%%'' 속성이 있어야 합니다.\\
\\
''%%name%%'' 속성이 생략되면, 입력 필드의 값이 전혀 전송되지 않습니다.\\

====Example====
다음 예제는 "First name" 입력 필드의 값을 제출하지 않습니다.\\
<code html>
<body>

  <h2>The name Attribute</h2>

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

    <input type="submit" value="submit">

    <p>
      If you click the "Submit" button, the form-data will be sent to a paga called "/action.page.php".
    </p>

    <p>
      Notice that the value of the "First name" field will bot be submitted, because the input element does not have a name attribute.
    </p>
  </form>

</body>
</code>














































{{tag>오션 HTML Block and Inline Elements}}
문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

문서 도구
