HTML5 강좌 17강 - HTML5 태그 - 입력양식 form 사용하기

HTML5 강좌 17강 - HTML5 태그 - 입력양식 form 사용하기

이번 강좌에서는 입력양식 form에서 사용하는 여러가지 태그들에 대해 알아보겠습니다.

HTML5 form 에 관련된 태그는 꽤 많은 종류가 있습니다.

태그들과 속성에 대해 정리를 하고 예제를 통해 테스트를 해보죠~

*form 입력양식

button : 클릭이 가능한 버튼 정의(주로 자바스크립트를 활성화시키기 위해서 사용)

checkbox : 체크박스

file : 파일 업로드를 위한 파일 입력과 선택 필드 정의

hidden : 숨겨진 입력 필드 정의

image : 이미지를 전송 버튼으로 정의

password : 비밀번호 입력 필드(필드 내의 각 글자는 다른 글자로 대체 표시됨)

radio : 라디오 버튼

reset : 리셋 버튼(폼의 모든 필드를 초기값으로 리셋)

submit : 전송 버튼(폼 데이터를 서버로 전송)

text : 사용자가 텍스트를 입력할 수 있는 한 줄짜리 입력 필드를 정의

email : 이메일 입력

url : URL 입력

number : 숫자 입력

range : 일정한 범위의 숫자 입력

date pickers : 날짜 입력(date, month, week, time, datetime, datetime-local)

search : 검색어 입력

color : 색깔 입력

이러한 태그들은 브라우저마다 호환되는 부분에서 차이를 보이는데요.

호환되는 입력양식을 체크할 수 있는 사이트가 있습니다.

https://miketaylr.com/code/input-type-attr.html

체크를 하고 싶은 분들은 위 사이트를 참고하세요~

(저는 크롬 최신버전에서 테스트를 합니다.)

태그들을 보면 이미 접했던 태그들도 있고, 생소한 태그들도 있을텐데요.

생소한 태그들을 테스트 해보죠~

*email

<input type="email" name="useremail">

이메일주소 형식에 어긋나면 위와같은 메시지가 나오네요.

*url

<input type="url" name="homepage">

url 주소형식 역시 마찬가지 입니다.

*number

<input type="number" name="quantity" min="1" max="10" step="1" value="5">

최소값과 최대값 설정에 어긋나면 메시지가 나오네요.

*range

<input type="range" name="points" min="1" max="10" step="1" value="5">

바를 이용하여 값을 선택합니다.

별다른 메시지는 나오지 않네요.

*Date pickers

날짜를 입력하는 입력양식이죠.

크롬에서는 달력을 이용하여 날짜를 입력할 수 있습니다.

<p>1 일자 입력:<input type="date" name="date" ></p>

<p>2 일자(월) 입력:<input type="month" name="month"></p>

<p>3 일자(주) 입력:<input type="week" name="week"></p>

<p>4 시간 입력:<input type="time" name="time" step=3 value="16:35:50"></p>

<p>5 일시(UTC) 입력:<input type="datetime" name="datetime" value="2016-02-26T16:35:12"></p>

<p>6 일시(로컬) 입력:<input type="datetime-local" name="datetime-local" value="2016-02-26T16:35:12"></p>

예전에는 달력을 이용하여 입력을 하려면 자바스크립트 같은 프로그래밍 작업이 필요했는데요.

HTML5에서는 정말 간단하게 입력을 할 수 있네요.

*search

<input type="search">

검색할 수 있는 텍스트박스가 생성되고, x 표시도 생기네요.

x 표시를 클릭하면 텍스트박스에 입력했던 내용이 초기화 됩니다.

*color

<input type="color">

color를 선택하는 방법도 정말 간단해졌네요.

첨부파일에는 위에서 테스트 했던 예제들을 전부 모았습니다.

다음 강좌에서는 추가로 입력양식 태그들을 알아보고

예제를 통해 테스트를 해보겠습니다.

(예제는 첨부파일에서 받을 수 있습니다.)

17(2).zip