From defcf9f7e126ea6a08fce62632e17150086f0f5f Mon Sep 17 00:00:00 2001 From: soorokim Date: Sun, 2 Jul 2023 12:18:09 +0900 Subject: [PATCH 1/5] update: how_to_structure_a_web_form --- .../example/index.md | 184 +++ .../how_to_structure_a_web_form/index.md | 1055 ++++------------- 2 files changed, 411 insertions(+), 828 deletions(-) create mode 100644 files/ko/learn/forms/how_to_structure_a_web_form/example/index.md diff --git a/files/ko/learn/forms/how_to_structure_a_web_form/example/index.md b/files/ko/learn/forms/how_to_structure_a_web_form/example/index.md new file mode 100644 index 00000000000000..5169e06e5d015e --- /dev/null +++ b/files/ko/learn/forms/how_to_structure_a_web_form/example/index.md @@ -0,0 +1,184 @@ +--- +title: Example +slug: Learn/Forms/How_to_structure_a_web_form/Example +--- + +[HTML 폼 구성 방법](/ko/docs/Learn/Forms/How_to_structure_a_web_form)의 기본 결제 폼 예제 입니다. + +## A payment form + +### HTML + +```html-nolint +
+

Payment form

+

+ Required fields are followed by + *. +

+
+

Contact information

+
+ Title +
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+

+ + +

+

+ + +

+

+ + +

+
+
+

Payment information

+

+ + +

+

+ + +

+

+ + +

+
+
+

