<form action="submit_url" method="get" class="form-example">
    <div class="form-example">
        <label for="user-name">이름</label>
        <input type="text" id="user-name" name="user-name" required>
    </div>
    <div class="form-example">
        <label for="user-email">이메일</label>
        <input type="email" id="user-email" name="user-email" required>
    </div>
    <button type="submit">제출하기</button>
</form>
브라우저에서 실제 표시된 모습
<form action="submit_url">
    <label for="user-name">이름</label>
    <input type="text" id="user-name" name="user-name">
    <button type="submit">제출하기</button>
</form>
<form action="submit_url" method="post">
    <label for="user-name">이름</label>
    <input type="text" id="user-name" name="user-name">
    <button type="submit">제출하기</button>
</form>
<h3>유효성 검사를 진행함</h3>
<p>올바른 형식의 URL을 입력했는지 검사</p>
<form>
    <label for="user-url">홈페이지 주소</label>
    <input type="url" id="user-url" name="user-url">
    <button type="submit">제출</button>
</form>
<h3>유효성 검사를 진행하지 않음</h3>
<p>올바른 형식의 URL을 입력했는지 검사를 진행하지 않음</p>
<form novalidate>
    <label for="user-url-1">홈페이지 주소</label>
    <input type="url" id="user-url-1" name="user-url-1">
    <button type="submit">제출</button>
</form>
브라우저에서 실제 표시된 모습 URL을 입력하고 유효성 검사가 진행되는지 실제로 테스트 해보세요!
주의! URL을 입력하지 않으면 유효성 검사 없이 양식이 제출됩니다.
<h3>required 속성 검사를 진행함</h3>
<p>required 속성이 있는지 검사</p>
<form>
    <label for="user-name">이름</label>
    <input type="text" id="user-name" name="user-name" required>
    <button type="submit">제출</button>
</form>
<h3>required 속성 검사를 진행하지 않음</h3>
<p>required 속성이 있는지 검사를 진행하지 않음</p>
<form novalidate>
    <label for="user-name-1">이름</label>
    <input type="text" id="user-name-1" name="user-name-1" required>
    <button type="submit">제출</button>
</form>
브라우저에서 실제 표시된 모습 required 속성 검사가 진행되는지 실제로 테스트 해보세요!
<form action="submit_url" method="post" target="_blank">
    <label for="user-name">이름</label>
    <input type="text" id="user-name" name="user-name">
    <button type="submit">제출하기</button>
</form>
<form action="submit_url" method="post" enctype="multipart/form-data">
    <label for="user-file">파일 업로드</label>
    <input type="file" id="user-file" name="user-file">
    <button type="submit">제출하기</button>
</form>
form 태그와 관련 속성의 브라우저 호환성
태그와 관련 속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
<form> 1 12 1 4
action 1 12 1 3
novalidate 10 12 4 10.1
target 1 12 1 3
enctype 1 12 1 3