양식

대부분의 사이트와 애플리케이션에는 웹 양식이 포함되어 있습니다. DoWebsitesNeedLookFireEye와 같은 농담 사이트TheSameTheAnyBrowser.com 형식이 없을 수도 있지만 만우절 농담에서 출발한 MachineLearningWorkshop.com (MLW)에도 조금은 생소하게 느껴질 수 있습니다 MLW의 주요 '클릭 유도 문구' 기계가 워크숍에 등록할 수 있는 등록 양식입니다. 이 양식 <form> 요소에 포함되어 있습니다.

HTML <form> 요소는 다음 항목을 포함하는 문서 랜드마크를 식별합니다. 정보 제출을 위한 양방향 컨트롤을 제공합니다. <form>에 중첩되면 모든 대화형 및 비대화형 해당 양식을 구성하는 양식 컨트롤의 일종입니다.

HTML은 강력합니다. 이 섹션에서는 자바스크립트를 추가하지 않고 HTML이 할 수 있는 작업을 다루며 HTML의 기능에 초점을 맞춥니다. 어떤 식으로든 클라이언트 측에서 양식 데이터를 사용하여 UI를 업데이트하려면 일반적으로 CSS 또는 JavaScript가 필요합니다. 이에 대해서는 여기서 다루지 않습니다. 전체 양식 학습 과정이 있습니다. 여기서는 해당 섹션을 중복해서 다루지 않지만 여러 양식 컨트롤과 이러한 컨트롤을 강화하는 HTML 속성으로 구성됩니다.

양식을 사용하면 사용자가 웹사이트 또는 애플리케이션과 상호작용하고, 입력된 정보를 확인하고, 제출할 수 있습니다. 데이터를 서버로 전송합니다. HTML 속성을 사용하면 사용자에게 양식 컨트롤을 선택하거나 값을 입력하도록 요구할 수 있습니다. HTML 속성은 값이 유효하기 위해 일치해야 하는 특정 기준을 정의할 수 있습니다. 사용자가 양식을 제출하려고 하면 모든 양식 컨트롤 값이 클라이언트 측 제약 조건 유효성 검사를 거치므로 제출을 막을 수 있습니다. 데이터가 필수 기준과 일치할 때까지 할 수 있습니다. novalidate를 설정하여 이 기능을 사용 중지할 수도 있습니다. <form>의 속성 또는 버튼에 formnovalidate를 추가하여 나중에 완료할 수 있도록 양식 데이터를 저장합니다. 는 검증을 방지합니다.

양식 제출

사용자가 양식 내에 중첩된 제출 버튼을 활성화하면 양식이 제출됩니다. 버튼에 <input>를 사용하면 '값' 가 버튼의 라벨이며 버튼에 표시됩니다. <button>를 사용하는 경우 라벨은 시작 부분 사이의 텍스트입니다. 및 닫는 <button> 태그입니다. 제출 버튼은 다음 두 가지 방법 중 하나로 작성할 수 있습니다.

<input type="submit" value="Submit Form">
<button type="submit">Submit Form</button>

매우 간단한 양식의 경우 내부에 양식 입력과 제출 버튼이 있는 <form> 요소가 필요합니다. 그러나 더 많은 것을 할 수 있습니다.

<form> 요소의 속성은 다음과 같이 HTTP 메서드를 설정합니다. 양식 제출을 처리하는 URL이 있습니다. 지원, 제출, 처리, 처리할 수 있습니다. 자바스크립트 없이 새 페이지를 로드할 수 있습니다. <form> 요소는 이렇게 강력합니다.

<form> 요소의 action 및 method 속성 값은 양식 데이터를 처리하는 URL과 데이터를 제출하는 데 사용되는 HTTP 메서드를 각각 정의합니다. 기본적으로 양식 데이터는 현재 페이지로 전송됩니다. 그 외의 경우에는 action 속성을 데이터를 전송할 위치의 URL로 설정합니다.