+
+
+``` + +### CSS + +```css +h1 { + margin-top: 0; +} + +ul { + margin: 0; + padding: 0; + list-style: none; +} + +form { + margin: 0 auto; + width: 400px; + padding: 1em; + border: 1px solid #ccc; + border-radius: 1em; +} + +div + div { + margin-top: 1em; +} + +label span { + display: inline-block; + width: 120px; + text-align: right; +} + +input, +textarea { + font: 1em sans-serif; + width: 250px; + box-sizing: border-box; + border: 1px solid #999; +} + +input[type="checkbox"], +input[type="radio"] { + width: auto; + border: none; +} + +input:focus, +textarea:focus { + border-color: #000; +} + +textarea { + vertical-align: top; + height: 5em; + resize: vertical; +} + +fieldset { + width: 250px; + box-sizing: border-box; + margin-left: 136px; + border: 1px solid #999; +} + +button { + margin: 20px 0 0 124px; +} + +label { + position: relative; +} + +label em { + position: absolute; + right: 5px; + top: 20px; +} +``` + +### Result + +{{ EmbedLiveSample('A_payment_form', '100%', 620) }} diff --git a/files/ko/learn/forms/how_to_structure_a_web_form/index.md b/files/ko/learn/forms/how_to_structure_a_web_form/index.md index 48166c2ba4939a..d0dfcd92c616b7 100644 --- a/files/ko/learn/forms/how_to_structure_a_web_form/index.md +++ b/files/ko/learn/forms/how_to_structure_a_web_form/index.md @@ -1,166 +1,50 @@ --- -title: HTML_폼_구성_방법 +title: HTML 폼 구성 방법 slug: Learn/Forms/How_to_structure_a_web_form -original_slug: Learn/HTML/Forms/HTML_폼_구성_방법 --- -HTML폼을 만들떄 구조화 하는것은 중요한 것이다. 이것은 두가지 이유로 중요하다. 폼이 사용 할수 있다는 것을 보장하고 접근성도 늘릴수 있기 떄문이다.(즉 장애인들도 쉽게 사용할 수 있다.) HTML 폼의 [접근성](/ko/docs/Web/Accessibility)은 중요한 점이고 어떻게 폼 접근성을 높일 수 있는지 볼것이다. -HTML 폼들은 그 유연성으로 인해 HTML 중 복잡한 구조를 가지고 있는 요소중 하나이다. 폼 요소와 속성을 잘 혼합하면 모든 형태의 기본적인 폼을 만들 수 있다. 즉 몇몇 사람들이 HTML폼이 단순하고 매우 거칠다는 것을 발견했다는 것에 주목할 가치가 있다. [XForms](/ko/docs/Archive/Web/XForms)같은 풍부한 기술이 있다는 것은 사실이지만 불행하게도 모든 브라우저에서 폼의 종류를 널리 구현되지 않았다. 왜냐하면 대부분 자바스크립트에 의존하여 HTML폼들을 다루기 떄문이다.이 문서에서는 HTML 폼 요소들을 어떻게 사용해야 하는지 자세하게 설명 할 것이다. 만약 사용자 폼 위젯 만들기에 대하여 자세한 내용을 알고 싶다면 다음 문서를 참조하시오. [How to build custom form widgets](/ko/docs/HTML/Forms/How_to_build_custom_form_widgets) +{{LearnSidebar}}{{PreviousMenuNext("Learn/Forms/Your_first_form", "Learn/Forms/Basic_native_form_controls", "Learn/Forms")}} -## 글로벌 구조 - -### `
` 요소 - -{{HTMLElement("form")}} 요소는 공식적으로 폼을 정의하는 요소로 이 요소의 속성으로 폼의 작동하는 방식을 정의 할 수있다. HTML폼을 생성할떄마다 반드시 이 요소로 시작을 해야한다. 많은 보조 기술이나 브라우저 플러그인이 {{HTMLElement("form")}} 요소를 발견하고 쉽게 사용 할 수 있게 특별한 후크를 구현 할 수 있다. - -우리는 저번 문서에서 이미 이 내용을 다루었다. - -> **참고:** **주의:**폼을 다른 폼으로 둘러싸는 것은 엄격하게 제한되어 있다. 만약 그렇게 하면 사용자가 사용하는 브라우저에 따라 예측할 수 없는 방식으로 작동하게 된다. - -언제든지 폼위젯을 {{HTMLElement("form")}} 요소 바깥에서 사용할 수 있다. 하지만 그렇게 사용한다면, 그 폼위젯은 어떠한 폼과도 관련이 없다. 폼 위젯들은 폼 바깥에서 사용될 수 있지만, 그 위젯들은 스스로 아무것도 하지 않을 것이기 때문에 당신이 그 위젯들 전용 프로세스를 만들어주어야 한다. 당신은 자바스크립트로 그 동작을 정의해주어야 한다. - -> **참고:** **주의:**HTML5에서 HTML 폼 요소안의 폼 속성이 지원된다. 폼 속성은 {{HTMLElement("form")}} 바깥에 있는 폼요소라도 폼과 명시적으로 연결한다. 불행하게도 지금 시점에 이 기능은 다양한 브라우저에서 안정적으로 구현되지 않아서 신뢰할 수 없다. - -{{HTMLElement("form")}} 요소는 다음과 같은 속성을 가지고 모든 속성이 필수가 아닌 선택적이다. - -**{{HTMLElement("form")}} 요소 속성** +기본 사항을 다룬 후에는 이제 폼의 다른 부분에 구조와 의미를 부여하는 데 사용되는 요소들을 좀 더 자세히 살펴보겠습니다. - - - - - - - - - - - - - - - - - - - + - - + - - - - - - - - - - - - - - - - - - - -
속성 이름기본값설명
- {{htmlattrxref("accept-charset","form")}} - UNKNOWN - 서버가 받아들일 문자 인코딩의 형식을 지정한다. 기본값은 특수 문자열 - UNKNOWN이고 이경우에 폼 요소 안에 있는 문서의 인코딩에 맞는 - 인코딩이다. -
{{htmlattrxref("action","form")}}폼을 통해서 전송한 정보를 처리하는 웹페이지의 URL
{{htmlattrxref("autocomplete","form")}}on전제 조건: - 이 속성은 이 폼안에 있는 위젯들의 기본값이 브라우저에 의해 자동 완성 - 하게 하는지 여부를 나타낸다. 이속성은 두가지 값중 하나를 같는다. - on 또는 off. + 기본적인 컴퓨터 사용능력과 HTML에 대한 기본적인 이해.
{{htmlattrxref("enctype","form")}}application/x-www-form-urlencoded목표: - \method 속성이 post 값으로 지정되면, 서버로 - 폼을 전송하는 콘텐츠 - MIME의 타입을 - 지정한다.: -
    -
  • application/x-www-form-urlencoded
    • -
  • - multipart/form-data: - {{HTMLElement("input")}}요소의 - type - 속성을 file로 지정한 경우 이 속성의 값을 사용한다. -
    • -
  • text/plain
    • -
-
{{htmlattrxref("method","form")}}get - 브라우저가 폼을 전송하기위해 사용하는 - HTTP의 - 방식을 지정한다.
이 속성은 두개의 값중 한개를 가진다. - get 또는 post. -
{{htmlattrxref("name","form")}} - 폼의 이름이다. 이 속성값은 반드시 문서의 폼 사이에서 고유해야하며 빈 - 문자열을 지정할 수없다. 일반적으로 - id - 속성으로 대신 지정할 수 있다. -
{{htmlattrxref("novalidate","form")}}(false) - 이 불리언 속성은 폼이 전송 할떄 유효성 검사를 할수 없음을 나타낸다. -
{{htmlattrxref("target","form")}}_self - 폼 요청을 전송한후 응답을 어떻게 받을것인지 지정한다. 예를들어 - {{HTMLElement("iframe")}}, tab, window를 사용 할 수 있다. 이 - 속성의 키워드로 다음과 같은 값을 사용 할 수있다. -
    -
  • - _self: 응답을 현재 브라우징 컨텍스트 - ({{HTMLElement("iframe")}}, tab, window 등)에서 불러온다. -
    • -
  • - _blank: 응답을 새로운 브라우징 컨텍스트로 불러온다. -
    • -
  • - _parent: 응답을 현재의 브라우징 컨텍스트의 부모 - 브라우징 컨텍스트에서 불러온다. 만약 부모가 없다면 - _self 키워드와 똑같이 작동한다. -
    • -
  • - _top: 응답을 최상휘 레벨 브라우징 컨텍스트에서 - 불러온다. 만약 최상위 컨텍스트가 없다면 - _self 키워드와 똑같이 작동한다. -
    • -
+ HTML 폼을 구조화하고 의미를 부여하여 사용가능하고 접근성있는 폼을 만드는 방법을 이해합니다.
-요소 밖에 폼 위젯들을 사용 할 수 있지만, 폼 위젯이 어떠한 폼과도 상관이 없다는 것을 유의 해야 한다.폼의 밖에서 위젯을 사용하는 것은 편리할 수 있지만 위젯들이 작동하기 위해 다른 것들을 해야 한다는 것을 의미한다. 아마 자바스크립트를 이용해서 동작을 정의 해야 할것이다. +폼의 유연성은 폼을 [HTML](/ko/docs/Learn/HTML)의 가장 복잡한 구조 중 하나로 만듭니다. 전용 요소들과 특성들로 모든 종류의 기본적인 폼을 만들 수 있습니다. HTML 폼을 만들때 올바른 구조를 사용하게되면 사용성과 [접근성](/ko/docs/Learn/Accessibility)을 확보 할 수 있습니다. + +## \ 요소 -기술적으로 HTML5는 HTML 폼 요소에서 폼 속성을 설명 했다. 이것은 요소들을 실제로 {{ HTMLElement("form") }} 안에 있지 않아도 form요소로 확실하게 바인딩 하도록 해야한다. 불행하게도 모든 브라우저가 아직 이것을 충분히 지원하지 않는다. +{{HTMLElement("form")}} 요소는 폼을 형식적으로 정의하는 폼의 동작 방식을 결정하는 속성들을 포함합니다. HTML폼을 생성할떄마다 반드시 이 요소로 시작하고 모든 내용을 내부에 중첩해야 합니다. 많은 보조 기술이나 브라우저 플러그인이 {{HTMLElement("form")}} 요소를 발견하고 사용하기 쉽게 만들기 위해 특별한 기능을 제공 할 수 있습니다. -### `
` 와 `` 요소 +우리는 저번 문서에서 이미 이 내용을 다루었습니다. -{{HTMLElement("fieldset")}}요소는 같은 목적을 가진 위젯들을 편리하게 그룹화 하는 방법이다. A {{HTMLElement("fieldset")}} 요소는 라벨인 {{HTMLElement("legend")}} 요소와 같이 사용된다. {{HTMLElement("legend")}} 요소는 공식적으로 {{HTMLElement("fieldset")}} 요소를 설명하는데 사용된다. 많은 보조 기술들이 {{HTMLElement("legend")}} 요소를 {{HTMLElement("fieldset")}} 요소의 라벨로 이용하는데 사용된다. 예를 들어 [Jaws](http://www.freedomscientific.com/products/fs/jaws-product-page.asp), [NVDA](http://www.nvda-project.org/)같은 스크린 리더들은 각각의 위젯의 라벨을 읽기전에 legend들을 읽을 것이다. +> **경고:** 폼을 다른 폼으로 중첩하는 것은 엄격하게 제한되어 있습니다. 그렇게 하면 사용자가 사용하는 브라우저에 따라 예측할 수 없는 방식으로 작동하므로 좋은 방법이 아닙니다. -아래 조그만 예제가 있다. +언제든지 {{HTMLElement("form")}} 요소 바깥에서 폼 컨트롤을 사용할 수 있습니다. 이럴 경우 기본적으로 컨트롤은 [`form`](/ko/docs/Web/HTML/Element/input#form) 특성을 사용하여 연결해주지 않는한 어떤 폼과도 관련이 없습니다. 이것은 컨트롤이 폼 요소 내부에 중첩되어있지 않더라도 명시적으로 컨트롤을 명시적으로 바인딩할 수 있도록 하기위해 도입됐습니다. + +다음으로 폼 내부의 중첩되어있는 구조요소에 대해 다루겠습니다. + +## \
와 \ 요소 + +{{HTMLElement("fieldset")}} 요소는 같은 목적을 가진 위젯들을 편리하게 그룹화 하는 방법입니다. {{HTMLElement("fieldset")}}에 레이블을 붙이려면 {{HTMLElement("fieldset")}} 태그 바로 아래에 {{HTMLElement("legend")}} 요소를 포함하면 됩니다. {{HTMLElement("legend")}}의 텍스트 컨텐츠는 {{HTMLElement("fieldset")}} 요소의 목적을 형식적으로 설명합니다. + +많은 보조 기술들이 {{HTMLElement("legend")}} 요소를 해당 {{HTMLElement("fieldset")}} 요소내의 각 컨트롤의 레이블의 일부인것 처럼 사용합니다. 예를 들어 [Jaws](https://www.freedomscientific.com/products/software/jaws/) 와 [NVDA](https://www.nvaccess.org/) 같은 스크린 리더는 각 컨트롤의 라벨을 읽기전에 legend를 읽을 것입니다. + +아래 작은 예제가 있습니다. ```html @@ -182,759 +66,274 @@ HTML 폼들은 그 유연성으로 인해 HTML 중 복잡한 구조를 가지고 ``` -이 예제를 스크림 리더가 Fruit juice size small을 먼저 읽고 Fruit juice size medium을 읽은 다음 마지막으로 Fruit juice size large을 읽을 것이다, - -이것은 가장 중요한것 중 하나이다. 대부분 라디오 버튼을 설정할떄 마다{{HTMLElement("fieldset")}} 요소 안에 있는지 확인해야한다. 다르게 사용하는 사례가 있지만 일반적으로 {{HTMLElement("fieldset")}} 요소는 폼을 강력하게 사용할 수 있게 해준다. 보조기술의 영향으로 {{HTMLElement("fieldset")}} 요소는 폼 접근 할수 있는 키 요소 중 하나이다. 이것을 남용하지 않는 것은 개발자 책임이다. 가능한 폼을 만들떄마다 스크린리더로 들어보면서 하는 것이 좋다. 만약 말이 이상하게 들린다면 개선 해야 한다는 신호이다. - -{{HTMLElement("fieldset")}} 요소는 다음과 같은 속성을 지정한다. - -| 속성 이름 | 기본값 | 설명 | -| ---------------------------------------------------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| {{htmlattrxref("disabled","fieldset")}} | (_false_) | 만약 이 불리언 속성이 설정되면 폼은(첫번째 {{ HTMLElement("legend") }}요소에 있는 요소는 예외이다. ) 이것에 파생된 요소를 사용하거나 편집 할 수없게된다. 그리고 마우스 클릭같은 어떠한 브라우저 이벤트들도 받지 않을것이다. 일반적으로 브라우저는 회색으로 이를 표시할 것이다. | - -### The \