view
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!-- text -->
<input type="text" class="o-input o-input--text" placeholder="text">
<!-- text + required -->
<input type="text" class="o-input o-input--text" required placeholder="required">
<!-- text + pattern -->
<input type="text" class="o-input o-input--text" maxlength="4" pattern="[0-9]{4}" placeholder="pattern">
<!-- text + inputmode numeric -->
<input type="text" class="o-input o-input--text" inputmode="numeric" placeholder="numeric">
<!-- text + disabled -->
<input type="text" class="o-input o-input--text" disabled placeholder="disabled">
<!-- text + readonly -->
<input type="text" class="o-input o-input--text" readonly placeholder="readonly">
<!-- search -->
<input type="search" class="o-input o-input--text" placeholder="search">
<!-- number -->
<input type="number" class="o-input o-input--text" placeholder="number">
<!-- tel -->
<input type="tel" class="o-input o-input--text" maxlength="4" pattern="[0-9]{4}" placeholder="tel">
<!-- password -->
<input type="password" class="o-input o-input--text" placeholder="password">
<!-- url -->
<input type="url" class="o-input o-input--text" pattern="(http|https)://.*" placeholder="url">
<!-- email -->
<input type="email" class="o-input o-input--text" placeholder="email">
-
maxlength: 최대 허용 길이, number type 에서는 적용되지 않음 -
inputmode: 모바일 키패드 모드 설정 -
pattern: 정규식을 넣어 데이터를 검증할 수 있는 속성 -
required: 필수 입력
Screen Reader 지원
| 속성 | Sense Reader | NVDA | VoiceOver | TalkBack |
|---|---|---|---|---|
| required | X | O | O | X |
Screen Reader 음성 출력
- Sense Reader
text 편집창
required 편집창
pattern 편집창
numeric 편집창
사용 불가 disabled 편집창
readonly 편집창
url 편집창
email 편집창
search 편집창
number 편집창
tel 편집창
password 암호 편집창 - NVDA
text 편집창 빈줄
required 편집창 필요함 입력 오류 빈줄
pattern 편집창 빈줄
numeric 편집창 빈줄
disabled 편집창 사용불가
readonly 편집창 읽기 전용 빈줄
search 편집창 빈줄
number 스핀 버튼 편집 가능 빈줄
tel 편집창 빈줄
password 편집창 보호됨 빈줄
url 편집창 빈줄
email 편집창 빈줄 - VoiceOver
text, 텍스트 필드
required , 텍스트 필드, 필수 사항
pattern, 텍스트 필드
numeric, 텍스트 필드
disabled, 흐리게 표시됨, 텍스트 필드
readonly, 텍스트 필드, 읽기 전용
search, 검색 필드
number, 텍스트 필드
tel, 텍스트 필드
password, 보안 텍스트 필드
url, 텍스트 필드
email, 텍스트 필드 - TalkBack
수정창 텍스트
수정창 required
수정창 pattern
수정창 numeric
수정창 disabled 사용할 수 없음
수정창 readonly 시용할 수 없음
검색어 입력란 search
number 스핀 버튼
수정창 tel
비밀번호 수정창 password
수정창 url
수정창 email
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
// text
.o-input--text {
display: block;
width: 100%;
height: 45px;
padding: 0 14px;
border: 1px solid #ccc;
background-color: #fff;
font-size: 15px;
line-height: 43px;
text-align: left;
&:hover,
&:focus {
border-color: #000;
}
&[readonly],
&:disabled {
border-color: #ccc !important; // hover, focus 시 border color 변경 X
background-color: #f4f4f4;
cursor: default;
}
// default style
// search - cancel button
&::-webkit-search-cancel-button {
display: none;
}
// number - spin button
&::-webkit-inner-spin-button,
&::-webkit-outer-spin-button {
-webkit-appearance: none;
appearance: none;
}
}