지난번 글에서 form 태그에 대해 알아보면서 <input>태그도 잠시 나왔는데 오늘은 입력양식 태그인 <input>태그에 대해 조금 더 상세하게 알아보겠습니다.
<input>태그 속성값
- text: 글자 입력란
- password: 비밀번호 입력란
- button: 버튼 생성
- submit: 제출 버튼 생성
- checkbox: 체크박스 생성
- radio: 라디오 버튼 생성
- file: 파일 입력 양식
- hidden: 숨김
- image: 이미지 생성
- reset: 초기화 버튼 생성
<input>태그 속성값은 이외에도 종류가 많기 때문에 2편에 조금 더 다루겠습니다.
지난 번 글에서 간단한 로그인 양식을 만들어봤는데 이번엔 type속성값 각각의 예시를 보여드리겠습니다.
① text
표시방법1
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html lang="ko"> <head> <title>input태그 속성값</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <form> <input type="text"> </form> </body> </html> | cs |
속성값 text의 기본표시방법입니다. type속성값을 text로 지정해주시면 됩니다.
실제 웹페이지에서는 글자 입력란이 생기고 원하는 글자를 입력할 수 있습니다.
일반적으로 <input>태그는 <form>태그 안에 있어야 하지만 <input>태그만 따로 사용해도 괜찮습니다.
표시방법2
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html lang="ko"> <head> <title>input태그 속성값</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <form> <input type="text" value="000"> </form> </body> </html> | cs |
type속성값과 value속성값 "000"을 지정해주면 공란이었던 글자입력란에 000이 입력되어 있는 것을 확인할 수 있습니다. 클릭해서 글자를 입력하면 value값 000 뒤로 글자가 입력됩니다.
표시방법3
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html lang="ko"> <head> <title>input태그 속성값</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <form> <input type="text" value="" placeholder="아이디를 입력하세요"> </form> </body> </html> | cs |
placeholder속성값인 "아이디를 입력하세요"를 넣어주면 글자입력란에 회색으로 글자가 표시됩니다. 여기에 클릭해서 글자를 넣으면 placeholder속성값은 저절로 없어지고 내가 넣은 글자만 입력됩니다. 사용자가 알기 쉽도록 글자입력란 설명을 넣어준다고 생각하시면 됩니다.
placeholder속성값은 value값이 없을 때 표시됩니다.
② password
표시방법1
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html lang="ko"> <head> <title>input태그 속성값</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <form> <input type="password"> </form> </body> </html> | cs |
password의 기본 표시방법입니다. text와 같은 글자입력란이 생기지만 글자를 입력해보면 차이가 납니다. 글자나 숫자가 보이지 않고 표시됩니다.
표시방법2
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html lang="ko"> <head> <title>input태그 속성값</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <form> <input type="password" placeholder="비밀번호를 입력하세요"> </form> </body> </html> | cs |
placeholder속성값을 "비밀번호를 입력하세요"로 넣으면 사용자가 알기 쉽게 표현되겠습니다.
③ button
표시방법1
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html lang="ko"> <head> <title>input태그 속성값</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <form> <input type="button"> </form> </body> </html> | cs |
button의 기본 표시방법입니다. 마우스로 클릭하면 클릭표현이 됩니다.
표시방법2
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html lang="ko"> <head> <title>input태그 속성값</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <form> <input type="button" value="버튼"> </form> </body> </html> | cs |
이 버튼에 value값 "버튼"을 넣어주면 버튼 안에 글자가 표시됩니다.
④ submit
표시방법1
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html lang="ko"> <head> <title>input태그 속성값</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <form> <input type="submit"> </form> </body> </html> | cs |
submit의 기본 표시방법입니다. 버튼과 같이 표현됩니다. value속성값을 따로 주지 않았는데도 제출이라는 글자가 표시됩니다.
submit와 button의 차이점은 클릭하면 알 수 있습니다. submit을 클릭하면 어떤 페이지로 전송되어 주소표시창에 나타납니다.
표시방법2
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html lang="ko"> <head> <title>input태그 속성값</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <form> <input type="submit" value="전송"> </form> </body> </html> | cs |
submit 안의 글자도 value속성값을 이용해 변경가능합니다.
⑤ checkbox
표시방법1
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html> <html lang="ko"> <head> <title>input태그 속성값</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <form> 독서 <input type="checkbox"> 음악감상 <input type="checkbox"> 운동 <input type="checkbox"> 기타 <input type="checkbox"> </form> </body> </html> | cs |
checkbox의 기본 표시방법입니다. 체크박스는 여러 개를 선택할 때 사용합니다.
저는 취미에 대한 선택지로 나열해보았습니다. 글자 옆 체크박스가 생성되었고 클릭하면 체크표시가 되는 것을 확인할 수 있습니다.
표시방법2
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html> <html lang="ko"> <head> <title>input태그 속성값</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <form> 독서 <input type="checkbox" name="c1"> 음악감상 <input type="checkbox" name="c1"> 운동 <input type="checkbox" name="c1"> 기타 <input type="checkbox" name="c1"> </form> </body> </html> | cs |
그룹별로 name속성값을 줄 수도 있습니다. 실제 웹페이지에서 달라진 점은 없습니다.
다만 CSS, jQuery, Javascript 등에서 name속성값이 "c1"인 선택지들을 한꺼번에 불러올 수 있겠습니다.
⑥ radio
radio는 checkbox와 다르게 한 가지만 선택할 수 있는 속성값입니다.
예를들어 결제방법 선택 시에는 중복선택 가능한 checkbox를 사용하면 곤란하겠죠.
표시방법1
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html> <html lang="ko"> <head> <title>input태그 속성값</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <form> 신용카드 <input type="radio"> 무통장입금 <input type="radio"> 가상계좌 <input type="radio"> </form> </body> </html> | cs |
radio의 기본 표시방법입니다. 선택하면 동그라미에 색상이 채워지면서 선택된 것을 알 수 있습니다.
다른 선택지를 클릭하면 기존의 선택지의 색상이 없어지면서 1가지만 선택가능합니다.
표시방법2
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html> <html lang="ko"> <head> <title>input태그 속성값</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <form> 신용카드 <input type="radio" name="r1"> 무통장입금 <input type="radio" name="r1"> 가상계좌 <input type="radio" name="r1"> </form> </body> </html> | cs |
radio도 checkbox처럼 name속성값을 지정할 수 있습니다.
⑦ file
폼양식을 작성할 때 파일을 첨부해야 할 때가 있습니다. 그럴 때 사용하는 type속성값 file입니다.
표시방법
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html lang="ko"> <head> <title>input태그 속성값</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <form> 첨부파일 <input type="file"> </form> </body> </html> | cs |
file의 기본 표시방법입니다. "파일 선택" 버튼을 눌러서 이미지파일을 불러오겠습니다.
이미지 파일이 선택된 것을 확인 할 수 있습니다.
⑧ hidden
<input>태그에 hidden속성값을 넣으면 화면에서 보이지 않습니다.
표시방법
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html lang="ko"> <head> <title>input태그 속성값</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <form> <input type="hidden" name="숨긴값"> </form> </body> </html> | cs |
컴퓨터 화면에서는 보이지 않지만 관리자모드(F12)를 확인하면 <input>태그가 있는 것을 확인할 수 있습니다.
⑨ image
type속성값을 image로 설정하면 이미지가 생성됩니다.
표시방법1
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html lang="ko"> <head> <title>input태그 속성값</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <form> <input type="image"> </form> </body> </html> | cs |
image 기본 표시방법입니다. 아무런 이미지가 인식되지 않은 상태입니다.
표시방법2
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html lang="ko"> <head> <title>input태그 속성값</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <form> <input type="image" src="img/cat.jpg"> </form> </body> </html> | cs |
src속성값으로 이미지를 넣어줍니다. 이미지에 마우스를 대보면 손모양 커서가 생기면서 클릭할 수 있고 이미지를 클릭하면 주소표시창이 바뀌는 것을 확인할 수 있습니다.
⑩ reset
reset은 폼에서 작성했던 내용들을 전부 초기화할 수 있습니다.
표시방법1
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html lang="ko"> <head> <title>input태그 속성값</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <form> <input type="reset"> </form> </body> </html> | cs |
type속성값에 reset을 넣으면 위와 같은 초기화 버튼이 생성됩니다.
표시방법2
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html lang="ko"> <head> <title>input태그 속성값</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <form> <input type="reset" value="리셋"> </form> </body> </html> | cs |
value속성값을 이용해 초기화 버튼 안의 글자를 "리셋"으로 변경했습니다.
실제로 초기화되는지 살펴보기 위해 checkbox를 넣어보겠습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html> <html lang="ko"> <head> <title>input태그 속성값</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <form> 독서 <input type="checkbox" name="c1"> 음악감상 <input type="checkbox" name="c1"> 운동 <input type="checkbox" name="c1"> 기타 <input type="checkbox" name="c1"> <input type="reset" value="리셋"> </form> </body> </html> | cs |
중복선택 되는 checkbox에 체크했다가 전부 초기화하고 싶을 때 리셋 버튼을 누르면
초기화면으로 돌아오는 것을 확인할 수 있습니다.
'IT > HTML' 카테고리의 다른 글
| HTML-input태그 #2 (0) | 2020.12.09 |
|---|---|
| HTML - form태그 (0) | 2020.11.26 |
| HTML5 - 테이블 태그 (0) | 2020.11.26 |
| HTML5 - 리스트(목록) 태그 (0) | 2020.11.26 |
| HTML&CSS-위치 변경하기 (0) | 2020.11.25 |
댓글