<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>
    <input type="submit">
</form>
실제 적용된 모습
input 태그의 type 속성 값의 브라우저 호환성
속성 값
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
type="button" 1 12 1 1
type="checkbox" 1 12 1 1
type="color" 20 14 29 12.1
type="date" 20 12 53 14.1
type="datetime-local" 20 12 93 14.1
type="email" 5 12 1 5
type="file" 1 12 1 1
type="hidden" 1 12 1 1
type="image" 1 12 1 1
type="number" 7 12 29 5.1
type="password" 1 12 1 1
type="radio" 1 12 1 1
type="range" 4 12 23 3.1
type="reset" 1 12 1 1
type="search" 5 12 4 10.6
type="submit" 1 12 1 1
type="tel" 3 12 1 4
type="text" 1 12 1 1
type="time" 20 12 57 14.1
type="url" 1 12 1 1
<input type="checkbox" checked>
<input type="radio" checked>
브라우저에서 실제 표시된 모습
<label for="user-id">아이디</label>
<input type="text" id="user-id" disabled>
브라우저에서 실제 표시된 모습
<label for="user-company">회사명</label>
<input type="text" id="user-company" placeholder="(예) 주식회사 가나다">
브라우저에서 실제 표시된 모습
<label for="user-number">수량 선택</label>
<input type="number" id="user-number" value="4" min="0" max="20" step="2">
브라우저에서 실제 표시된 모습

마지막 업데이트 정보: 2024-06-18

input 태그와 관련된 속성 값의 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
accept 1 12 1 1
alt 1 12 1 1
autocapitalize 4 79 111 지원하지 않음
autocomplete 14 79 4 6
checked 1 12 1 1
disabled 1 12 1 1
max 4 12 16 5
maxlength 1 12 1 1
min 4 12 16 5
minlength 40 17 51 10.1
name 1 12 1 1
pattern 4 12 4 5
placeholder 3 12 4 4
readonly 1 12 1 1
required 4 12 4 5
size 1 12 1 1
src 1 12 1 1
step 5 12 16 5
<!--
    # 매칭할 컨트롤 요소의 id 값인 "user-checking"을
    # label 태그의 for 속성의 값으로 지정했습니다.
-->
<label for="user-checking">저를 클릭하세요.</label>
<input type="checkbox" id="user-checking">
브라우저에서 실제 표시된 모습 <label>의 텍스트("저를 클릭하세요.")를 클릭하면 연결된 체크박스가 포커스됩니다.
<label>
    저를 클릭하세요.
    <input type="checkbox">
</label>
브라우저에서 실제 표시된 모습 <label>의 텍스트("저를 클릭하세요.")를 클릭하면 연결된 체크박스가 포커스됩니다.