[R]HTML 양식HTML Forms

HTML Form Example

HTML 양식 예제

First name:

Last name:

Try it Yourself »

---

The <form> Element

<form> 요소

The HTML <form> element defines a form that is used to collect user input:

HTML <form>요소는 사용자 입력을 수집하는 데 사용되는 양식을 정의합니다.

<form>
.
form elements
.
</form>

An HTML form contains form elements.

HTML 양식은 양식 요소를 포함 합니다 .

Form elements are different types of input elements, like text fields, checkboxes, radio buttons, submit buttons, and more.

양식 요소는 텍스트 필드, 체크 박스, 라디오 버튼, 제출 버튼 등과 같은 입력 요소의 다른 유형입니다.

---

The <input> Element

<input> 요소

The <input> element is the most important form element.

<input>요소는 가장 중요한 형태 요소입니다.

The <input> element can be displayed in several ways, depending on the type attribute.

<input>요소는에 따라 여러 가지 방법으로 표시 할 수있는 유형의 속성.

Here are some examples:

여기 몇 가지 예가 있어요.

Type	Description
<input type="text">	Defines a one-line text input field  한 줄짜리 텍스트 입력 필드를 정의합니다.
<input type="radio">	Defines a radio button (for selecting one of many choices)  라디오 버튼을 정의합니다 (많은 선택 사항 중 하나를 선택하기 위해).
<input type="submit">	Defines a submit button (for submitting the form)  제출 단추를 정의합니다 (양식 제출 용).

You will learn a lot more about input types later in this tutorial.

이 튜토리얼의 뒷부분에서 입력 유형에 대해 더 많이 배웁니다.

---

Text Input

텍스트 입력

<input type="text"> defines a one-line input field for text input:

<input type="text">텍스트 입력을 위한 한 줄 입력 필드를 정의합니다 .

Example

<form>
  First name:<br>
  <input type="text" name="firstname"><br>
  Last name:<br>
  <input type="text" name="lastname">
</form>

Try it Yourself »

This is how it will look like in a browser:

브라우저에서 다음과 같이 표시됩니다.

First name:

Last name:

Note: The form itself is not visible. Also note that the default width of a text field is 20 characters.

참고 : 양식 자체는 표시되지 않습니다. 또한 텍스트 필드의 기본 너비는 20 자입니다.

---

Radio Button Input

라디오 버튼 입력

<input type="radio"> defines a radio button.

<input type="radio">라디오 버튼을 정의 합니다 .

Radio buttons let a user select ONE of a limited number of choices:

라디오 버튼을 사용하여 제한된 수의 선택 항목 중 하나를 선택할 수 있습니다.

Example

<form>
  <input type="radio" name="gender" value="male" checked> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other
</form>

Try it Yourself »

This is how the HTML code above will be displayed in a browser:

위의 HTML 코드가 브라우저에 표시되는 방법입니다.

 Male
 Female
 Other

---

The Submit Button

제출 단추

<input type="submit"> defines a button for submitting the form data to a form-handler.

<input type="submit">양식 데이터를 양식 처리자 에게 제출 하기 위한 버튼을 정의 합니다 .

The form-handler is typically a server page with a script for processing input data.

form-handler는 일반적으로 입력 데이터를 처리하는 스크립트가있는 서버 페이지입니다.

The form-handler is specified in the form's action attribute:

양식 처리기는 양식의 action 속성에 지정됩니다 .

Example

<form action="/action_page.php">
  First name:<br>
  <input type="text" name="firstname" value="Mickey"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse"><br><br>
  <input type="submit" value="Submit">
</form>

Try it Yourself »

This is how the HTML code above will be displayed in a browser:

위의 HTML 코드가 브라우저에 표시되는 방법입니다.

First name:

 

Last name:

 

---

The Action Attribute

액션 속성

The action attribute defines the action to be performed when the form is submitted.

이 action속성은 양식을 제출할 때 수행 할 작업을 정의합니다.

Normally, the form data is sent to a web page on the server when the user clicks on the submit button.

일반적으로 양식 데이터는 사용자가 제출 버튼을 클릭 할 때 서버의 웹 페이지로 전송됩니다.

In the example above, the form data is sent to a page on the server called "/action_page.php". This page contains a server-side script that handles the form data:

위의 예에서 양식 데이터는 "/action_page.php"라는 서버의 페이지로 전송됩니다. 이 페이지에는 양식 데이터를 처리하는 서버 측 스크립트가 들어 있습니다.

<form action="/action_page.php">

If the action attribute is omitted, the action is set to the current page.

경우 action속성이 생략, 작업은 현재 페이지로 설정됩니다.

---

The Target Attribute

대상 속성

The target attribute specifies if the submitted result will open in a new browser tab, a frame, or in the current window.

target제출 된 결과가 새 브라우저 탭, 프레임에서 열거 나 현재 창에서 할 경우 속성을 지정합니다.

The default value is "_self" which means the form will be submitted in the current window.

기본값 _self은 양식이 현재 창에 제출됨을 의미하는 " "입니다.

To make the form result open in a new browser tab, use the value "_blank":

새 브라우저 탭에서 양식 결과를 열려면 값 " _blank"을 사용하십시오 .

Example

<form action="/action_page.php" target="_blank">

Try it Yourself »

Other legal values are "_parent", "_top", or a name representing the name of an iframe.

다른 유효한 값은 " _parent", " _top"또는 iframe의 이름을 나타내는 이름입니다.

---