전송된 데이터는 양식의 다양한 양식 컨트롤의 이름/값 쌍으로 구성됩니다. 기본적으로 여기에는 모든 양식이 포함됩니다. 컨트롤은 name가 있는 양식 내에 중첩되어 있습니다. 그러나 form 속성을 사용하면 양식 컨트롤을 포함할 수 있습니다. <form> 내에 중첩된 양식 컨트롤을 생략할 수 있습니다.<form> 양식 컨트롤과 <fieldset>에서 지원됨 form 속성은 연결된 컨트롤의 형식(id)을 값으로 사용합니다. 하위 클래스입니다 즉, 양식 컨트롤은 <form>에 실제로 중첩되지 않아도 됩니다.

method 속성은 요청의 HTTP 프로토콜을 정의합니다(일반적으로 GET 또는 POST). GET를 사용하면 양식 데이터가 action의 URL에 추가되는 name=value 쌍의 매개변수 문자열입니다.

POST를 사용하면 데이터가 HTTP 요청의 본문에 추가됩니다. 비밀번호, 신용카드 등 보안 데이터를 전송하는 경우 사용하려면 항상 POST를 사용하세요.

DIALOG 메서드도 있습니다. <form method="dialog">가 <dialog> 내에 있는 경우 양식을 제출하면 대화상자가 닫힙니다. 데이터가 지워지지도 제출되지 않았지만 제출 이벤트가 있습니다. 마찬가지로 JavaScript를 사용하지 않습니다. 이에 대해서는 대화상자 섹션을 참조하세요. 이 양식은 양식을 제출하지 않으므로 제출 버튼에 formmethod="dialog"와 formnovalidate를 모두 포함해야 합니다.

양식 버튼에는 이 섹션의 시작 부분에 설명된 속성보다 많은 속성이 있을 수 있습니다. 버튼에 formaction가 포함된 경우 formenctype, formmethod, formnovalidate 또는 formtarget 속성. 양식을 활성화하는 버튼에 설정된 값 제출이 action, enctype, method, target보다 우선합니다. <form>에 설정됩니다. 제약조건 유효성 검사는 양식 제출 전에 발생하지만, 활성화된 제출 버튼의 formnovalidate 또는 <form>의 novalidate

양식을 제출하는 데 사용된 버튼을 캡처하려면 name 버튼을 클릭합니다. 이름이나 값이 없는 버튼은 양식 제출 시 양식 데이터와 함께 전송되지 않습니다.

양식 제출 후

사용자가 작성된 온라인 양식을 제출하면 관련 양식 컨트롤의 이름과 값이 제출됩니다. 이름은 name 속성의 값입니다. 값은 value 속성의 콘텐츠나 사용자가 입력하거나 선택한 값에서 가져옵니다. <textarea>의 값은 내부 텍스트입니다. <select>의 값은 선택한 <option>의 value입니다. 또는 <option>에 value 속성이 포함되어 있지 않은 경우 값은 선택한 옵션의 내부 텍스트입니다.

<form method="GET">
  <label for="student">Pick a student:</label>
  <select name="student" id="student">
    <option value="hoover">Hoover Sukhdeep</option>
    <option>Blendan Smooth</option>
    <option value="toasty">Toasty McToastface</option>
  </select>
  <input type="submit" value="Submit Form">
</form>

<ph type="x-smartling-placeholder">

</ph> 학생 선택: <ph type="x-smartling-placeholder"></ph> 후버 수크딥 블렌단 스무스 토스티 맥토스트페이스

'Hoover Sukhdeep' 선택 (또는 브라우저가 기본적으로 첫 번째 옵션 값을 표시하여 선택하기 때문에 아무것도 하지 않음) 그런 다음 제출 버튼을 클릭하면 페이지가 새로고침되고 URL이 다음과 같이 설정됩니다.

https://web.dev/learn/html/forms?student=hoover

두 번째 옵션에는 value 속성이 없으므로 내부 텍스트가 값으로 제출됩니다. '부드럽게 혼합' 선택 제출 버튼을 클릭하면 페이지가 새로고침되고 URL이 다음과 같이 설정됩니다.

https://web.dev/learn/html/forms?student=Blendan+Smooth

