input 태그 정리 - 1

input 태그 정리

<input>

• 웹에서의 폼은 사용자 입력부분과 서버 전송 버튼으로 나눔

• 사용자 입력 부분은 거의 <input> 태그를 이용해 처리 함

• <input>태그의 type=""속성을 통해 입력하는 내용이 어떤 정보인지를 지정 함

• type=""속성 값에 따라 사용할 수 있는 속성들도 다름
  
  

<input type="유형" 속성="속성 값">

<input>태그의 type 속성에서 사용 가능한 유형

1.type="hidden"

• 숨겨진 입력필드를 정의

  즉, 화면상에 폼에는 보이지 않지만, 폼을 서버로 전송할 때 함께 전송되는 요소

• 예를 들어, 회원가입 폼에서 가입 경로, 날짜와 같이 굳이 사용자가 입력하지 않아도 알 수 있는 정보들을 서버로 넒길때 사용
  
  

<input type="hidden' name="..." value="서버 전송 값"

1. type="text"

• 한 줄짜리 일반 텍스트를 입력하는 요소

• 아이디, 이름, 주소와 같은 텍스트를 입력할 때 사용

• 기본 size는 영문 기준 20자
  
  

<input type="text" 속성="속성 값">

type="text"의 속성

1) name

• 텍스트 필드의 구분을 위해 사용되는 이름

2) size

• 텍스트 필드의 길이(화면에 몇 글자를 입력할 수 있는지를 지정)

• 영문 글자 단위가 기본이며, 한글 한 글자는 영문 두 글자와 같다

3) value

• 텍스트 필드가 화면에 표시될 때 텍스트 필드 부분에 표시될 내용

• 사용하지 않으면 빈 텍스트 필드가 표시

4) maxlength

• 텍스트 필드에 입력할 수 있는 최대 문자 개수 지정

1. type="password"

• 비밀번호 입력

• 텍스트 필드와 같지만, 입력하는 내용에 '*'로 표시 됨
  
  

<input type="password" 속성="속성 값">

type="password"의 속성

• value를 제외하고 type="text"와 같다

1) name

• 텍스트 필드의 구분을 위해 사용되는 이름

2) size

• 텍스트 필드의 길이(화면에 몇 글자를 입력할 수 있는지를 지정)

• 영문 글자 단위가 기본이며, 한글 한 글자는 영문 두 글자와 같음

3) maxlength

• 텍스트 필드에 입력할 수 있는 최대 문자 개수 지정

1. type="search"

• 검색 문자열 입력을 위한 텍스트 필드를 정의
  
  

<input type="search" 속성="속성값">

• 검색어를 입력하면 'x'표시 활성

• 모바일 브라우저에서 검색할 때 편리함

1. type="url'

• URL 입력을 위한 필드 정의
  
  

<input type="url" 속성="속성값">

1. type="email"

• 메일 주소 입력을 위한 필드 정의
  
  

<input type="email" 속성="속성값">

• 모바일 브라우저에서 키보드 배열이 변경 됨

1. type="tel"

• 전화번호 입력으 위한 필드 정의
  
  

<input type="tel" 속성="속성값">

• 모바일 브라우저에서 키보드 배열이 변경 됨

1. type="number", type="range"

• 스핀 박스나 슬라이드 막대를 사용해 숫자를 입력

• type="number"은 스핀 박스에 화살표를 눌러 숫자를 입력

• type="range"는 슬라이드 막대를 이용해 숫자를 입력
  
  

<input type="number" 속성="속성값">

<input type="range" 속성="속성값">

• type="number" : IE10에서 사용 불가

type="number", type="range"의 속성

1) min

• 필드에 입력 가능한 최솟값을 지정

• type="range"일 때 최솟값 0

2) max

• 필드에 입력가능한 최댓값을 지정

• type="range"일 때 최댓값 100

3) step

• 짝수나 홀수 등 특정 숫자로 제한할 때 숫자의 간격을 지정

• 기본은 '1'이며 생략 가능

4) value

• 필드에 표시될 초깃값

1. type="radio"

• 여러 개의 항목 중에서 한 가지만 선택하도록 하는 라디오 버튼을 정의

• 이미 선택된 항목이 있을 때 다른 항목을 선택하면 기존 항목이 취소 됨
  
  

<input type="radio" 속성="속성값">

type="radio"의 속성

1) name

