모바일에서 폼
bootstrip에서 폼을 만드는 class="form-group" 대신에
모바일에서는 data-role="fieldcontain"을 사용한다.
fieldcontain의 적용예시를 보면
<div data-role="fieldcontain"><!-- fieldcontain으로 묶어준다 -->
<label for="name">이름</label>
<input type="text" name="name" id="name">
</div>
이런식으로 묶어서 적용한다.
모바일에서의 회원가입 폼 만들기
모바일에서의 회원가입폼을 만들고자 한다.
구성으로는 이름, 경력사항, 검색, wifi, 슬라이드바, 다중선택 등을 생성하고자 한다.
이름
<div data-role="fieldcontain"><!-- fieldcontain으로 묶어준다 -->
<label for="name">이름</label>
<input type="text" name="name" id="name"><!-- 이름란에 input박스 연결 -->
</div>
이미 위에 예시로 나온 이름 만들기 폼이다.
fieldcontain으로 묶은 후
label for로 input과 연결해서 이름을 정해준다
-----------------------------------------------------------------------경력사항
bootstrap과 bootstrap과 다르게 cols="n"도 지정할 수 있다. (bootstrap은 자동지정)
경력사항은 textarea로 구성하고자 한다.
<div data-role="fieldcontain">
<label for="textarea">경력사항</label>
<textarea row="8" cols="40" name="textarea" id="textarea"></textarea>
</div>
--------------------------------------------------------------------------검색창
검색창을 만들고자 하는데 내부에 표시를 생성하고 글자를 지울수 있는 X표시를 넣고자 한다. 그러기 위해서는 input type=search를 적용해서 구성한다.
<div data-role="fieldcontain">
<label for="search">검색:</label>
<input type="search" name="search" id="search">
</div>
------------------------------------------------------------Wifi버튼
wifi버튼을 만들기 위해서 (on/off)전원스위치를 만들고자 한다.
data-role="slider" 을 사용하여 적용한다.
<div data-role="fieldcontain">
<label for="switch">Wi-FI</label>
<select name="switch" id="switch" data-role="slider"><!-- 콤보박스지만 data-role="slider"을 적용함으로써 전원스위치로 바뀜 -->
<option value="off">Off</option>
<option value="off">On</option>
</select>
</div>
select태그는 콤보박스지만 data-role="slider"을 적용함으로써 전원스위치로 바뀐다
-----------------------------------------------------------------------------
슬라이드바(사운드 소리)
사운드 소리의 크기를 조절하는 슬라이드바를 생성하고자 한다.
range를 통해 슬라이드바를 만들고 data-highlight="true"을 적용해야하는데
data-highlight="true"는 슬라이드의 바가 움직이는 거리를 배경색으로 표시하는 효과를 부여한다.
<div data-role="fieldcontain">
<label for="slider">소리</label>
<input type="range" name="slider" id="slider"
value="0" min="0" max="100" data-highlight="true">
<!-- range는 기본값, 최소값, 최댓값을 설정해야된다 -->
</div>
-----------------------------------------------------------------다중선택(취업 희망 직업선택)
다중선텍을 만들기 위해 fieldset으로 묶어주고 legend로 제목설정하여 만든다.
<div data-role="fieldcontain">
<fieldset><!-- fieldset으로 묶어주고 legend로 제목설정 -->
<legend>취업 희망 직업</legend>
<input type="checkbox" name="checkbox" id="checkbox-a" value="웹프로그래머">
<label for="checkbox-a">웹프로그래머</label>
<input type="checkbox" name="checkbox" id="checkbox-b" value="빅데이터분석가">
<label for="checkbox-b">빅데이터분석가</label>
</fieldset>
</div>
id값은 같으면 안되서 다르게 설정하는거 잊지말기
------------------------------------------------------------------------------checkbox을 수평으로 정렬하고 작게설정
data-mini="true"를 사용하여 컴포넌트를 작게설정하고
horizontal을 사용하여 수평정렬시킨다.
이때 div가 아니라 fieldset으로 묶어서 적용한다.
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
<legend>글자스타일 모양</legend>
<input type="checkbox" name="checkbox" id="checkbox-1" value="B">
<label for="checkbox-1">B</label>
<input type="checkbox" name="checkbox" id="checkbox-2" value="I">
<label for="checkbox-2">I</label>
<input type="checkbox" name="checkbox" id="checkbox-3" value="U">
<label for="checkbox-3">U</label>
</fieldset>
<!-- div가 아니라 fieldset으로 묶어서 적용 -->
---------------------------------------------------------------------------data-native-menu="false"
원래 html 스타일을 사용하지 않고
jQuerymobile에 적합한 스타일을 사용한다.
select태그에 적용하면 목록들이 pc와 다르게 목록이 중간에 나온다
<div data-role="fieldcontain">
<label for="select-choice-a">좋아하는 과목을 선택</label>
<select name="select-choice-a" id="select-choice-a"
data-native-menu="false">
<option>아래에서 선택</option>
<option value="Java언어">Java언어</option>
<option value="오라클">오라클</option>
<option value="jQuery">jQuery</option>
<option value="화면구현">화면구현</option>
</select> <!-- pc와 다르게 목록이 중간에 나온다 -->
</div>
2022-08-12
