HTML+CSS 기초 강의 - 15. 폼만들기 기초 4 - 모바일 대응 <input> 타입들
모바일 대응 <input> 타입들
HTML5 표준에 새로 추가된 타입들 중 모바일 대응을 위한 타입들이 몇가지 있습니다.
모바일 전용은 아니지만 모바일 환경의 터치 및 드래그 환경에 더 적합지거나, 기본적인 입력 체크 기능을 통해 UI 메시지가 출력되도록 해서 가벼운 실행 환경을 위한 배려를 했습니다.
다만, HTML5 표준 태그 정의가 대부분 그렇듯이 표준만 정해져 있고, 화면에 표시하는 구현단은 각 웹브라우저의 몫이기 때문에 웹브라우저에 출력되는 모양은 브라우저마다 조금씩 다릅니다.
예를들어 range 타입의 경우 아래처럼 브라우저에 따라 조금씩 다른 모양으로 표시됩니다.
인터넷익스플로러 |
엣지 |
크롬/모바일브라우저/스마트폰 |
|
|
|
타입 |
설명 |
이메일 주소 입력 필드. 폼 전송시에 입력한 내용이 이메일 주소가 맞는지 자동으로 체크하며, 이메일 주소가 아닐 경우 경고를 띄우고 폼 전송이 되지 않습니다. 내용을 입력하지 않은 것에 대한 체크는 되지 않으므로, 반드시 이메일 주소를 입력해야 하는 경우, 필수 항목으로 지정하는 required 속성을 부여해야 합니다.
* email 포맷을 엄격하게 체크하지는 않습니다. @ 유무 정도를 체크하기 때문에 엄격한 이메일 주소체크를 원하면 자바스크립트로 정규표현식을 사용해 체크해야 합니다. |
|
tel |
전화번호 입력 필드. 일반 입력필드와 같습니다. 입력값에 대한 체크도 하지 않습니다. 모바일 웹페이지를 제작할 경우 전화번호를 스마트폰에서 클릭하면 전화를 거는 기능으로 주로 사용합니다. |
number |
숫자만 입력하는 1줄 입력 필드. 포커스가 가면 오른쪽에 업/다운 화살표가 표시되어 1씩 숫자를 늘리거나 줄일 수 있습니다. 정수, 실수 모두지원되며, 입력 필드가 비었을 경우 업/다운 버튼 클릭시 현재값이 0인 것으로 간주됩니다. step 속성을 사용하면 업/다운 화살표 증가 감소를 배수단위로 변경할 수 있습니다. step 속성값을 1.5를 지정하면 1.5의 배수로 숫자가 늘거나 줄어듭니다. 현재 입력된 숫자가 있을 경우 가장 인접한 1.5의 배수 값이 됩니다.
유효한 배수값이 아닌 경우 폼 전송시 경고 메시지를 표시하고 폼 전송이 취소됩니다. |
range |
최소값과 최대값 사이의 값을 사용자가 선택할 수 있도록 슬라이더 바가 표시됩니다. 최소값은 min, 최대값은 max 속성을 사용합니다. number 타입의 step 속성과 유사하게 슬라이더가 움직일때 배수단위로만 값이 지정되도록 step 속성을 사용할 수 있습니다.
인터넷 익스플로러9 이하 버전에서는 지원되지 않습니다. 구버전 웹브라우저 호환성이 필요한 경우 사용하면 안됩니다. |
search |
검색어를 입력합니다. 검색어르 입력한다고 특별한 것은 없으며, 그냥 1줄 입력필드 입니다. 검색어를 입력한 경우 폼 전송후 서버단에서 처리하는 로직이 있어야하기 때문에 검색어를 입력한 것이라는 HTML 소스코드상의 가독성을 위한 태그 표시 이외의 의미는 없습니다.
|
모바일 대응 타입을 이용해 폼 만들기
모바일 대응 태그들을 사용해 다음과 같은 간단한 폼을 만들어 볼 수 있습니다.
<div class="title">사용자정보</div>
<form name="searchform" method="post" action="./search.php"> <div class="item"><div class="fieldlabel">사용 웹브라우저</div> <select id="browsers" name="browsers"> <option value="크롬">크롬</option> <option value="사파리" selected>사파리</option> <option value="엣지">엣지</option> <option value="인터넷익스플로러" label="IE">인터넷익스플로러</option> <option value="파이어폭스" >파이어폭스</option> <option value="오페라">오페라</option> </select></div>
<div class="item"><div class="fieldlabel">생일</div><input type="date" name="birth" value="2018-12-01"></div> <div class="item"><div class="fieldlabel">배경색상</div><input type="color" name="webcolor" value="#fa4040"></div> <div class="item"><div class="fieldlabel">이메일주소</div><input type="email" name="emailaddress" placeholder="example@domain.com" value=""></div> <div class="item"><div class="fieldlabel">전화</div><input type="tel" name="phone" placeholder="010-0000-0000" value=""></div> <div class="item"><div class="fieldlabel">홈페이지</div><input type="url" placeholder="address@domain.com" name="email1"></div> <input type="submit" value="저장"> </form>
다음 강의에서 배울 호환성 문제가 있는 <input> 태그 타입들도 일부 섞여 있기는 하지만 이런 방식으로 폼을 만들어 볼 수 있습니다.
<div> 태그들은 폼 레이아웃을 조금더 예쁘게 만들기 위해 <input> <select> 태그를 감싸기 위한 용도입니다.
CSS를 활용해 위의 폼을 조금 보기좋게 다듬으면 다음과 같은 폼을 완성 수 있습니다.
