대부분의 사이트와 애플리케이션에는 웹 양식이 포함되어 있습니다. Do웹사이트<form> 요소에 포함됩니다.
HTML <form> 요소는 정보 제출을 위한 대화형 컨트롤이 포함된 문서 랜드마크를 식별합니다. <form>에 중첩되어 있는 양식을 구성하는 모든 대화형 (비대화형) 양식 컨트롤을 찾을 수 있습니다.
HTML은 강력합니다. 이 섹션에서는 JavaScript를 추가하지 않고 HTML을 할 수 있는 작업을 포함하여 HTML의 강력한 기능에 중점을 둡니다. 클라이언트 측에서 양식 데이터를 사용하여 어떤 방식으로든 UI를 업데이트하는 데는 일반적으로 CSS 또는 JavaScript가 포함됩니다. 이에 관해서는 여기에서 다루지 않습니다. 양식 알아보기 과정 전체로 구성되어 있습니다. 여기서는 해당 섹션을 복제하지 않지만 몇 가지 양식 컨트롤과 컨트롤에 도움이 되는 HTML 속성을 소개합니다.
양식을 사용하면 사용자가 웹사이트 또는 애플리케이션과 상호작용하고, 입력된 정보를 검증하고, 데이터를 서버에 제출할 수 있습니다. HTML 속성을 사용하면 사용자가 양식 컨트롤을 선택하거나 값을 입력하도록 요구할 수 있습니다. HTML 속성은 값이 유효하기 위해 일치해야 하는 특정 기준을 정의할 수 있습니다. 사용자가 양식을 제출하려고 하면 모든 양식 컨트롤 값이 클라이언트 측 제약조건 유효성 검사를 거치고 데이터가 필수 기준과 일치할 때까지 제출을 차단할 수 있습니다. 모두 JavaScript를 사용하지 않습니다. 이 기능을 사용 중지할 수도 있습니다. <form>에 novalidate 속성을 설정하거나 버튼에 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 속성이 포함된 경우 양식 제출을 활성화하는 버튼에 설정된 값이 <form>에 설정된 action, enctype, method, target보다 우선합니다. 제약조건 유효성 검사는 양식 제출 전에 발생하지만 활성화된 제출 버튼에 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>
'Hoover Sukhdeep'을 선택하거나 브라우저에 첫 번째 옵션 값이 기본적으로 선택되므로 아무 작업도 하지 않음) 제출 버튼을 클릭하면 페이지가 새로고침되고 URL이 다음과 같이 설정됩니다.
https://web.dev/learn/html/forms?student=hoover
두 번째 옵션에는 value 속성이 없으므로 내부 텍스트가 값으로 제출됩니다. 'Blendan Smooth'를 선택하고 제출 버튼을 클릭하면 페이지가 새로고침되고 URL이 다음과 같이 설정됩니다.
https://web.dev/learn/html/forms?student=Blendan+Smooth
양식이 제출되면 선택되지 않은 체크박스, 선택되지 않은 라디오 버튼, 양식을 제출한 버튼 이외의 다른 버튼의 이름과 값을 제외하고 name이 있는 이름이 지정된 모든 양식 컨트롤의 이름과 값이 전송됩니다. 다른 모든 양식 컨트롤의 경우 양식 컨트롤에 이름이 있지만 값이 입력되거나 기본값이 없으면 양식 컨트롤의 name이 빈 값으로 제출됩니다.
22가지 입력 유형이 있으므로 모두 다룰 수는 없습니다.
단, 값을 포함하는 것은 사용자가 정보를 입력하도록 할 때 선택사항이지만 종종 포함하지 않는 것이 좋습니다.
사용자가 값을 수정할 수 없는 <input> 요소의 경우 유형이 hidden, radio, checkbox, submit, button, reset인 입력 요소의 값을 포함하여 항상 값을 포함해야 합니다.
양식 컨트롤에 고유한 name를 사용하면 서버 측 데이터 처리가 더 간단해지므로 체크박스와 라디오 버튼은 이 규칙의 예외인 상황에서 권장됩니다.
라디오 버튼
라디오 버튼 그룹 내에서 라디오 버튼을 선택하면 한 번에 하나만 선택할 수 있습니다. 이는 name 속성 때문입니다. 이 단 하나만 선택할 수 있는 효과는 그룹의 각 라디오 버튼에 동일한 name를 제공하여 만들어집니다.
name는 그룹별로 고유해야 합니다. 실수로 별도의 두 그룹에 동일한 name를 사용한 경우 두 번째 그룹에서 라디오 버튼을 선택하면 name가 동일한 첫 번째 그룹에서 선택한 항목이 선택 해제됩니다.
name와 선택한 라디오 버튼의 value가 양식과 함께 제출됩니다. 각 라디오 버튼에 관련성 있고 일반적으로 고유한 value가 있어야 합니다. 선택되지 않은 라디오 버튼의 값은 전송되지 않습니다.
각 그룹에 고유한 name가 있는 한 페이지에 원하는 만큼 라디오 그룹을 둘 수 있으며 각 그룹은 독립적으로 작동합니다.
이름이 같은 그룹이 선택된 라디오 버튼 중 하나가 있는 페이지를 로드하려면 checked 속성을 포함합니다.
이 라디오 버튼은 사용자가 다른 라디오를 선택하더라도 :default CSS 의사 클래스와 일치합니다. 현재 선택된 라디오 버튼은 :checked 유사 클래스와 일치합니다.
사용자가 라디오 버튼 그룹에서 라디오 컨트롤을 선택해야 하는 경우 하나 이상의 컨트롤에 required 속성을 추가합니다. 그룹의 라디오 버튼에 required를 포함하면 양식 제출 시 선택해야 하지만 유효하기 위해 선택되는 속성이 포함된 라디오가 될 필요는 없습니다. 또한 <legend>에 양식 컨트롤이 필수임을 명확히 표시합니다. 개별 버튼과 함께 라디오 버튼 그룹의 라벨 지정은 나중에 설명합니다.
체크박스
그룹 내 모든 체크박스의 name가 동일해야 합니다. 선택된 체크박스에만 name 및 value가 양식과 함께 제출됩니다. 이름이 같은 체크박스를 여러 개 선택한 경우 같은 이름이 다른 값으로 제출되는 것이 좋습니다. 이름이 같은 양식 컨트롤이 여러 개 있는 경우 모두 체크박스는 아니지만 앰퍼샌드로 구분하여 제출됩니다.
체크박스에 value를 포함하지 않으면 선택한 체크박스의 값이 기본적으로 on로 설정되므로 유용하지 않을 수 있습니다. 이름이 chk인 체크박스 3개가 있고 모두 선택되어 있으면 제출한 양식을 해독할 수 없습니다.
https://web.dev/learn/html/forms?chk=on&chk=on&chk=on
체크박스를 필수로 만들려면 required 속성을 추가합니다. 체크박스를 선택해야 하거나 양식 컨트롤이 필요한 경우 항상 사용자에게 알립니다. 체크박스에 required를 추가하면 이 체크박스만 필요하며 이름이 같은 다른 체크박스에는 영향을 미치지 않습니다.
라벨 및 필드 세트
사용자가 양식 작성 방법을 알 수 있도록 하려면 양식에 액세스할 수 있어야 합니다. 모든 양식 컨트롤에는 라벨이 있어야 합니다.
또한 양식 컨트롤 그룹에 라벨을 지정하려고 합니다. 개별 입력, 선택 영역, 텍스트 영역은 <label>로 라벨이 지정되며 양식 컨트롤 그룹은 그룹화하는 <fieldset>의 <legend> 콘텐츠로 라벨이 지정됩니다.
앞의 예에서 제출 버튼을 제외한 각 양식 컨트롤에 <label>가 있음을 알 수 있습니다. 라벨은 액세스 가능한 이름이 있는 양식 컨트롤을 제공합니다. 버튼은 콘텐츠 또는 값에서 액세스 가능한 이름을 가져옵니다. 다른 모든 양식 컨트롤에는 연결된 <label>가 필요합니다. 연결된 라벨이 없어도 브라우저는 양식 컨트롤을 계속 렌더링하지만, 사용자는 어떤 정보가 필요한지 알 수 없습니다.
양식 컨트롤을 <label>에 명시적으로 연결하려면 <label>에 for 속성을 포함하세요. 이 속성은 연결된 양식 컨트롤의 id인 값입니다.
<label for="full_name">Your name</label>
<input type="text" id="full_name" name="name">
라벨을 양식 컨트롤과 연결하면 여러 가지 이점이 있습니다. 라벨을 사용하면 컨트롤에 액세스 가능한 이름을 제공하여 스크린 리더 사용자가 양식 컨트롤에 액세스할 수 있습니다. 라벨은 '조회 영역'이기도 합니다. 영역을 늘려서 수동기민성 문제가 있는 사용자가 사이트를 더 유용하게 사용할 수 있도록 합니다. 마우스를 사용하는 경우 '내 이름' 라벨의 아무 곳이나 클릭합니다. 이렇게 하면 입력에 포커스가 맞춰집니다.
암시적 라벨을 제공하려면 여는 태그와 닫는 <label> 태그 사이에 양식 컨트롤을 포함합니다. 이는 스크린 리더와 포인터 기기 관점에서 모두 동일하게 액세스할 수 있지만 명시적 라벨과 같은 스타일 지정 후크는 제공하지 않습니다.
<label>Your name
<input type="text" name="name">
</label>
라벨은 '조회 영역'이므로 명시적 라벨 내에 상호작용 요소를 포함하거나 암시적 라벨에 라벨이 지정된 양식 컨트롤 이외의 기타 상호작용 구성요소를 포함하지 마세요. 예를 들어 라벨에 링크를 포함했는데 브라우저에서 HTML을 렌더링하는 경우, 라벨을 클릭하여 양식 컨트롤을 입력하지만 새 페이지로 리디렉션된다면 사용자는 혼란스러워할 수 있습니다.
일반적으로 <label>는 양식 컨트롤 앞에 옵니다. 라디오 버튼과 체크박스의 경우는 예외입니다. 필수는 아닙니다.
일반적인 UX 패턴일 뿐입니다. 양식 알아보기 시리즈에서 양식 디자인에 대한 정보를 확인할 수 있습니다.
라디오 버튼과 체크박스 그룹의 경우 라벨이 연결된 양식 컨트롤의 액세스 가능한 이름을 제공하지만, 컨트롤 그룹과 라벨도 라벨이 필요합니다. 그룹에 라벨을 지정하려면 모든 요소를 <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로 필드 세트에 액세스할 수 있지만 필드 세트 자체는 제출된 데이터에 포함되지 않습니다 (내부에 중첩된 이름이 지정된 양식 컨트롤이 포함됨).
입력 유형 및 동적 키보드
앞서 언급했듯이 22가지 유형의 입력이 있습니다.
사용자가 휴대전화와 같이 필요한 경우에만 표시되는 동적 키보드가 있는 기기를 사용하는 경우 사용되는 입력 유형에 따라 표시되는 키보드 유형이 결정됩니다. 표시된 기본 키보드는 필요한 입력 유형에 최적화할 수 있습니다.
예를 들어 tel를 입력하면 전화번호를 입력하는 데 최적화된 키패드가 표시되고 email에는 @ 및 .가 포함되며 url의 동적 키보드에는 콜론과 슬래시 기호가 포함됩니다. 하지만 iPhone에는 여전히 url 입력 유형의 기본 동적 키보드에 :가 포함되어 있지 않습니다.
iPhone 및 2가지 Android 휴대전화의 <input type="tel">용 키보드:
iPhone 및 2가지 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에서 값이 잘못된 양식이 제출되는 것을 방지할 수 있습니다.
HTML 속성 유무에 따라 양식 컨트롤과 일치하는 몇 가지 CSS 선택자가 있습니다. 예를 들어 부울 required가 설정되거나 설정되지 않은 경우 :required 및 :optional, checked가 하드 코딩된 경우 :default, 요소가 있고 요소가 대화형인지 여부에 따라 :enabled 또는 :disabled가 있습니다.31 disabled :read-write 의사 클래스는 기본적으로 수정 가능한 contenteditable 및 양식 컨트롤(예: number, password, text 입력 유형)이 있는 요소와 일치합니다(체크박스, 라디오 버튼, hidden 유형 등은 제외). 일반적으로 쓰기 가능한 요소에 readonly 속성이 설정되어 있으면 이 요소는 대신 :read-only과 일치합니다.
사용자가 양식 컨트롤에 정보를 입력하면 :valid, :invalid, :in-range, :out-of-range을 포함한 CSS UI 선택기가 상태에 따라 사용 설정 또는 사용 중지됩니다. 사용자가 양식 컨트롤을 종료하면 아직 완전히 지원되지 않는 :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 오류가 표시됩니다. 명시적으로 1로 설정하든 기본값이 1이든 값이 step 값과 함께 단계를 벗어나면 컨트롤은 :out-of-range (및 :invalid)가 되고 validityState.stepMismatch 오류가 발생합니다. 오류는 도움말 풍선으로 표시되며 기본적으로 오류를 수정하는 방법에 관한 유용한 정보를 제공합니다.
값의 길이에도 유사한 속성이 있습니다. minlength 및 maxlength 속성은 제출 시 validityState.tooLong 또는 validityState.tooShort 오류에 관해 사용자에게 알립니다.
또한 maxlength는 사용자가 너무 많은 문자를 입력하지 못하게 합니다.
maxlength 속성을 사용하면 사용자 환경이 저하될 수 있습니다. 일반적으로 사용자가 카운터를 제공하는 허용된 문자 길이보다 더 많이 입력할 수 있으며, 선택사항으로 양식과 함께 제출되지 않는 <output> 요소의 형식으로 사용자가 입력할 수 있도록 허용하는 것이 더 좋습니다. 그러면 사용자가 출력에 허용된 최대 길이를 초과하지 않은 것으로 표시될 때까지 텍스트를 수정할 수 있습니다. maxlength는 HTML에 포함할 수 있습니다. 지금까지 설명한 모든 내용과 마찬가지로 자바스크립트 없이 작동합니다. 그런 다음 로드 시 maxlength 속성 값을 사용하여 JavaScript로 이 글자 수 카운터를 만들 수 있습니다.
일부 입력 유형에는 기본 제약 조건이 있는 것처럼 보이지만 그렇지 않습니다. 예를 들어 tel 입력 유형은 동적 키보드가 있는 기기에서 숫자 전화 키패드를 제공하지만 유효한 값을 제한하지 않습니다. 이 경우와 다른 입력 유형에는 pattern 속성이 있습니다. 유효한 것으로 간주되기 위해 값이 일치해야 하는 정규 표현식을 지정할 수 있습니다.
값이 빈 문자열이고 값이 필요하지 않은 경우 validityState.patternMismatch 오류가 발생하지 않습니다. 필수이고 비어 있는 경우 validityState.valueMissing의 기본 오류 메시지가 patternMismatch 대신 사용자에게 표시됩니다.
이메일의 경우 validityState.typeMismatch가 사용자의 필요에 비해 너무 관대할 수 있습니다. TLD가 없는 인트라넷 이메일 주소는 유효한 것으로 허용되지 않도록 pattern 속성을 포함하는 것이 좋습니다.
패턴 속성을 사용하면 값이 일치해야 하는 정규 표현식을 제공할 수 있습니다. 패턴 일치를 요구할 때는 예상되는 동작이 사용자에게 매우 명확해야 합니다.
이 모든 작업은 JavaScript 한 줄 없이도 수행할 수 있지만 HTML API이기 때문에 JavaScript를 사용하여 제약조건 유효성 검사 중에 커스텀 메시지를 포함할 수 있습니다. JavaScript를 사용하여 남은 문자 수를 업데이트하거나 비밀번호 안전성에 관한 진행률 표시줄을 표시하거나 그 밖의 다양한 방법으로 완료율을 동적으로 개선할 수 있습니다.
예
이 예에는 <dialog> 내에 중첩된 <form>이 있고, 양식 컨트롤 3개와 제출 버튼 2개, 명확한 라벨과 안내가 포함된 양식이 있습니다.
첫 번째 제출 버튼을 누르면 대화상자가 닫힙니다. formmethod="dialog"를 사용하여 양식의 기본 메서드를 재정의하고, 데이터를 제출하거나 삭제하지 않고 <dialog>를 닫습니다. formnovalidate도 포함해야 합니다. 그러지 않으면 브라우저에서 모든 필수 필드에 값이 있는지 확인하려고 시도합니다. 사용자는 데이터를 입력하지 않고 대화상자와 양식을 닫으려고 할 수 있습니다. 유효성 검사를 통해 이를 방지할 수 있습니다. 'X'가 알려진 시각적 신호이지만 설명 라벨이 아니므로 aria-label="close"를 포함합니다.
양식 컨트롤에는 모두 암시적 라벨이 있으므로 id 또는 for 속성을 포함하지 않아도 됩니다. 입력 요소에는 모두 필수인 필수 속성이 있습니다. 숫자 입력에는 step가 어떻게 포함되는지 보여주기 위해 명시적으로 설정된 step가 있습니다. step의 기본값은 1이므로 이 속성을 생략할 수 있습니다.
<select>에는 기본값이 있으므로 required 속성은 필요하지 않습니다. 각 옵션에 value 속성을 포함하지 않고 값은 기본적으로 내부 텍스트로 설정됩니다.
끝에 있는 제출 버튼은 양식 메서드를 POST로 설정합니다. 클릭하면 각 값의 유효성을 검사합니다. 모든 값이 유효하면 양식 데이터가 제출되고 대화상자가 닫히며 페이지가 작업 URL인 thankyou.php로 리디렉션될 수 있습니다. 값이 누락되거나 숫자 값에 단계 불일치가 있거나 범위를 벗어나면 관련 브라우저 정의 오류 메시지가 표시되고 양식이 제출되지 않으며 대화상자가 닫히지 않습니다.
기본 오류 메시지는 validityState.setCustomValidity('message here') 메서드를 사용하여 맞춤설정할 수 있습니다. 커스텀 메시지를 설정하는 경우 모든 것이 유효하거나 양식이 제출되지 않으면 메시지를 빈 문자열로 명시적으로 설정해야 한다는 점에 유의하세요.
기타 고려사항
사용자가 양식에 올바른 데이터를 입력하도록 지원하는 섹션이 있습니다. 우수한 사용자 환경을 제공하려면 필요에 따라 안내를 포함하고 힌트를 제공하여 사용자가 오류를 범하지 않도록 예방하는 것이 중요합니다. 이 섹션에서는 HTML 단독으로 클라이언트 측에서 유효성 검사를 제공하는 방법을 설명하지만 유효성 검사는 클라이언트 측과 서버 측 모두에 이루어져야 합니다. 값이 올바르면 체크표시를 추가하는 등 양식 작성 중에 눈에 거슬리지 않는 방식으로 유효성 검사를 제공할 수 있습니다. 하지만 양식 컨트롤이 완료되기 전에는 오류 메시지를 제공하면 안 됩니다. 사용자가 실수를 했다면 사용자에게 실수가 무엇이고 무엇이 잘못되었는지 알립니다.
양식을 디자인할 때는 모든 사람이 나와 같은 것은 아니라는 점을 고려해야 합니다. 누군가는 한 글자를 성으로 사용하거나, 우편번호가 없거나, 3줄 상세 주소가 있거나, 상세 주소가 없을 수 있습니다. 사용자가 양식의 번역된 버전을 보고 있을 수 있습니다.
양식 컨트롤, 라벨, 오류 메시지는 화면에 표시되고 정확하고 유의하며 프로그래매틱 방식으로 결정 가능하며 프로그래매틱 방식으로 적절한 양식 요소 또는 그룹과 연결되어야 합니다. autocomplete 속성은 더 빠른 양식 작성을 사용 설정하고 접근성을 개선하기 위해 사용해야 합니다.
HTML은 기본 양식 컨트롤에 액세스할 수 있도록 하는 모든 도구를 제공합니다. 양식 요소 또는 프로세스의 상호작용이 활발할수록 포커스 관리, ARIA 이름, 역할 및 값(필요한 경우) 설정 및 업데이트, 필요한 ARIA 실시간 알림과 관련하여 접근성에 더 많은 주의를 기울여야 합니다. 하지만 여기서 배운 것처럼 HTML만 사용하면 ARIA 또는 JavaScript를 사용하지 않고도 접근성과 유효성이라는 목표를 향해 나아갈 수 있습니다.
학습 내용 확인하기
양식에 관한 지식을 테스트합니다.
라디오 버튼이 동일한 그룹에 속하게 하려면 어떻게 해야 하나요?
name 속성 값을 부여합니다.id 속성 값을 부여합니다.이 양식 필드의 용도를 사용자에게 알리는 데 사용되는 HTML 요소는 무엇인가요?
<h1><title><label>