양식을 제출하면 전송되는 정보에는 name이(가) 있는 이름이 지정된 모든 양식 컨트롤의 이름과 값이 포함됩니다. 선택되지 않은 체크박스, 선택되지 않은 라디오 버튼, 선택되지 않은 버튼을 제외한 나머지 버튼의 이름과 값을 제외한 양식을 제출했습니다. 다른 모든 양식 컨트롤의 경우 양식 컨트롤에 이름은 있지만 값이 입력되거나 기본값이 없으면 양식 컨트롤의 name가 빈 값과 함께 제출됩니다.

22가지 입력 유형이 있으므로 모두 다룰 수는 없습니다. 다만 값을 포함하는 것은 선택사항이지만 사용자가 정보를 입력하도록 하려는 경우 종종 바람직하지 않습니다. 사용자가 값을 수정할 수 없는 <input> 요소의 경우 입력 값을 포함하여 항상 값을 포함해야 합니다. 유형이 hidden, radio, checkbox, submit, button, reset인 요소.

양식 컨트롤에 고유한 name를 사용하면 서버 측 데이터 처리가 간소화되므로 체크박스와 라디오 버튼이 이 규칙에 적용되지 않습니다.

라디오 버튼

라디오 버튼 그룹 내에서 하나의 라디오 버튼을 선택할 때 이는 name 속성 때문입니다. 1번만 선택할 수 있는 효과는 각 라디오 버튼을 동일한 name 그룹에 있습니다.

name는 그룹별로 고유해야 합니다. 실수로 별도의 두 그룹에 동일한 name를 사용한 경우 라디오를 선택합니다. 두 번째 그룹의 버튼을 누르면 name가 동일한 첫 번째 그룹에서 선택한 내용이 선택 해제됩니다.

선택한 라디오 버튼의 value와 name가 양식과 함께 제출됩니다. 각 라디오 버튼이 관련성이 높고 일반적으로 고유한 value입니다. 선택하지 않은 라디오 버튼의 값은 전송되지 않습니다.

한 페이지에 라디오 그룹을 원하는 만큼 여러 개 만들 수 있으며, 각 그룹이 독립적으로 작동하도록 하려면 라디오 그룹이 있어야 합니다. 단, 라디오 그룹이 있어야 합니다. name에서 고유한 값을 반환할 수 있습니다.

이름이 동일한 그룹에서 라디오 버튼 중 하나가 포함된 페이지를 로드하려면 checked 속성을 포함합니다. 이 라디오 버튼은 :default CSS 의사 클래스와 일치합니다. 사용자가 다른 라디오를 선택하더라도 마찬가지입니다. 현재 선택된 라디오 버튼이 :checked과(와) 일치합니다. 사용하여 가상 머신의 정보를 저장할 수 있습니다

사용자가 라디오 버튼 그룹에서 라디오 컨트롤을 선택해야 하는 경우 하나 이상의 라디오 버튼에 required 속성을 추가합니다. 있습니다. 그룹의 라디오 버튼에 required를 포함하면 양식 제출에 필요한 선택이 요구되지만 유효하도록 선택된 속성이 있는 라디오일 필요는 없습니다. 또한 <legend>에 명확하게 표시합니다. 양식 컨트롤이 필요합니다. 각 개별 버튼과 함께 라디오 버튼 그룹의 라벨 지정에 관해 설명 나중에 설명하겠습니다.

체크박스

그룹 내 모든 체크박스가 동일한 name를 가질 수 있습니다. 선택한 체크박스만 name 및 value 값을 가집니다. 양식을 제출할 수 있습니다. 같은 이름의 체크박스를 여러 개 선택한 경우 같은 이름의 다른 값을 가질 수 있습니다. 이름이 같은 양식 컨트롤이 여러 개 있는 경우 모든 체크박스가 체크박스는 아니더라도 모두 제출되며 앰퍼샌드로 구분됩니다.

