안녕하세요 이번에는 HTML의 input 태그의 type 속성값들을 소개해 드리려고합니다.
input 태그에는 text button radio 외에도 엄청 다양한 종류가 있습니다. 이번에는 그것들을 소개해 드리도록 하겠습니다.
input 태그를 쓰실 때는 원래 form태그로 감싸주어야 합니다. 하지만 최근 Ajax 기술의 활성화로 인해 이 규칙을 지키지 않는 경우가 늘고 있다고 합니다.
text 속성
첫번째로 text 속성입니다.
결과물을 보겠습니다.
이런식으로 그저 텍스트를 쓰는 칸이 생깁니다.
여기에는 텍스트만 쓸 수 있고 별다른 기능은 없습니다.
password 속성
password 속성입니다. password는 주로 비밀번호를 적는 칸에 쓰입니다.
1 2 3 4 5 6 7 | <form> password <input type="password" name="pw" id="pw"> </form> | cs |
이렇게 입력한 뒤, 결과물을 보도록 하겠습니다.
이런식으로 글씨를 쓰시면 ●같은 모양으로 써집니다.
그래서 비밀번호를 치실 때 다른사람한테 보일 일은 없습니다.
(손가락이 읽혀버리면...)
radio 속성
radio 속성입니다. 이것은 동그란 모양의 체크표시입니다.
1 2 3 4 5 | <form> radio <input type="radio" name="name" checked> 첫번쩨 <br> radio <input type="radio" name="name"> 두번째 </form> | cs |
이렇게 입력한 뒤, 결과물을 보도록 하겠습니다.
이런식으로 동그라미 모양이 있고 체크를 하실 수 있습니다.
맨 처음 실행하셨을 때 첫번째 란에 체크가 되어있었죠? 그 이유는 바로
소스코드를 보시면 첫번째 input에 checked를 적어주었기 때문입니다.
checkbox 속성
checkbox 속성입니다. 이것은 아까 radio속성과 비슷하지만 네모모양의 체크박스를 생성하고 radio는 한개밖에 선택이 불가능하지만
checkbox는 여러가지를 선택하실 수 있습니다.
1 2 3 4 5 | <form> first <input type="checkbox" name="name"> twice <input type="checkbox" name="name"> </form> |
이렇게 입력한 뒤, 결과물을 보도록 하겠습니다.
이런식으로 한개 이상으로 선택하실 수가 있습니다.
submit 속성
submit 속성입니다. 이것은 form태그 내에서 입력된 내용들을 제출합니다. 이것은 서버와 관련됩니다.
1 2 3 4 | <form> <input type="submit"> </form> | cs |
이렇게 입력한 뒤, 결과물을 보도록 하겠습니다.
이런식으로 제출 버튼이 생겨납니다.
reset 속성
reset 속성입니다. 이것은 form 태그 내에 있는 모든 input태그를 초기화시킵니다.
1 2 3 4 5 | <form> <input type="text"> <input type="reset"> </form> | cs |
이렇게 입력한 뒤, 결과물을 보도록 하겠습니다.
이런식으로 초기화 버튼이 생겨납니다. 여기 text칸에 아무렇게나 입력한뒤,
초기화 버튼을 눌러주시면 text칸에 있는 내용이 초기화 됩니다.
button 속성
button 속성입니다. 이것은 button을 생성해냅니다. button을 누르시면 다양한 이벤트가 발생하게끔 만드실 수 있습니다.
1 2 3 4 | <form> <input type="button" value="Click" onclick="alert('Hi')"> </form> | cs |
이렇게 입력한 뒤, 결과물을 보도록 하겠습니다.
이런식으로 버튼이 생겨납니다. value를 이용해 버튼에 Click글씨가 나타나게 하였습니다.
버튼을 누르시면
이런식으로 onclick를 이용하여 버튼이 클릭되면 alert이 작동되게 하였습니다.
color 속성
color 속성입니다. 이 속성은 브라우저가 일부만 지원합니다. 이것은 색상 선택 양식을 생성해냅니다.
1 2 3 4 | <form> <input type="color"> </form> | cs |
이렇게 입력한 뒤, 결과물을 보도록 하겠습니다.
이런식으로 색상 선택 양식이 생성됩니다.
이것을 클릭하면 아래 사진처럼 색상을 선택할 수 있는 창이 뜹니다.
file 속성
file은 내 컴퓨터에서 파일을 골라 업로드 하실 수 있습니다.
1 2 3 4 | <form> <input type="file"> </form> | cs |
이렇게 입력한 뒤, 결과물을 보도록 하겠습니다.
이런식으로 파일 선택 버튼이 있습니다. 이 버튼을 누르시면 파일 선택창이 뜹니다.
date 속성
date 속성입니다. 이 속성은 브라우저가 일부만 지원합니다. 이것은 날짜 선택 양식을 생성해냅니다.
1 2 3 4 5 | <form> <input type="date" max="2018-12-31"> <input type="date" min="2000-01-01"> </form> | cs |
소스코드에 있는 max와 min의 뜻은 max="2018-12-31"은 최대 2018-12-31까지만 고르실 수 있다는 뜻이고
min="2000-01-01"은 최소 2000-01-01까지 선택하실 수 있고 그 이하는 안된다는 뜻입니다.
이런식으로 입력한 뒤, 결과물을 보도록 하겠습니다.
이런식으로 날짜 선택 양식이 생성됐습니다. 여기에 마우스를 갖다대면 화살표 3개가 생깁니다.
왼쪽에있는 화살표 두개는 연도를 고르실 수 있고 오른쪽 화살표를 누르시면 년도 월 일을 선택하실 수 있는 창이 뜹니다.
datetime-local 속성
datetime-local 속성입니다. 이 속성은 브라우저가 일부만 지원합니다. 이것은 위에 date와는 달리 날짜는 기본이고 시간까지 고르실 수 있습니다.
1 2 3 4 | <form> <input type="datetime-local"> </form> | cs |
이런식으로 입력한 뒤, 결과물을 보도록 하겠습니다.
이런식으로 날짜,시간 선택 양식이 생깁니다. 시간만 생길 뿐 date와 똑같습니다.
time 속성
time 속성은 위에 date와 datetime-local과 비슷합니다. 하지만 time은 오전, 시, 분만 고르실 수 있습니다. 이 속성은 브라우저가 일부만 지원합니다.
1 2 3 4 | <form> <input type="time"> </form> | cs |
이런식으로 입력한 뒤, 결과물을 보도록 하겠습니다.
이렇게 시간만 고르실 수 있습니다.
week 속성
week 속성은 위에 date와 비슷하지만 week는 주 단위로 정합니다. 이 속성은 브라우저가 일부만 지원합니다.
1 2 3 4 | <form> <input type="week"> </form> | cs |
email 속성
email 속성입니다. 이 속성은 이메일 형식을 담아냅니다. 이 속성은 브라우저가 일부만 지원합니다.
1 2 3 4 5 | <form> <input type="email"> <input type="submit"> </form> | cs |
이런식으로 입력한 뒤, 결과물을 보도록 하겠습니다.
일단은 text 속성과 생긴게 똑같네요? 그렇지만 text 속성과는 달리 다른점이 있습니다.
일단 아무런 글씨나 쓰고 제출을 눌러보도록 하겠습니다.
이런식으로 "이메일 주소에 '@'를 포함해 주세요. 'asdf'에 '@'가 없습니다." 라고 뜹니다. 신기하네요
@를 입력해볼까요?
역시 까다롭습니다. 이메일 형식인 @뒤에 아무것도 없어 오류가 나네요..
제대로 입력하고 다시 시도를 해보면?
제출을 눌러보니 이렇게 사라져버리네요. ㅋㅅㅋ
month 속성
이 속성은 브라우저가 일부만 지원합니다.
1 2 3 4 | <form> <input type="month"> </form> | cs |
이것은 date와 똑같지만 일 단위가 없습니다. 년도와 월까지 밖에 없습니다.
number 속성
이 속성은 브라우저가 일부만 지원합니다.
number 속성 숫자 생성 양식을 생성합니다.
1 2 3 | <form> <input type="number" min="0" max="10"> </form> | cs |
이런식으로 입력한 뒤, 결과물을 보도록 하겠습니다.
이런식으로 화살표가 있는 박스가 생깁니다. 여기서 min과 max를 이용하여 설정한 크기만큼 숫자를 고르실 수 있습니다.
range 속성
range 속성은 범위 선택 양식을 생성합니다. 이 속성은 브라우저가 일부만 지원합니다.
1 2 3 4 | <form> <input type="range" min="0" max="10"> </form> | cs |
소스코드에서 min과 max를 이용하여 설정한 크기만큼의 범위 내에서 크기를 정하실 수 있습니다.
이런식으로 입력한 뒤, 결과물을 보도록 하겠습니다.
범위 선택 양식이 생성되었습니다.
image 속성
image 속성은 이미지 형식의 버튼을 생성해냅니다.
1 2 3 4 | <form> <input type="image" src="파일주소"> </form> | cs |
이런식으로 입력한 뒤, 결과물을 보도록 하겠습니다.
그냥 이미지인것같지만 누르실 수가 있습니다. ㅋㅅㅋ
지금까지 input 태그 type 속성 정리였습니다.
ㅂㅇ
댓글