[개미의 걸음 HTML&CSS 8차시] <input>태그의 이해

<input> 태그

• <input>태그를 사용하면 사용자가 입력할 창을 생성
• <input>태그의 type속성을 이용하거나 <button>태그를 이용해 버튼을 만들 수 있음
• <label>태그를 이용하면 입력창 앞에 입력할 내용을 간략하게 표현 가능
• <input>태그의 type속성을 radio나 checkbox 속성값을 지정할 경우, bullet을 클릭해야만 선택 가능
  <label>태그를 사용할 경우 해당 bullet뿐만 아니라 bullet의 텍스트를 클릭해도 선택 가능

    <input>태그의 type속성의 값

속성 값	설    명
hidden	사용자에게 보이지 않지만 서버로 넘겨지는 값들을 지정
text	한 줄짜리 텍스트를 입력할 수 있는 텍스트 상자 삽입
number	숫자를 조절할 수 있는 화살표 삽입
range	숫자를 조절할 수 있는 슬라이드 막대를 삽입
datetime	국제표준시(UTC)로 설정된 날짜, 시간 삽입
datetime-local	timezone을 생략한 날짜와 시간을 삽입
date	timezone을 생략한 날짜[연, 월, 일]를 삽입
month	timezone을 생략한 날짜[연, 월]를 삽입
week	timezone을 생략한 날짜[연, 주]를 삽입
time	timezone을 생략한 시간[시, 분, 초 , 분할 초]를 넣음
checkbox	주어진 항목에서 2개 이상 선택 가능한 bullet[checkbox button] 삽입
radio	주어진 항목에서 1개만 선택 가능한 bullet[radio button] 삽입
button	버튼을 삽입
reset	리셋 버튼을 삽입
file	파일을 첨부할 수 있는 버튼 삽입
submit	서버 전송 버튼 삽입
image	submit버튼 대신 사용할 이미지 삽입
color	색상 표를 삽입
search	검색 상자 삽입
url	URL주소를 입력란에 삽입
tel	전화번호 입력란을 삽입
email	email주소를 입력란을 삽입
password	passward를 입력란을 삽입

# text, number, range 속성 값의 이해

number, range와 관련된 속성

속    성	의    미
min	입력할 수 있는 최솟값을 설정하는 속성 [type이 range일때 기본값은 0]
max	입력할 수 있는 최댓값을 설정하는 속성  [type이 range일때 기본값은 100]
step	숫자 간격 지정하는 속성 [기본값은 1, 생략가능]
value	초기값 설정하는 속성

• step속성값을 2로 설정했으므로 버튼으로는 6까지 밖에 올라가지 않음
• value속성값을 통해 초기값을 설정 가능

# datetime, datetime-local, date, month, week, time 속성 값의 이해

• 속성값 datetime의 경우, HTML5에서 제외되었지만 HTML5.1에서 다시 채택됨

날짜나 시간 관련속성

속    성	의    미
min	입력할 수 있는 최솟값을 설정하는 속성 [type이 range일때 기본값은 0]
max	입력할 수 있는 최댓값을 설정하는 속성  [type이 range일때 기본값은 100]
step	날짜 및 시간 간격을 설정하는 속성 [기본값은 1, 생략가능]
value	초기값 설정하는 속성

 

# submit, image, button,reset, file 속성 값의 이해

• value속성을 통해 버튼에 출력되는 텍스트를 설정할 수 있음
• <input> 태그의 속성에 onclick="window.open()"를 설정하면 새창을 띄움
• <input> 태그의 속성에 onclick="window.close()"를 설정하면 현재창을 닫음
• type이 image일 경우, width와 height속성을 통해 이미지의 크기를 조절할 수 있음
  src속성을 통해 이미지 파일경로를 작성
• type이 submit이나 image인 경우, formaction 속성을 통해 실행 프로그램을 연결할 수 있음
• type이 submit이나 image인 경우, formenctype 속성을 통해 전송된 폼 데이터의 인코딩 방식 설정 가능

# checkbox, radio 속성 값의 이해

• 속성값 radio는 둘 중 하나만 선택 가능
• 속성값 checkbox는 둘다 선택 가능

• 일반적으로는 초기값이 설정되어 있지 않지만 checked 속성을 이용하면 초기값을 설정 가능
• 속성값 radio의 경우 하나만 되므로 둘다 속성값을 지정할 경우 마지막 값이 초기값으로 설정됨

# color 속성 값의 이해

• RGB, HSL, HEX값 중에서 설정 가능

# search, url 속성 값의 이해

• 속성값 search는 일반 text와 유사하나 입력창에 타이핑을 한 뒤, x아이콘을 눌리면 내용을 쉽게 삭제 가능
• 속성값 url은 반드시 http://로 시작하는 사이트 주소로 입력해야함
  또한 공백이 없고 영문자, 마침표, 슬래시만으로 이루어져야함

# tel, email, password 속성 값의 이해

• 속성값 tel은 입력 내용을 전화번호 형식으로 인식함
• 속성값 email은 입력 내용이 메일 주소 형식인지 확인해줌[@문자가 들어가 있어야함]
• 속성값 password는 입력 내용이 화면에 보이지 않도록 *로 표시됨

 

 

 

기타 <input>태그의 속성

속    성	설    명
readonly	사용자가 내용을 입력하지 못하고 읽을 수만 있는 입력란을 생성하는 속성
placeholder	텍스트를 입력할 때 도움이 되도록 입력란에 입력 양식 및 설명을 표시할 수 있는 속성 해당 입력란에 내용을 입력할 경우, 해당 속성값을 사라짐
autofocus	폼 요소 중 초기에 입력 커서가 나타나는 곳을 지정할 수 있는 속성
required	해당 값을 반드시 입력해야지만 전송이 가능할 수 있도록 설정하는 속성 입력하지 않을 경우 오류 메시지를 표시함
size	입력창의 사이즈를 지정가능
minlength	사용자가 최소 몇 글자이상을 입력해야 하는지 설정하는 속성
maxlength	사용자가 최대 몇 글자까지 입력할 수 있는지 설정하는 속성
min	최솟값을 설정하는 속성
max	최댓값을 설정하는 속성
step	허용된 범위 내에서 증가*감소하는 일정한 간격을 설정하는 속성
list	<datalist>에 미리 정의해 놓은 옵션 값을 <input>안에 나열해서 보여주도록 설정하는 속성
multiple	두 개 이상의 값을 입력할 수 있도록 설정하는 속성[type속성이 file일 때 많이 사용]
formmethod	서버로 폼을 전송하는 방식을 설정하는 속성 원하는 데이터만 전송하는 방식을 사용할 수 있어 <form>태그의 method보다 좀 더 유연  * get : 주소 표시줄에 사용자가 입력한 내용이 그대로 들어는 방식           [256~4096byte의 데이터를 서버로 넘길 수 있음]  * post : 사용자가 입력한 내용이 드러나지 않는 방식           [표준 입력(standard input)으로 넘겨주어 입력 내용 길이에 제한없음]
formnovalidate	유효성 여부를 표시하는 속성
formtarget	서버로 전송한 폼 데이터에 대한 서버의 응답을 표시할 위치를 설정하는 속성