<input>
- 웹에서 폼은 사용자 입력부분과 서버 전송 버튼으로 나뉘어진다.
- 사용자 입력 부분은 거의 <input> 태그를 이용하여 처리 된다.
- <input> 태그의 type="" 속성을 통해 입력하는 내용이 어떤 정보인지 지정한다.
- type="" 속성 값에 따라 사용할 수 있는 속성들이 다르다.
<input type="유형" 속성="속성 값">
<input>태그의 type 속성에서 사용 가능한 유형
- type="hidden"
- 숨겨진 입력 필드를 정의: 즉, 화면 상에서는 폼이 보이지 않지만 폼을 서버로 전송할 때 쓰이는 요소이다. 예를 들면 회원가입 폼에서 가입 경로, 날짜와 같이 굳이 사용자가 입력하지 않아도 알 수 있는 정보들을 서버로 넘길 때 사용한다.
<input type="hidden"... value="서버 전송값"...
- type="text"
- 한 줄짜리 일반 텍스트를 입력하는 요소이고 아이디, 이름, 주소 같은 텍스트를 입력할 때 사용한다.
<input type="text" 속성="속성 값"... - type="text"의 속성*
1) name: 텍스트 필드 구분을 위해 사용되는 이름이며 이것에 텍스트를 적으면 url 주소에 반영이 된다.
2) size: 텍스트 필드의 길이를 몇 글자까지 입력할 수 있는지를 지정하며, 영문 글자 단위가 기본이고 한글은 한 글자당 영문의 두 글자이다.
3) value: 텍스트 필드가 화면에 표시될 때 텍스트 필드 부분에 표시될 내용이며 사용하지 않으면 빈 텍스트 필드를 표시
4) maxlength: 텍스트 필드에 입력할 수 있는 최대 문자 개수 지정
- type="password"
- 비밀번호 입력
- 텍스트 필드와 같지만 입력하는 내용에 *로 표시가 된다.
<input type="password" ...
type="password"의 속성
- value를 제외하고 typ="text"와 같다.
1) name - 텍스트 필드의 구분을 위해 사용되는 이름
2) size: 텍스트 필드의 길이를 몇 글자까지 입력할 수 있는지를 지정하며, 영문 글자 단위가 기본이고 한글은 한 글자당 영문의 두 글자이다.
3) maxlength: 텍스트 필드에 입력할 수 있는 최대 문자 개수 지정
- type="search"
- 검색 문자열 입력을 위한 텍스트 필드를 정의
- 검색어를 입력하면 'x' 표시가 활성
- 모바일 브라우저에서 검색할 때 편리함
- type="url"
- ULR 입력을 위한 필드 정의
<input type="url" 속성="속성값">
- type="email"
- 메일 주소 입력을 위한 필드 정의
<input type="email" 속성="속성값"> - 모바일 브라우저에서 키보드 배열이 변경됨
- type="tel"
- 전화번호 입력을 위한 필드 정의
<input type="tel" ...> - 모바일 브라우저에서 키보드 배열이 변경됨
- type="number", type="range"
- 스핀 박스나 슬라이드 막대를 사용해 숫자를 입력한다.
- type="number"은 스핀 박스에 화살표를 눌러 숫자를 입력
- type="range"는 슬라이드 막대를 이용해 숫자를 입력
<input type="number" 속성="속성값"> <input type="range" 속성="속성값"> - type="number": IE10에서 사용 불가
- type="radio"
- 여러 개의 항목 중에서 한 가지만 선택하도록 하는 라디오 버튼을 정의
- 이미 선택된 항목이 있을 때 다른 항목을 선택하면 기존 항목이 취소 됨
- type="checkbox"
- 여러 항목중에서 2개 이상 선택할 수 있는 체크박스를 정의
- type="color"
- 색상 선택 상자 표시하기
- IE, 사파리에서 지원 안됨
- type="datetime", type="datetime-local"
- type="datetime"는 날짜(년, 월, 일)와 시간을 함께 표시할 수 있음
- type="datetime-local"은 지역의 날짜와 시간을 표시함
- type="date", type="month", type="week"
- type="date"는 달력에서 날짜를 선택할때 'yyyy-mm-dd'로 표시
- type="month"로 지정하면 날짜를 선택할때 'yyyy-mm'으로 표시
- type="week"로 지정하면 1월 첫째 주를 기준으로 몇 번째 주인지 연도와 주기가 표시
- type="time"
- 시간 지정을 지정하는 요소
- 시간은 00:00부터 23:59까지 입력하거나 스핀 박스의 화살표를 클릭해서 선택함
- type="file"
- 파일을 첨부하려고 할 때 사용하는 유형
- 필드를 넣으면 [파일선택] [찾아보기] [선택]등으로 표시 됨
- type="submit"
- 폼에 입력한 정보를 서버로 전송하는 submit 버튼을 표시
- submit 버튼으로 전송된 정보는 처음에 <form>태그에서 지정한 위치로 전송
- type="reset"
- <input> 요소에 입력된 정보들을 모두 리셋하여 사용자가 입력한 내용을 전부 지움
- type="image"
- submit 버튼 대신 전송 버튼 이미지를 사용할 때
- type="button"
- 폼 안에 버튼 형태를 만듦
- submit이나 reset같은 자체 기능은 없고 오직 버튼만 넣기 때문에 javascript와 같은 함수를 연결해서 사용
댓글