Web (8) input 태그
사용자 입력을 위한 <input> 태그
<input> 태그 : 입력 항목 만들기
웹에서의 폼은 크게 사용자가 입력하는 부분/내용을 서버로 보내는 버튼 부분으로 나눌 수 있다. 사용자가 내용을 입력하는 부분은 한 줄짜리 텍스트나 비밀번호 같은 부분인데 이런 부분을 만들 때 사용하는 태그가 <input>태그다.
기본형 : <input type=“유형” [속성=“속성 값”]>
<input> 태그의 type속성에서 사용 가능한 유형들이다.
1) hidden : 사용자에게는 보이지 않지만 서버로 넘겨지는 값을 가진다.
type=“hidden” : 히든 필드 만들기
사용자에게 굳이 보여 줄 필요가 없지만 관리자가 알아야 하는 것을 입력
기본형 : <input type=“hidden” name=“이름” value=“서버로 넘길 값”>
히든 필드를 삽입할 때는 name속성을 이용해 히든 필드의 이름을 지정하고 그에 대한 값은 value속성을 이용해 서버로 넘겨준다.
2) text : 한 줄짜리 텍스트를 입력할 수 있는 텍스트 상자를 넣는다.
type=“text” : 텍스트 필드 만들기
기본형 : <input type=“text” [속성=“속성 값”]>
속성
1. name : 텍스트 필드를 구별할 수 있도록 이름을 붙임
2. size : 화면에 몇 글자가 보이도록 할 것인지를 지정.
3. value : 텍스트 필드 요소가 화면에 표시될 때 텍스트 필드 부분에 표시될 내용. 사용하지 않으면 빈 텍스트 필드가 표시됨.
4. maxlength : 텍스트 필드에 입력할 수 있는 최대 문자 개수를 지정.
ex. <input type=“password” id=“user_pw” size=“10”></label>
3) search : 검색 상자를 넣는다.
type=“search” : 검색상자 만들기
기본형 : <input type=“search” [속성=“속성 값”]
ex. <input type=“search”> <input type=“submit” value=“검색”>
4) tel : 전화번호 입력 필드를 넣는다.
type=“tel” : 전화번호 입력란 만들기
기본형 : <input type=“tel” [속성=“속성 값”]>
사용자가 입력한 정보가 일반 텍스트가 아니라 전화번호라는 사실을 인식함.
5) url : URL 주소를 입력할 수 있는 필드를 넣는다.
type=“url” : URL입력란 만들기
기본형 : <input type=“url” [속성=“속성 값”]
이 필드에는 반드시 ‘http://’로 시작하는 사이트 주소를 입력해야 한다.
6) email : 메일 주소를 입력할 수 있는 필드를 넣는다.
type=“email” : 메일 주소 입력란 만들기
기본형 : <input type=“email” [속성=“속성 값”]>
7) password : 비밀번호를 입력할 수 있는 필드를 넣는다.
8) datetime : 국제 표준시(UTC)로 설정된 날짜와 시간(연,월,일,시,분,초,분할 초)를 넣는다.
type=“datetime”
날짜와 시간 문자 뒤에 시간대(timezone)를 함께 표시해야 하는데 UTC기준일 경우, Z라고만 표시하면 되고 +dd:dd나 –dd:dd처럼 몇 시간 몇 분이 차이 나는지 숫자로 직접 입력해오 된다.
0000-00-00T18:00
9) datetime-local : 사용자가 있는 지역을 기준으로 날짜와 시간(연,월,일,시,분,초,분할 초)을 넣는다.
- type=“datetime-local”
0000-00-00T09:00
10) date : 사용자 지역을 기준으로 날짜(연,월,일)를 넣는다.
type=“date”
달력에서 날짜를 선택했을 때 “yyyy-mm-dd”형식으로 표시됨.
11) month : 사용자 지역을 기준으로 날짜(연,월)를 넣는다.
type=“month”
달력에서 날짜를 선택했을 때 “yyyy-mm”형식으로 표시됨.
12) week : 사용자 지역을 기준으로 날짜(연,주)를 넣는다.
type=“week”
달력에서 날짜를 선택했을 때 “yyyy-W24”형식으로 표시됨. W(주) 이런식.
13) time : 사용자 지역을 기준으로 시간(시,분,초,분할 초)을 넣는다.
type=“time”
00:00 ~ 23:59 - > value
14) number : 숫자를 조절할 수 있는 화살표를 넣는다.
type=“number” : 숫자 입력하기
<input type=“number” [속성=“속성 값”]>
브라우저에 따라 스핀박스가 되기도 한다.
스핀박스 : 오른쪽에 위아래로 하나씩 개수 올릴수 있는 것.
ex. <input type=“number” min=“1” max=“5” value=“1”> 개
속성 1. min 2. max, 3. step : 숫자 간격, 4. value : 초기값
15) range : 숫자를 조절할 수 있는 슬라이드 막대를 넣는다.
type=“range” : 슬라이드 막대로 숫자 지정하기
기본형 : <input type=“range” [속성=“속성 값”]>
1. min : 최소0 2. max : 최대 100, 3. step : 숫자 간격, 4. value : 초기값
ex. <input type=“range” min=“1” max=“5” value=“1”> 개
16) color : 색상 표를 넣는다.
type=“color” : 색상 선택 상자 표시하기
기본형 : <input type=“color” [value=“기본 색” [속성=“속성 값”]>
ex. <label>선호색상 <input type=“color” value=“#00ff00”> </label>
17) checkbox : 주어진 항목에서 2개 이상 선택 가능한 체크박스를 넣는다.
type=“checkbox” : 체크박스 넣기
기본형 : <input type=“checkbox” [속성=“속성 값”]>
속성 1. name : 서버의 폼 프로그램에서 라디오버튼이나 체크박스를 구분하기 위해 이름 지정
속성 2. value : 선택한 체크박스를 서버로 알려 줄 때 넘길 값을 지정. 이 값은 영문이거나 숫자여야 하며 필수 속성이다.
속성 3. checked : 기본으로 선택해 놓은 항목이 있을 때 사용
18) radio : 주어진 항목에서 1개만 선택할 수 있는 라디오 버튼을 넣는다.
type=“radio” : 라디오 버튼 넣기
기본형 : <input type=“radio” [속성=“속성 값”]>
속성 1. name : 서버의 폼 프로그램에서 라디오버튼이나 체크박스를 구분하기 위해 이름 지정. 라디오 버튼은 여러개 중에서 하나만 선택하는 것이기 때문에 관련있는 그룹끼리는 name속성 값을 똑같이 만듬.
속성 2. value : 선택한 라디오를 서버로 알려 줄 때 넘길 값을 지정. 이 값은 영문이거나 숫자여야 하며 필수 속성이다.
속성 3. checked : 기본으로 선택해 놓은 항목이 있을 때 사용
19) file : 파일을 첨부할 수 있는 버튼을 넣는다.
ex. <label> 첨부파일 <input type=“file”></label>
20) submit : 서버 전송 버튼을 넣는다.
사용자가 폼에 입력한 정보를 서버로 전송하는 submit 버튼을 넣는다.
21) image : submit 버튼 대신 사용할 이미지를 넣는다.
submit버튼 대신 image 버튼으로 서버에 전송을 한다.
ex. <input type=“image” id=butt“ src=”images/login.jpg“ alt=”login“>
22) reset : 리셋 버튼을 넣는다.
<input> 요소에 입력된 모든 정보를 재설정해 사용자가 입력한 내용을 모두 지울 수 있다.
이때 value 속성을 사용해 버튼에 표시할 내용을 지정한다.
23) button :버튼을 넣는다.
버튼만 넣기 때문에 스크립트 함수 등을 연결해 사용.
ex1. <input type=“button” value=“새 탭 열기” onclick=“window.open()”>
ex2. <input type=“button” value=“닫기” onclick=“window.close()”>