• 라디오 버튼이 여러 개 있을 경우 구분하기 위한 이름 지정

• 라디오 버튼의 특성을 여러 개중에서 한 가지만 선택하는 것이기 때문에 관련이 있는 항목들끼리 묶어야 type="radio"를 여러 개 사용할 수 있다.

• 같은 그룹끼리 name 속성 값을 똑같이 하면 된다

2) value

• 서버로 넘길 값을 지정

• 영문 또는 숫자이여야 하며, 필수 속성임

3) checked

• type="radio"에 기본속성은 아무것도 선택되지 않은 상태임

• 해당 속성을 사용하면 처음에 선택된 상태로 표시 됨

1. type="checkbox"

• 여러 항목중에서 2개 이상 선택할 수 있는 체크박스를 정의
  
  

<input type="checkbox" 속성="속성 값">

type="checkbox"의 속성

• type="radio"에서 사용하는 속성과 같다

1) name

• 여러개 있을 경우 구분하기 위해 이름 지정

• 반드시 그룹으로 묶어주지 않아도 됨

2) value

• 서버로 넘길 값 지정

• 영문 또는 숫자이여야 하며, 필수 속성임

3) checked

• 처음부터 선택된 상태로 화면에 표시 됨

1. type="color"

• 색상 선택 상자 표시하기
  
  

<input type="color" 속성="속성 값">

• IE, 사파리에서 지원 안됨 type="color"의 속성

• 속성값이 필수 속성이 아니기에 필요할 때만 사용하면 됨

1) list

• 선택할 수 있는 색생목록을 따로 정의 했을때 그 datalist의 id를 지정

2) value

• 색상 값을 지정

• 색상은 16진수로 표시

1. type="datetime", type="datetime-local"

• type="datetime"는 날짜(년, 월, 일)와 시간을 함께 표시할 수 있음

• type="datetime-local"은 지역의 날짜와 시간을 표시함
  
  

<input type="datetime" 속성="속성값">

<input type="datetime-local" 속성="속성값">

1. type="date", type="month", type="week"

• type="date"는 달력에서 날짜를 선택할때 'yyyy-mm-dd'로 표시

• type="month"로 지정하면 날짜를 선택할때 'yyyy-mm'으로 표시

• type="week"로 지정하면 1월 첫째 주를 기준으로 몇 번째 주인지 연도와 주기가 표시
  
  

<input type="data" 속성="속성 값">

<input type="month" 속성="속성 값">

<input type="week" 속성="속성 값">

1. type="time"

• 시간 지정을 지정하는 요소

• 시간은 00:00부터 23:59까지 입력하거나 스핀 박스의 화살표를 클릭해서 선택함

<input type="time" 속성="속성 값">

날짜와 시간을 나타내는 유형(12, 13, 14)

• 아직 모든 브라우저를 지원하지 않음

• 공통으로 적용되는 속성

1) min

• 날짜나 시간의 최솟값 지정

2) max

• 날짠 시간의 최댓값 지정

3) step

• 스핀 박스의 화살표를 누를 때마다 날짜나 시간의 증가값을 지정

4) value

• 화면에 표시할 초깃값을 지정

1. type="file"

• 파일을 첨부하려고 할 때 사용하는 유형

• 필드를 넣으면 [파일선택] [찾아보기] [선택]등으로 표시 됨
  
  

<input type="file" 속성="속성 값">

1. type="submit"

• 폼에 입력한 정보를 서버로 전송하는 submit 버튼을 표시

• submit 버튼으로 전송된 정보는 처음에 <form>태그에서 지정한 위치로 전송
  
  

<input type="submit" value="버튼 내용" 속성="속성 값">

1. type="reset"

• <input> 요소에 입력된 정보들을 모두 리셋하여 사용자가 입력한 내용을 전부 지움
  
  

<input type="reset" value="버튼 내용" 속성="속성 값">

1. type="image"

• submit 버튼 대신 전송 버튼 이미지를 사용할 때
  
  

<input type="image" src="경로" alt="대체 텍스트" 속성="속성 값">

1. type="button"

• 폼 안에 버튼 형태를 만듦

• submit이나 reset같은 자체 기능은 없고 오직 버튼만 넣기 때문에 javascript와 같은 함수를 연결해서 사용
  
  

<input type="button" value="버튼 내용" onclick="함수()">

<input>태그(2)에서는 <input>태그의 다양한 속성에 대해 더 알아보기로 한다.