size : 텍스트 필드 , 비밀번호 필드 , 검색 필드와 같이 한 줄로 입력되는 필드에서 화면에 몇 글자까지 보여지게 할지 지정
maxlength : minlength와는 반대로 최대 몇 글자까지 입력할 수 있는지를 지정
minlength : 최소 몇 글자까지 입력해야 하는지를 지정
티스토리 뷰
1. 개념
size,maxlength,minlength - 길이, 최대 글자 수, 최소 글자 수
2. 태그
size,maxlength,minlength
html5 코드
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<!
DOCTYPE
html>
<html lang
=
"kr"
>
<head>
<meta charset
=
"utf-8"
>
<title>
키보드와 하루
</title>
</head>
<body>
<form>
1
<label>
size 속성 :
</label>
<input type
=
"text"
size
=
"10"
><br><br>
2
<label>
maxlength 속성 :
</label>
<input type
=
"text"
maxlength
=
"10"
><br><br>
3
<label>
minlength 속성 :
</label>
<input type
=
"text"
minlength
=
"5"
>
</form>
</body>
</html>
|
결과 화면
코드 설명
1
<input type
=
"text"
size
=
"10"
>
size를 10으로 지정한 뒤에 size를 지정하지 않는 2,3번과 비교를 해보면 텍스트 입력할 수 있는 필드 넓이가 작아진 것을 확인하실 수 있습니다.
크롬으로 테스트를 진행해 보았는데 한글,영문과 숫자를 입력해 보았을 때 섞어서 입력해을 경우에 입력될 수 있는 글자 수가 조금씩 달라집니다.
크롬으로 테스트를 진행해 보았는데 한글,영문과 숫자를 입력해 보았을 때 섞어서 입력해을 경우에 입력될 수 있는 글자 수가 조금씩 달라집니다.
2
<input type
=
"text"
maxlength
=
"10"
>
maxlength로 최대 10글자까지만 입력하라고 지정을 해두었습니다
그리고 1부터 0까지 입력을 하고 더 입력을 하려고 하니 입력이 되지 않는 것을 확인할 수 있었습니다.
최대 길이를 제한하고자 할 경우에는 maxlength로 지정해주시면 됩니다.
그리고 1부터 0까지 입력을 하고 더 입력을 하려고 하니 입력이 되지 않는 것을 확인할 수 있었습니다.
최대 길이를 제한하고자 할 경우에는 maxlength로 지정해주시면 됩니다.
3
<input type
=
"text"
minlength
=
"5"
>
minlength는 maxlength와는 다르게 최소 길이를 지정해 주는 것인데요.
예제로 5라고 지정을 해 놓고 테스트를 진행해 보았습니다. 23이라는 두 글자를 입력하고 전송 버튼을 누르니깐 위에서와 같이 에러 메시지가 나오고 전송이 되지 않는 것을 확인할 수 있습니다.(크롬 기준)
예제로 5라고 지정을 해 놓고 테스트를 진행해 보았습니다. 23이라는 두 글자를 입력하고 전송 버튼을 누르니깐 위에서와 같이 에러 메시지가 나오고 전송이 되지 않는 것을 확인할 수 있습니다.(크롬 기준)
'[개발]프로그래밍 > html5' 카테고리의 다른 글
| [html5] iframe - 다른 html을 호출하기 위한 프레임 (0) | 2021.02.22 |
|---|---|
| [html5] multiple,datalist - 데이터 목록 나열 (0) | 2021.02.19 |
| [html5] readonly,required - 읽기 전용,필수 값 지정 (0) | 2021.02.17 |
| [html5] autofocus,placeholder - 커서 위치,힌트 표시 (0) | 2021.02.16 |
| [html5] input type = image,button,file - 이미지 버튼, 버튼 , 파일 첨부 (0) | 2021.02.15 |
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday