본문 바로가기

HTML&CSS

HTML+CSS 기초 강의 - 15. 폼만들기 기초 4 - 모바일 대응 <input> 타입들




모바일 대응 <input> 타입들


HTML5 표준에 새로 추가된 타입들 중 모바일 대응을 위한 타입들이 몇가지 있습니다.

모바일 전용은 아니지만 모바일 환경의 터치 및 드래그 환경에 더 적합지거나, 기본적인 입력 체크 기능을 통해 UI 메시지가 출력되도록 해서 가벼운 실행 환경을 위한 배려를 했습니다.


다만, HTML5 표준 태그 정의가 대부분 그렇듯이 표준만 정해져 있고, 화면에 표시하는 구현단은 각 웹브라우저의 몫이기 때문에 웹브라우저에 출력되는 모양은 브라우저마다 조금씩 다릅니다.


예를들어 range 타입의 경우 아래처럼 브라우저에 따라 조금씩 다른 모양으로 표시됩니다.


인터넷익스플로러 

엣지

크롬/모바일브라우저/스마트폰

 


 


 




타입 

설명 

email 

이메일 주소 입력 필드. 폼 전송시에 입력한 내용이 이메일 주소가 맞는지 자동으로 체크하며, 이메일 주소가 아닐 경우 경고를 띄우고 폼 전송이 되지 않습니다.

내용을 입력하지 않은 것에 대한 체크는 되지 않으므로, 반드시 이메일 주소를 입력해야 하는 경우, 필수 항목으로 지정하는 required 속성을 부여해야 합니다.


<input type="email" name="email" placeholder="example@email.com" value="">


* email 포맷을 엄격하게 체크하지는 않습니다. @ 유무 정도를 체크하기 때문에 엄격한 이메일 주소체크를 원하면 자바스크립트로 정규표현식을 사용해 체크해야 합니다.

tel

전화번호 입력 필드. 일반 입력필드와 같습니다. 입력값에 대한 체크도 하지 않습니다.

모바일 웹페이지를 제작할 경우 전화번호를 스마트폰에서 클릭하면 전화를 거는 기능으로 주로 사용합니다.

number 

숫자만 입력하는 1줄 입력 필드. 포커스가 가면 오른쪽에 업/다운 화살표가 표시되어 1씩 숫자를 늘리거나 줄일 수 있습니다. 

정수, 실수 모두지원되며, 입력 필드가 비었을 경우 업/다운 버튼 클릭시 현재값이 0인 것으로 간주됩니다.

step 속성을 사용하면 업/다운 화살표 증가 감소를 배수단위로 변경할 수 있습니다. step 속성값을 1.5를 지정하면 1.5의 배수로 숫자가 늘거나 줄어듭니다.

현재 입력된 숫자가 있을 경우 가장 인접한 1.5의 배수 값이 됩니다.


<input type="number" name="num1" step="1.5">



유효한 배수값이 아닌 경우 폼 전송시 경고 메시지를 표시하고 폼 전송이 취소됩니다.

range 

 최소값과 최대값 사이의 값을 사용자가 선택할 수 있도록 슬라이더 바가 표시됩니다.

최소값은 min, 최대값은 max 속성을 사용합니다.

number 타입의 step 속성과 유사하게 슬라이더가 움직일때 배수단위로만 값이 지정되도록 step 속성을 사용할 수 있습니다.


<input type="range" name="range1" min="0" max="100" step="2">



인터넷 익스플로러9 이하 버전에서는 지원되지 않습니다. 구버전 웹브라우저 호환성이 필요한 경우 사용하면 안됩니다.

search

검색어를 입력합니다. 검색어르 입력한다고 특별한 것은 없으며, 그냥 1줄 입력필드 입니다.

검색어를 입력한 경우 폼 전송후 서버단에서 처리하는 로직이 있어야하기 때문에 검색어를 입력한 것이라는 HTML 소스코드상의 가독성을 위한 태그 표시 이외의 의미는 없습니다.


<form name="searchform" method="post" action="./search.php">

    <input type="search" name="q" value="" placeholder="검색어입력">

    <input type="submit" value="검색">

</form>



 

 

모바일 대응 타입을 이용해 폼 만들기


모바일 대응 태그들을 사용해 다음과 같은 간단한 폼을 만들어 볼 수 있습니다.


<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를 활용해 위의 폼을 조금 보기좋게 다듬으면 다음과 같은 폼을 완성 수 있습니다.



< 이전강의 다음강의 >



닫기