The Method Attribute

메소드 속성

The method attribute specifies the HTTP method (GET or POST) to be used when submitting the form data:

이 method속성 은 양식 데이터를 제출할 때 사용할 HTTP 메소드 ( GET 또는 POST )를 지정합니다 .

Example

<form action="/action_page.php" method="get">

Try it Yourself »

or:

Example

<form action="/action_page.php" method="post">

Try it Yourself »

---

When to Use GET?

언제 GET을 사용합니까?

The default method when submitting form data is GET.

양식 데이터를 제출할 때의 기본 방법은 GET입니다.

However, when GET is used, the submitted form data will be visible in the page address field:

그러나 GET을 사용하면 제출 된 양식 데이터가 페이지 주소 필드에 표시됩니다 .

/action_page.php?firstname=Mickey&lastname=Mouse

Notes on GET:

GET 참고 사항 :

• Appends form-data into the URL in name/value pairs>
  양식 데이터를 이름 / 값 쌍으로 URL에 추가합니다.
• The length of a URL is limited (about 3000 characters)
  URL의 길이는 제한되어 있습니다 (약 3000 자).
• Never use GET to send sensitive data! (will be visible in the URL)
  중요한 데이터를 보내려면 GET을 사용하지 마십시오! (URL에 표시됩니다)
• Useful for form submissions where a user want to bookmark the result
  사용자가 결과를 북마크에 추가하려는 양식 제출에 유용합니다.
• GET is better for non-secure data, like query strings in Google
  GET은 Google의 검색어 문자열과 같이 보안되지 않은 데이터에 더 좋습니다.

---

When to Use POST?

POST를 언제 사용합니까?

Always use POST if the form data contains sensitive or personal information. 

양식 데이터에 중요한 정보 나 개인 정보가 포함되어 있으면 항상 POST를 사용하십시오. 

The POST method does not display the submitted form data in the page address field.

POST 메서드는 제출 된 양식 데이터를 페이지 주소 필드에 표시하지 않습니다.

Notes on POST:

POST 참고 사항 :

• POST has no size limitations, and can be used to send large amounts of data.
  POST에는 크기 제한이 없으므로 많은 양의 데이터를 보낼 수 있습니다.
• Form submissions with POST cannot be bookmarked
  POST를 사용한 양식 제출은 북마크 할 수 없습니다.

---

The Name Attribute

이름 속성

Each input field must have a name attribute to be submitted.

각 입력 필드에는 name제출할 속성이 있어야합니다 .

If the name attribute is omitted, the data of that input field will not be sent at all.

경우] name속성이 생략되어, 해당 입력 된 필드의 데이터가 전혀 전송되지 않는다.

This example will only submit the "Last name" input field:

이 예에서는 '성'입력란 만 제출합니다.

Example

<form action="/action_page.php">
  First name:<br>
  <input type="text" value="Mickey"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse"><br><br>
  <input type="submit" value="Submit">
</form>

Try it Yourself »

---

Grouping Form Data with <fieldset>

<fieldset>을 사용하여 양식 데이터 그룹화

The <fieldset> element is used to group related data in a form.

<fieldset>소자 형태로 그룹과 관련된 데이터를 저장하는 데 사용된다.

The <legend> element defines a caption for the <fieldset> element.

<legend>요소는 캡션 정의 <fieldset> 요소를.

Example

<form action="/action_page.php">
  <fieldset>
    <legend>Personal information:</legend>
    First name:<br>
    <input type="text" name="firstname" value="Mickey"><br>
    Last name:<br>
    <input type="text" name="lastname" value="Mouse"><br><br>
    <input type="submit" value="Submit">
  </fieldset>
</form>

Try it Yourself »

This is how the HTML code above will be displayed in a browser:

위의 HTML 코드가 브라우저에 표시되는 방법입니다.

Personal information:

First name:

Last name:

---

Test Yourself with Exercises!

---

Here is the list of <form> attributes:

다음은 <form>속성 목록입니다 .

Attribute	Description
accept-charset	Specifies the charset used in the submitted form (default: the page charset).  제출 된 양식에 사용 된 문자 세트를 지정합니다 (기본값 : 페이지 문자 세트).
action	Specifies an address (url) where to submit the form (default: the submitting page).  양식을 제출할 주소 (URL)를 지정합니다 (기본값 : 제출 페이지).
autocomplete	Specifies if the browser should autocomplete the form (default: on).  브라우저가 양식 자동 완성을 수행할지 여부를 지정합니다 (기본값 : on).
enctype	Specifies the encoding of the submitted data (default: is url-encoded).  제출 된 데이터의 인코딩을 지정합니다 (기본값 : url-encoded).
method	Specifies the HTTP method used when submitting the form (default: GET).  양식을 제출할 때 사용되는 HTTP 메소드를 지정합니다 (기본값 : GET).
name	Specifies a name used to identify the form (for DOM usage: document.forms.name).  양식을 식별하는 데 사용되는 이름을 지정합니다 (DOM 사용 : document.forms.name).
novalidate	Specifies that the browser should not validate the form.  브라우저가 양식의 유효성을 검사하지 않도록 지정합니다.
target	Specifies the target of the address in the action attribute (default: _self).  action 속성에 주소의 대상을 지정합니다 (기본값 : _self).

You will learn more about the form attributes in the next chapters.

다음 장에서는 양식 속성에 대해 자세히 설명합니다.

---

출처 : https://www.w3schools.com/html/html_forms.asp