체크박스에 value를 포함하지 않으면 선택한 체크박스의 값이 기본적으로 on로 설정되며 이는 아마도 아닐 수 있습니다. 도움이 됩니다. 이름이 chk인 체크박스 세 개가 모두 선택되어 있는 경우 양식 제출을 식별할 수 없습니다.

https://web.dev/learn/html/forms?chk=on&chk=on&chk=on

체크박스를 필수로 설정하려면 required 속성을 추가합니다. 체크박스를 선택해야 하거나 양식 컨트롤이 필요합니다 체크박스에 required를 추가하면 해당 체크박스만 필수가 됩니다. 다른 클라우드 스토리지에 체크박스를 선택합니다.

라벨 및 필드 세트

사용자가 양식을 작성하는 방법을 알 수 있으려면 양식에 액세스할 수 있어야 합니다. 모든 양식 컨트롤에는 라벨이 있어야 합니다. 양식 컨트롤 그룹에도 라벨을 지정하려는 경우 개별 입력, 선택, 텍스트 영역은 <label>로 라벨이 지정되어 있습니다. 양식 컨트롤 그룹은 <legend> 그룹화하는 <fieldset>입니다.

이전 예에서는 제출 버튼을 제외한 각 양식 컨트롤에 <label>가 있음을 알 수 있습니다. 라벨 양식 컨트롤에 액세스 가능한 이름을 제공합니다. 버튼은 콘텐츠나 값에서 액세스 가능한 이름을 가져옵니다. 기타 양식 컨트롤에는 연결된 <label>가 필요합니다. 연결된 라벨이 없어도 브라우저에서는 양식 컨트롤을 계속 렌더링합니다. 사용자는 어떤 정보가 예상되는지 알 수 없습니다.

양식 컨트롤을 <label>와 명시적으로 연결하려면 <label>에 for 속성을 포함합니다. 이 속성은 연결된 양식 컨트롤의 id입니다.

<label for="full_name">Your name</label>
<input type="text" id="full_name" name="name">

이름 <ph type="x-smartling-placeholder"></ph>

라벨을 양식 컨트롤과 연결하면 여러 가지 이점이 있습니다. 라벨을 사용하면 스크린 리더 사용자가 컨트롤에 액세스 가능한 이름을 제공합니다. 라벨은 '조회 영역'이기도 합니다. 사용자가 사이트를 보다 편리하게 이용할 수 있도록 수동기민성 문제를 일으킬 수 있습니다. 마우스를 사용하는 경우 '사용자 이름' 라벨의 아무 곳이나 클릭해 보세요. 행동 입력에 포커스를 둡니다.

암시적 라벨을 제공하려면 여는 <label> 태그와 닫는 태그 사이에 양식 컨트롤을 포함하세요. 이 또한 마찬가지 스크린 리더와 포인터 기기 관점에서 모두 액세스할 수 있지만 명시적인 라벨을 지정합니다.

<label>Your name
  <input type="text" name="name">
</label>

이름

라벨은 '조회 영역'이므로 명시적인 라벨 또는 기타 상호작용 구성요소에 상호작용 요소를 포함하지 마세요. 사용하지 않습니다. 예를 들어 라벨에 링크를 포함하는 동안 브라우저가 가 HTML을 렌더링하기 때문에 사용자는 레이블을 클릭하여 양식 컨트롤을 입력하지만 생성할 수 있습니다.

일반적으로 <label>는 라디오 버튼과 체크박스의 경우를 제외하고 양식 컨트롤 앞에 옵니다. 반드시 그럴 필요는 없습니다. 단지 일반적인 UX 패턴일 뿐입니다. Forms 알아보기 시리즈에는 양식 디자인에 대한 정보가 포함되어 있습니다.

라디오 버튼 및 체크박스 그룹의 경우 라벨은 연결된 양식 컨트롤의 액세스 가능한 이름을 제공합니다. 컨트롤 그룹과 해당 라벨에도 라벨이 필요합니다. 그룹에 라벨을 지정하려면 모든 요소를 <fieldset>: <legend>는 그룹의 라벨을 제공합니다.

