datetime : 국제 표준시(UTC)로 설정된 날짜와 시간(연,월,일,시,분,초,분할 초)을 넣는다.
datetime-local : 사용자가 있는 지역을 기준으로 날짜와 시간(연,월,일,시,분,초,분할 초)을 넣는다.
submit : 전송 버튼을 넣는다.
reset : 리셋 버튼을 넣는다.
image : submit버튼 대신 사용할이미지를 넣는다.
button : 일반 버튼을 넣는다.
file : 파일을 첨부할 수 있는 버튼을 넣는다.
hidden : 사용자에게는 보이지 않지만 서버로 넘겨주는 값이 있는 필드를 만든다.
type=”text” 와 type=”password” 일때 자주 사용하는 속성
size : 텍스트와 비밀번호 필드의 길이를 지정함. 즉, 화면에 몇 글자가 보이도록 할 것인지를 지정함. 예를 들어 최대로 입력할 수 있는 글자 수가 10개인데 size 속성값을 5로 지정하면 필드크기는 5개 글자 크기에 맞추고 나머지 5개 글자는 화면에 보이지 않는다.
value : 텍스트 필드 요소가 화면에 표시될 때 텍스트 필드 부분에 보여 주는 내용임. 이 속성을 사용하지 않으면 빈 텍스트 필드가 표시됨. 비밀번호 필드에서 사용하지 않는 속성임.
maxlength : 텍스트 필드와 비밀번호 필드에 입력할 수 있는 최대 문자 수를 지정함.
다양한 용도에 맞게 입력하는 type=”search”, type=”url”, type=”email”, type=”tel”
텍스트 필드는 한 줄짜리 일반 텍스트를 입력할 수 있다. HTML5에서는 용도에 맞게 입력할 수 있는 텍스트 필드를 다양하게 제공함. 이 필드들은 텍스트 필드를 기본으로 하기에 앞에서 설명한 텍스트 필드와 거의 같은 속성을 사용함.
type=”search”은 웹 브라우저 화면에서 볼 때는 텍스트 필드와 똑같지만, 웹 브라우저에서는 검색을 위한 텍스트 필드로 인식함.
type=”url”은 웹 주소를 입력하는 필드이다.
type=”email”은 이메일 주소
.HTML5 이전까지는 입력한 값이 이메일 주소인지,URL 주소인지 자바스크립트를 이용해서 직접 확인해야 했다. 그러나 HTML5에서는 type=”email”처럼 이메일 주소 필드로 지정하기만 하면 웹 브라우저에서 알아서 확인함. 만일 입력값이 지정한 형식에 맞지 않는다면 웹 브라우저에서 오류 메시지를 보여 줌.
type=”tel”전화번호를 나타내는 필드.
전화번호는 지역마다 형식이 다르므로 사용자가 입력한 값이 전화번호인지 아닌지 체크할 수 없다. 모바일 페이지에서 이 값을 이용하면 바로 전화를 걸 수 있다.
텍스트 필드에서 세분화된 필드는 PC용 웹브라우저에서는 별 차이 없어보이지만 모바일 웹 브라우저에서는 이메일 주소를 입력하거나 전화번호를 입력할 때 가상 키보드 배열이 바뀌는 것을 볼 수 있다.
체크박스, 라디오버튼 태그: type=”checkbox” , type=”radio”
체크 박스와 라디오 버튼은 여러 항목 중에서 원하는 항목을 선택할 때 사용하는 폼 요소이다. 이때
항목을 1개만 선택하려면라디오 버튼을 사용
2개 이상 선택하려면체크 박스를 사용
라디오 버튼은 항목을 1개만 선택할 수 있으므로 이미 선택한 항목이 있을 경우 다른 항목을 선택하면 기존 항목은 취소됨. 체크 박스는 항목을 2개 이상 선택할 수 있다는 점만 빼면 라디오 버튼 사용법과 비슷함.
<input type="checkbox">
<input type="radio">
체크 박스와 라디오 버튼에서 사용할 수 있는 속성은 다음과 같다.
value : 선택한 체크 박스나 라디오 버튼을 서버에게 알려 줄 때 넘겨줄 값을 지정함. 이 값은 영문이거나 숫자여야 하며 필수 속성임.
checked : 체크 박스나 라디오 버튼의 항목은 처음에 아무것도 선택되지 않은 상태로 화면에 표시되는데, 여러 항목 중에서 기본으로 선택해 놓고 싶은 항목에 사용함. 속성값은 따로 없다.
간혹 HTML 소스 코드를 보면 라디오 버튼에 name속성이 포함된 것을 볼 수 있다. name 속성은 PHP와 같은 웹 프로그래밍에서 폼 요소를 제어할 때 자주 사용함. 라디오 버튼에서 하나의 버튼만 선택할 수 있게 하려면 다음과 같이 모든 라디오 버튼의 name값을 똑같이 지정해야 함.
숫자 입력 필드를 나타내는 type=”number”, type=”range”
텍스트 필드에서 사용자가 숫자를 직접 입력할 수도 있지만type=”number”를 사용하면 스핀박스가 나타나서 숫자를 선택할 수 있다. type=”range”는 슬라이드 막대를 움직여 숫자를 입력할 수 있다.
<input type="number">
<input type="range">
type=”number” , type=”range” 필드에서 사용할 수 있는 속성은 다음과 같다.
min : 필드에 입력할 수 있는 최솟값을 지정함. 기본 최솟값은 0
max : 필드에 입력할 수 있는 최댓값을 지정함. 기본 최댓값은 100
step : 숫자 간격을 지정할 수 있다. 기본값은 1
value : 필드에 표시할 초깃값
날짜 입력을 나타내는 type=”date” ,type=”month”, type=”week”
<input type="date | month | week">
// '|'기호는 나열한 옵션 중 하나가 속성값이 되어야 한다는 뜻.
submit은 폼에 입력한 정보를 서버로 전송함. submit 버튼으로 전송된 정보는 ＜form＞태그의 action속성에서 지정한 폼 처리 프로그램에 넘겨짐. 반면에 reset 버튼은 ＜input＞요소에 입력된 모든 정보를 재설정해서 사용자가 입력한 내용을 모두 지우는 역할을 함. 이때 value속성을 사용해서 버튼에 표시할 내용을 지정함.
<input type="submit | reset" value="버튼에 표시할내용">
이미지 버튼을 나타내는 type=”image” (submit 버튼과 같은 기능)
submit과 같은 기능을 하지만 이미지인 버튼임.
<input type="image" src="이미지 경로" alt="대체 텍스트">
기본 버튼을 나타내는 type=”button”
type=”button”은 submit이나 reset버튼과 같은 기능이 없고 오직 버튼형태만 삽입함. 주로 버튼을 클릭해서 자바스크립트를 실행할 때 사용함. 다음과 같이 value 속성을 사용해 버튼에 표시할 내용을 지정함.
<input type="button" value="버튼에 표시할 내용">
<input type="button" value="공지 창 열기" onclick="window.open('notice.html')">
//이렇게 하면 버튼을 눌렀을때 자바스크립트의 window.open()함수를 실행함.
파일 첨부할 때 사용하는 type=”file”
폼에서 사진이나 문서를 첨부해야 할때 사용. type=”file”유형을 사용하면 웹 브라우저 화면에 [파일 선택]이나 [찾아보기]버튼 등이 표시되는데, 이 버튼을 클릭하고 파일을 선택하면 파일이 첨부됨.
<input type="file">
//첨부한 파일을 서버로 보내려면 자바스크립트 등 웹 프로그래밍 언어를 사용해야 함.
여기에서는 파일 첨부 버튼을 만드는 것만 함.
히든 필드 만들 때 사용하는 type=”hidden”
화면의 폼에는 보이지 않지만 사용자가 입력을 마치면 폼과 함께 서버로 전송되는 요소임. 사용자에게 굳이 보여 줄 필요는 없지만 관리자는 알아야 하는 정보를 히든필드로 입력함.
<input type="hidden" name="이름" value="서버로 넘길 값">
아래는 히든 필드를 사용해 사용자가 사이트에서 로그인하는 정보를 서버로 넘겨주는 예시. 로그인 버튼을 누르면 입력한 정보와 함께 히든 필드의 내용이 서버로 함께 전송됨.
