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()”>