<fieldset>
  <legend>Who is your favorite student?</legend>
  <ul>
    <li>
      <label>
        <input type="radio" value="blendan" name="machine"> Blendan Smooth
      </label>
    </li>
    <li>
      <label>
        <input type="radio" value="hoover" name="machine"> Hoover Sukhdeep
      </label>
    </li>
    <li>
      <label>
        <input type="radio" value="toasty" name="machine"> Toasty McToastface
      </label>
    </li>
  </ul>
</fieldset>

이 예에서 암시적 <label>는 각각 라디오 버튼에 라벨을 지정하고 <legend>는 라디오 버튼 그룹에 라벨을 제공합니다. 다른 <fieldset> 내에 <fieldset>를 중첩하는 것이 표준 방식입니다. 예를 들어 양식이 여러 질문으로 구성된 설문조사인 경우 '좋아하는 학생'은 관련 질문 그룹으로 나뉩니다 <fieldset>는 다음 라벨이 지정된 다른 <fieldset>에 중첩될 수 있습니다. "즐겨찾기":

<fieldset>
  <legend>Your favorites:</legend>
  <ul start="6">
    <li>
      <fieldset>
        <legend>Who is your favorite student?</legend>
        <ul>
          <li>
            <!-- the rest of the code here -->

이러한 요소는 기본 모양으로 인해 사용되지 않지만 CSS로 <legend> 및 <fieldset>의 스타일을 지정할 수 있습니다. <fieldset>는 모든 전역 속성 외에 name, disabled, form 속성도 지원합니다. fieldset를 사용 중지하면 모든 중첩된 양식 컨트롤이 사용 중지됩니다. name 속성과 form 속성 모두 다음이 <fieldset>에서 많이 사용됩니다. name는 JavaScript로 fieldset에 액세스하는 데 사용할 수 있지만 fieldset 자체는 제출된 데이터에 포함되어 있지 않습니다 (중첩된 이름이 지정된 양식 컨트롤이 포함됨).

입력 유형 및 동적 키보드

앞서 언급했듯이 22가지 유형의 입력이 있습니다. 사용자가 휴대전화와 같이 필요할 때만 표시되는 동적 키보드가 있는 기기를 사용하는 경우 사용되는 키보드 유형에 따라 표시되는 키보드 유형이 결정됩니다. 표시되는 기본 키보드는 필요한 입력 유형에 맞게 최적화할 수 있습니다. 예를 들어 tel를 입력하면 전화번호 입력에 최적화된 키패드가 표시됩니다. email에는 @ 및 .가 포함됩니다. 및 url용 동적 키보드에는 콜론과 슬래시 기호가 포함됩니다. 안타깝게도 iPhone은 : url 입력 유형을 위한 기본 동적 키보드입니다.

iPhone 및 두 가지 Android 휴대전화의 <input type="tel">용 키보드:

iPhone 및 두 가지 Android 휴대전화의 <input type="email">용 키보드:

마이크 및 카메라에 액세스

