티스토리 뷰

[개발]프로그래밍/html5

[html5] input type(hidden,text,password) - 숨김,텍스트,비밀번호

좋은 블로그 2021. 2. 4. 11:09
1. 개념
input type = hidden,text,password - 숨김,텍스트,비밀번호
hidden 타입은 화면에서 입력한 어떠한 폼도 보이지 않고 숨겨진 value 값을 서버로 전송되는 요소를 말함
text 타입은 한 줄로 텍스트를 입력할 수 있는 필드를 말함

속성

설명

name

필드 구분을 위한 이름 붙이기

size

화면에 몇 글자까지 보이게 할 것인지를 지정

value

필드 부분에 표시되고자 하는 내용

maxlength

최대로 입력 가능한 문자 개수를 설정
password 타입은 입력한 내용이 화면에 보이지 않고 '*' 나 '·'로 표시됨
2. 태그
input type = hidden,text,password
html5 코드
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<! DOCTYPE html>
<html lang = "kr" >
<head>
<meta charset = "utf-8" >
<title> 키보드와 하루 </title>
</head>
<body>
<form>
1
<input type = "hidden" name = "hid_value" value = "test1" >
2
<input type = "text" name = "text_value" value = "테스트1" size = "20" maxlength = "10" >
3
<input type = "password" name = "pwd_value" size = "10" maxlength = "5" >
</form>
</body>
</html>
결과 화면
코드 설명
1
<input type = "hidden" ...... >
hidden 타입은 화면에서 보는 것처럼 1번이 보이지 않습니다.
즉 화면에서는 어떠한 표시도 되지 않지만 서버로 보낼 때 함께 보내지는 값을 의미합니다.
사용자가 쓰기에는 이해가 되지 않고 별 필요가 없어 보일 이 hidden 타입은 관리자 입장에서는 자주 쓰이는 태그 중 하나입니다.
2
<input type = "text" ...... >
text 타입은 2번에서 보이는 것처럼 결과를 나타냅니다.
이 타입 안에 포함된 속성을 써봤습니다.
name은 필드를 구분하기 위해 썼고 value에 테스트1이라고 입력하면 화면을 호출 할 때 초기값으로 테스트1이 입력되어 표시가 됩니다
만약 value 값을 설정해 주지 않으면 아무런 값도 입력되지 않는 것을 확인하실 수 있습니다
size는 20으로 입력할 수 있는 20글자까지 입력할 수 있도록 하였고 maxlength은 10으로 10자리 까지만 입력 가능하게 했습니다.
3
<input type = "password" ...... >
password 타입은 화면에서 보는 것처럼 어떠한 값을 입력해도 '·' 이러한 표시로 나타나는 것을 확인하실 수 있습니다.
속성은 text 타입에서 value 타입만 빼고 나머지는 그대로 이용하실 수 있습니다
그래서 위에서 보는 것처럼 size는 10으로 하고 maxlength는 5로 설정해서 위와 같이 화면에 나타나는 것을 확인하실 수 있습니다.
저작자표시

'[개발]프로그래밍 > html5' 카테고리의 다른 글

[html5] input type = number,range,radio,checkbox - 숫자,슬라이드 막대,라디오,체크박스  (0) 2021.02.08
[html5] input type = search,url,email,tel - 검색,웹주소,메일주소,전화번호  (0) 2021.02.05
[html5] fieldset,legend - 폼에서 그룹으로 표현  (0) 2021.02.03
[html5] label - 폼 요소 앞에 붙여 활용하기  (0) 2021.02.02
[html5] form - 사용자 입력 정보 보내기  (0) 2021.02.01
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday