정의 및 사용 방법

required 속성은
폼 제출 시 사용자가 사전에 반드시 값을 입력하거나 선택해야 하는 필수(required) 컨트롤 요소임을 나타냅니다.

이 속성으로 필수 컨트롤을 지정하면, 브라우저가 폼 제출 전에 자동으로 해당 입력이나 선택을 검사하므로, 별도의 자바스크립트 검증 없이도 필수 컨트롤 검증을 쉽게 구현할 수 있습니다.

참고하세요!
required 속성으로 구현되는 필수 컨트롤 검증은 보안적인 측면에서 한계가 있습니다. 필수 컨트롤 검증은 서버측 언어로도 추가적인 검증이 필요합니다.

이 속성은 부울 속성(boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다.

기본 예제

HTML 
<form>
    <fieldset>
        <legend>비밀번호는 필수</legend>
        <p>
            <label for="username">이름</label>
            <input id="username" type="text">
        </p>
        <p>
            <label for="userpassword">비밀번호(*필수)</label>
            <input id="userpassword" type="password" required> <!-- 필수 입력 필드로 지정 -->
        </p>
        <p>
            <button type="submit">제출</button>
        </p>
    </fieldset>
</form>
실제 적용된 모습 실습 가이드: required 작동 확인
  • 오류 확인: 비밀번호(*필수) 필드에 입력이 없이, [제출] 버튼을 클릭해 보세요. 브라우저가 필수 입력에 대한 오류 메시지를 표시하는 것을 확인합니다.
  • 성공 확인: 비밀번호(*필수) 필드에 입력한 후, 다시 [제출] 버튼을 클릭하면 오류 없이 폼이 제출되는 것을 확인합니다.

required 속성이 사용 가능한 요소

required 속성은 모든 요소에 적용할 수 있는 글로벌 속성이 아닙니다.
값을 입력하거나 선택해야 하는 관련 컨트롤 요소(<input>의 일부 유형과 <textarea>, <select>)에만 사용 가능합니다.

required 속성은 사용자가 값을 입력하거나 선택해야 하는 목적으로, 다음 유형의 <input> 요소에는 적용되지 않으며 무시됩니다.

알아두세요!
readonly 속성으로 읽기 전용 상태가 된 요소는 사용자가 편집이 불가능하므로, required 속성이 적용(허용)되지 않습니다.

접근성 고려 사항

required 속성의 사용에 있어서, 시각 장애가 없는 사용자의 사용성 향상과 시각 장애인을 위한 접근성 고려 사항입니다.

CSS의 :required 가상 클래스 선택자

required 속성의 사용해서 해당 컨트롤 요소가 필수 항목임을 시각 장애가 없는 사용자에게 알리는 시각적인 표시를 제공해야 합니다.

CSS의 :required 가상 클래스는 required 속성이 설정된 <input>, <textarea>, <select> 요소를 선택합니다. :required 가상 클래스를 사용하면 필수 항목임을 나타내는 스타일을 쉽게 지정할 수 있습니다. 이렇게 하면 시각 장애가 없는 사용자의 사용성이 향상됩니다.

CSS 
:required {
    background-color: gold;
    border: 1px solid red;
}
HTML 
<form>
    <fieldset>
        <legend>비밀번호는 필수</legend>
        <p>
            <label for="username">이름</label>
            <input id="username" type="text">
        </p>
        <p>
            <label for="userpassword">비밀번호(<span style="color: red;">*필수</span>)</label>
            <input id="userpassword" type="password" required> <!-- 필수 입력 필드로 지정 -->
        </p>
        <p>
            <button type="submit">제출</button>
        </p>
    </fieldset>
</form>
실제 적용된 모습

시각 장애인을 위한 스크린 리더

required 속성의 사용은 시각 장애인을 위한 스크린 리더에 해당 요소가 필수 항목임을 알려줍니다. 하지만, 브라우저와 스크린 리더 조합이 아직 required 속성을 지원하지 않을 경우를 대비하여 aria-required="true"를 추가하는 것도 좋습니다. 이렇게 하면 스크린 리더에게 해당 요소가 폼 제출 전에 필수 항목임을 명시적으로 알려줍니다.

라디오 버튼 그룹에서 required 속성 사용

동일한 name을 공유하는 라디오 버튼 그룹에 required 속성 적용은 어떻게 해야 할까요? 그룹 내에서 최소한 하나의 라디오 버튼을 선택해서 required 속성 적용하면 라디오 버튼 그룹 전체가 필수 항목으로 그룹핑됩니다. 하지만 코드의 가독성을 위해 라디오 버튼 그룹에 속해 있는 모든 라디오 버튼에 required 속성을 적용하는 것이 더 좋습니다.

그룹 내에서 최소한 하나의 라디오 버튼에 지정

라디오 그룹 내에서 최소한 하나의 라디오 버튼을 선택해서 required 속성 적용하면 라디오 버튼 그룹 전체가 필수 항목으로 그룹핑됩니다.

HTML 
<form>
    <fieldset>
        <legend>색상 선택은 필수</legend>
        <p>
            <input id="red" type="radio" name="color" required> <!-- 그룹 내에서 최소한 하나의 라디오 버튼을 선택 -->
            <label for="red">Red</label>
        </p>
        <p>
            <input id="red" type="radio" name="color">
            <label for="green">Green</label>
        </p>
        <p>
            <input id="red" type="radio" name="color">
            <label for="blue">Blue</label>
        </p>
        <p>
            <button type="submit">제출</button>
        </p>
    </fieldset>
</form>
실제 적용된 모습 라디오 버튼에 체크하지 않고 '제출'버튼을 클릭해보세요!
브라우저가 필수 입력에 대한 오류 메시지를 표시하는 것을 확인할 수 있습니다.

그룹 내에 속한 모든 라디오 버튼에 지정

코드의 가독성을 위해 라디오 버튼 그룹에 속해 있는 모든 라디오 버튼에 required 속성을 적용하는 것이 더 좋습니다.

HTML 
<form>
    <fieldset>
        <legend>색상 선택은 필수</legend>
        <p>
            <input id="red" type="radio" name="color" required>
            <label for="red">Red</label>
        </p>
        <p>
            <input id="red" type="radio" name="color" required>
            <label for="green">Green</label>
        </p>
        <p>
            <input id="red" type="radio" name="color" required>
            <label for="blue">Blue</label>
        </p>
        <p>
            <button type="submit">제출</button>
        </p>
    </fieldset>
</form>
실제 적용된 모습 라디오 버튼에 체크하지 않고 '제출'버튼을 클릭해보세요!
브라우저가 필수 입력에 대한 오류 메시지를 표시하는 것을 확인할 수 있습니다.

체크박스에서 required 속성 사용

동일한 name을 공유하는 체크박스에서는 여러 개의 체크박스를 '하나의 그룹'으로 인식하지만, 오직 하나의 체크박스만 선택하는 것이 아니라, 여러 개의 체크박스를 선택할 수 있다는 점에서 동일한 name을 공유하는 라디오 버튼 그룹과는 다른점입니다.

하지만, 라디오 버튼 그룹과 동일하게 체크박스 그룹 전체를 필수 항목으로 지정하려면 그룹 내에서 최소한 하나의 체크박스를 선택해서 required 속성 적용하면 체크박스 그룹 전체가 필수 항목으로 그룹핑됩니다. 하지만 코드의 가독성을 위해 체크박스 그룹에 속해 있는 모든 체크박스에 required 속성을 적용하는 것이 더 좋습니다.

그룹 내에서 최소한 하나의 체크박스에 지정

체크박스 그룹 내에서 최소한 하나의 체크박스를 선택해서 required 속성 적용하면 체크박스 그룹 전체가 필수 항목으로 그룹핑됩니다.

HTML 
<form>
    <fieldset>
        <legend>관심이 있는 웹 개발 언어를 선택하세요. (최소 1개 선택)</legend>
        <div>
           <input type="checkbox" id="html" name="favorite" required> <!-- 그룹 내에서 최소한 하나의 체크박스를 선택 -->
           <label for="html">HTML</label>
        </div>
        <div>
           <input type="checkbox" id="css" name="favorite">
           <label for="css">CSS</label>
        </div>
        <div>
           <input type="checkbox" id="js" name="favorite">
           <label for="js">JavaScript</label>
        </div>
        <button type="submit">제출</button>
    </fieldset>
</form>
실제 적용된 모습 체크박스에 체크하지 않고 '제출'버튼을 클릭해보세요!
브라우저가 필수 입력에 대한 오류 메시지를 표시하는 것을 확인할 수 있습니다.

그룹 내에 속한 모든 체크박스에 지정

코드의 가독성을 위해 체크박스 그룹에 속해 있는 모든 체크박스에 required 속성을 적용하는 것이 더 좋습니다.

HTML 
<form>
    <fieldset>
        <legend>관심이 있는 웹 개발 언어를 선택하세요. (최소 1개 선택)</legend>
        <div>
           <input type="checkbox" id="html" name="favorite" required>
           <label for="html">HTML</label>
        </div>
        <div>
           <input type="checkbox" id="css" name="favorite" required>
           <label for="css">CSS</label>
        </div>
        <div>
           <input type="checkbox" id="js" name="favorite" required>
           <label for="js">JavaScript</label>
        </div>
        <button type="submit">제출</button>
    </fieldset>
</form>
실제 적용된 모습 체크박스에 체크하지 않고 '제출'버튼을 클릭해보세요!
브라우저가 필수 입력에 대한 오류 메시지를 표시하는 것을 확인할 수 있습니다.

추가 예제

지금까지 required 속성을 사용한 <input>의 일부 유형을 살펴봤습니다. 여기에서는 <textarea>와 <select>에 required 속성이 지정된 예제를 살펴보겠습니다.

<textarea>에서 required 속성 사용

HTML 
<form>
    <fieldset>
        <legend>댓글은 필수</legend>
        <p>
            <label for="username">이름</label>
            <input id="username" type="text">
        </p>
        <p>
            <label for="usercomment">댓글(*필수)</label>
            <textarea id="usercomment" required></textarea> <!-- 필수 입력 필드로 지정 -->
        </p>
        <p>
            <button type="submit">제출</button>
        </p>
    </fieldset>
</form>
실제 적용된 모습

<select>에서 required 속성 사용

HTML 
<form>
    <label for="user-color" style="display: block;">색상 선택(*필수)</label>
    <select id="user-color" required> <!-- 필수 선택 필드로 지정 -->
        <option value="" disabled selected>좋아하는 색상 선택</option>
        <option value="red">빨강</option>
        <option value="blue">파랑</option>
        <option value="yellow">노랑</option>
        <option value="green">초록</option>
    </select>
    <button type="submit">제출</button>
</form>
실제 적용된 모습

브라우저 호환성

required 속성의 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
required 예 예 예 예

명세서

required 속성의 명세서 사양
명세서 사양
<input> required HTML
#attr-input-required
<textarea> required HTML
#attr-textarea-required
<select> required HTML
#attr-select-required

참고문헌

같이 보기