파일 입력 유형 <input type="file">을 사용하면 양식을 통해 파일을 업로드할 수 있습니다. 파일 유형에 관계없이 정의 및 제한 가능 accept 속성으로 설정합니다. 허용되는 파일 형식 목록은 쉼표로 구분된 파일 확장자 목록, 전역 형식 전역 유형과 확장 프로그램의 조합을 사용할 수 있습니다 예를 들어 accept="video/*, .gif"에는 모든 동영상 파일 또는 애니메이션 gif가 허용됩니다. 'audio/*' 사용 소리 파일 'video/*' 동영상 파일 및 ‘image/*’ 검색 이미지 파일용입니다.

다음 항목에 정의된 열거형 capture 속성입니다. 미디어 캡처 사양은 새로운 미디어가 파일은 사용자의 카메라 또는 마이크를 사용하여 만들어야 합니다. 사용자 대상 입력 장치의 값을 user로 설정할 수 있습니다. 또는 environment: 휴대전화의 후면 카메라나 마이크 일반적으로 값 없이 capture를 사용하면 작동합니다. 사용자가 사용할 입력 장치를 선택할 것입니다.

<label for="avatar">A recent photo of yourself:</label>
<input type="file" capture="user" accept="image/*" name="avatar" id="avatar">

기본 제공 유효성 검사

마찬가지로 자바스크립트를 포함하지 않아도 HTML은 잘못된 값이 포함된 양식이 제출되는 것을 방지할 수 있습니다.

:required 등의 HTML 속성이 있는지에 따라 양식 컨트롤과 일치하는 CSS 선택자가 있습니다. 부울이 required이면 :optional입니다. 설정되어 있는지 확인합니다. checked의 경우 :default 하드 코딩되어 있습니다. 및 :enabled 또는 :disabled, 요소의 상호작용 여부와 disabled의 속성이 있는지 확인합니다. :read-write 의사 클래스는 contenteditable 설정 및 number, password 및 text 입력 유형과 같이 기본적으로 수정 가능한 양식 컨트롤 라디오 버튼 또는 hidden 유형)을 포함할 수 없습니다. 일반적으로 쓰기 가능한 요소에 readonly가 있는 경우 속성이 설정된 경우 대신 :read-only과 일치합니다.

사용자가 양식 컨트롤에 정보를 입력하면 :valid, :invalid, :in-range 및 :out-of-range은 상태에 따라 사용 설정 또는 사용 중지됩니다. 사용자가 아직 완전히 지원되지 않는 :user-invalid 또는 :user-valid 유사 클래스가 일치하게 됩니다.

CSS를 사용하여 사용자가 양식과 상호작용할 때 양식 컨트롤이 필요하고 유효한지에 관한 신호를 제공할 수 있습니다. CSS를 사용하여 양식이 유효할 때까지 사용자가 제출 버튼을 클릭하지 못하게 할 수도 있습니다.

form:invalid [type="submit"] {
  opacity: 50%;
  pointer-events: none;
}

이 CSS 스니펫은 피해야 할 패턴입니다. UI가 직관적이고 명확해 보일 수 있지만 많은 사용자가 오류 메시지를 사용 설정합니다. 이런 식으로 제출 버튼이 비활성화된 것처럼 보이게 하면 제약 조건 유효성 검사가 허용되지 않습니다. 많은 사용자가 사용하는 기능입니다

적용된 CSS는 UI의 현재 상태에 따라 지속적으로 업데이트됩니다. 예를 들어, 입력 유형을 포함하는 경우 제약 조건(예: email, number, url) 및 날짜 유형(값이 null이 아니고(비어 있지 않음)이고 현재 값이 유효한 이메일, 숫자, URL, 날짜 또는 시간이 아닌 경우 :invalid CSS 의사 클래스가 일치합니다. 이 상수는 업데이트는 사용자가 양식을 제출하려고 할 때만 발생하는 기본 제공 HTML 제약 조건 유효성 검사와 다릅니다.

기본 제공 제약조건 유효성 검사는 HTML 속성으로 설정된 제약조건에만 관련이 있습니다. 요소를 기반으로 스타일을 지정할 수는 있지만 :required 및 :valid/:invalid 의사 클래스에서 가져온 required, pattern, min, max, 심지어 type 속성은 양식을 제출할 때 제공됩니다.

필요한 학생을 선택하지 않고 양식을 제출하려고 하면 제약조건 유효성 검사가 양식 제출을 방해합니다. validityState.valueMissing 오류가 발생했습니다.

validityState 속성 중 하나라도 true를 반환하면 제출이 차단되고 브라우저에 오류 메시지가 표시됩니다. 첫 번째 잘못된 양식 컨트롤에 포커스를 주었습니다 사용자가 양식 제출을 활성화했는데 잘못된 값이 있는 경우 첫 번째 잘못된 양식 컨트롤은 오류 메시지를 표시하고 포커스를 받습니다. 필수 컨트롤에 값이 설정되지 않은 경우 숫자 값이 범위를 벗어났거나 값이 type 속성에 필요한 유형이 아니면 양식에서 유효성을 검사하지 않습니다. 제출되지 않고 오류 메시지가 표시됩니다.

number, 날짜 또는 시간 값이 설정된 최소 min보다 작거나 최대 max 세트보다 크면 컨트롤이 :out-of-range (및 :invalid)가 됩니다. 사용자에게 valididityState.rangeUnderflow에 관한 알림이 전송됩니다. validityState.rangeOverflow 오류가 발생했을 때 양식을 제출해 보세요. 값이 step 값(명시적으로 설정하거나 1로 기본 설정 여부와 상관없이) 컨트롤은 :out-of-range(및 :invalid)이 되고 validityState.stepMismatch 오류 오류는 풍선으로 표시되며 기본적으로 오류를 수정하는 방법에 관한 유용한 정보를 제공합니다.

값 길이에는 유사한 속성(minlength)이 있습니다. maxlength 속성은 사용자에게 오류를 알립니다. validityState.tooLong와 함께 또는 제출 시 validityState.tooShort. maxlength는 사용자가 너무 많은 문자를 입력하지 못하게 합니다.

maxlength 속성을 사용하면 사용자 환경이 저하될 수 있습니다. 일반적으로 더 나은 경험은 사용자가 를 입력할 수 있습니다. 선택사항으로, 양식과 함께 제출되지 않은 <output> 요소 출력에 허용된 최대 길이를 초과하지 않은 것으로 표시될 때까지 텍스트를 수정할 수 있습니다. maxlength HTML에 포함될 수 있습니다. 지금까지 설명한 모든 것과 마찬가지로 JavaScript 없이도 작동합니다. 그런 다음 로드 시 maxlength 속성을 사용하여 JavaScript에서 이 문자 수 카운터를 만들 수 있습니다.

일부 입력 유형에는 기본 제약 조건이 있는 것처럼 보이지만 그렇지 않습니다. 예를 들어 tel 입력 유형은 숫자 전화 키패드를 사용할 수도 있지만 유효한 값을 제한하지는 않습니다. 이 입력과 다른 입력 유형의 경우 pattern 속성이 있습니다. 값이 유효한 것으로 간주되기 위해 일치해야 하는 정규 표현식을 지정할 수 있습니다. 값이 빈 문자열이고 값이 필요하지 않으면 validityState.patternMismatch이 발생하지 않습니다. 오류가 발생했습니다. 필수 입력란이며 비어 있으면 validityState.valueMissing의 기본 오류 메시지가 사용자에게 표시됩니다. patternMismatch

이메일의 경우 validityState.typeMismatch도 용서하는 것이 중요합니다. pattern를 포함하는 것이 좋습니다. 속성을 사용하여 TLD가 없는 인트라넷 이메일 주소는 유효한 것으로 허용되지 않습니다. 패턴 속성을 사용하면 값이 일치해야 하는 정규 표현식을 제공할 수 있습니다. 패턴 일치를 요구할 때 명확히 해야 합니다.

이 모든 작업을 JavaScript 한 줄 없이도 수행할 수 있지만, HTML API이므로 JavaScript를 사용하여 커스텀 메시지를 생성할 수 있습니다. 또한 자바스크립트를 사용하여 남은 문자 수를 업데이트하고 비밀번호 안전성을 나타내는 진행률 표시줄 또는 동적으로 완성도를 개선하는 여러 가지 방법

예

이 예에는 양식 컨트롤 3개와 제출 버튼 2개가 있는 중첩된 <form>가 있는 <dialog> 내에 양식이 있습니다. 명확한 라벨 및 지침을 찾을 수 있습니다.

첫 번째 제출 버튼을 누르면 대화상자가 닫힙니다. formmethod="dialog"를 사용하여 양식의 기본 메서드를 재정의하고 데이터를 제출하거나 삭제하지 않고 <dialog> formnovalidate도 포함해야 합니다. 그러지 않으면 브라우저에서 모든 필수 입력란에 값이 있는지 확인해 보세요 사용자가 아무런 동작도 하지 않고 대화상자와 양식을 데이터 입력 이를 방지할 수 있습니다 'X' 때문에 aria-label="close" 포함 인코더-디코더는 시각적인 신호로 알려져 있지만 설명 라벨이 아닙니다

양식 컨트롤에는 모두 암시적 라벨이 있으므로 id 또는 for 속성을 포함할 필요가 없습니다. 입력 요소 및 필수 속성이기 때문에 필수 속성이 있어야 합니다 숫자 입력에는 step가 어떻게 사용되는지 보여주기 위해 step가 명시적으로 설정되어 있습니다. 포함됩니다. step의 기본값은 1이므로 이 속성을 생략할 수 있습니다.

<select>에는 기본값이 있으므로 required 속성이 필요하지 않습니다. value 속성을 포함하는 대신 값은 기본적으로 내부 텍스트로 설정됩니다.

마지막에 있는 제출 버튼은 양식 메서드를 POST로 설정합니다. 클릭하면 각 값의 유효성이 확인됩니다. 모두 값이 유효하고 양식 데이터가 제출되고 대화상자가 닫히고 페이지가 thankyou.php(으)로 리디렉션될 수 있습니다. 작업 URL입니다. 누락된 값이 있거나 숫자 값이 걸음 수 불일치가 있거나 범위를 벗어난 경우 해당 브라우저 정의 오류 메시지가 표시되고 양식이 제출되지 않으며 대화상자가 닫히지 않습니다. 기본 오류 메시지는 validityState.setCustomValidity('message here') 메서드를 사용하여 축소하도록 요청합니다. 맞춤 메시지를 설정하는 경우 모든 항목이 입력될 때 메시지를 명시적으로 빈 문자열로 설정해야 합니다. 유효하지 않으면 양식이 제출되지 않습니다.

기타 고려사항

사용자가 양식에 올바른 데이터를 입력하도록 지원하는 섹션 전체를 확인할 수 있습니다. 선한 영향력 따라서 안내를 포함하고 필요에 따라 힌트를 제공하여 사용자가 실수하지 않도록 하는 것이 중요합니다. 이 섹션에서는 HTML만으로 클라이언트 측 유효성 검사를 제공하는 방법을 다루지만 유효성 검사는 클라이언트 측과 클라이언트 측 모두에서 진행되어야 합니다. 있습니다. 양식을 작성하는 동안 방해되지 않는 방식으로 유효성 검사를 제공할 수 있습니다(예: 체크 표시를 합니다. 하지만 양식 컨트롤이 완료되기 전에 오류 메시지를 제공하지 마세요. 사용자가 실수를 한 경우 사용자에게 실수한 부분과 잘못한 부분을 알려주세요.

양식을 디자인할 때는 모든 사람이 나와 같은 것은 아니라는 점을 고려하는 것이 중요합니다. 다른 사용자 성으로 단일 글자를 사용하거나 (또는 성을 아예 사용하지 않음), 우편번호가 없거나, 3줄의 상세 주소를 포함할 수 있습니다. 에 상세 주소가 없을 수 있습니다. 사용자가 양식의 번역된 버전을 보고 있을 수 있습니다.

양식 컨트롤과 라벨, 오류 메시지가 정확하고 의미 있는 프로그래매틱 방식으로 화면에 표시되어야 합니다. 프로그램 방식으로 적절한 양식 요소 또는 그룹과 연결할 수 있어야 합니다. autocomplete 속성은 양식을 더 빠르게 작성하고 접근성을 개선하기 위해 사용할 수 있으며 사용해야 합니다.

HTML에서는 기본 양식 컨트롤의 접근성을 높일 수 있는 모든 도구를 제공합니다. 양식 요소 또는 프로세스의 상호작용이 많을수록 포커스 관리, ARIA 이름, 역할 설정 및 업데이트와 관련하여 접근성에 더 많은 주의를 기울여야 함 및 값, 필요한 경우 ARIA 라이브 공지사항을 전달받습니다. 하지만 여기서 배운 것처럼 HTML만 사용하면 ARIA 또는 JavaScript에 의존하지 않고도 접근성과 유효성 목표를 달성하는 데 큰 도움이 됩니다.

이해도 확인

양식에 관한 지식을 테스트합니다.