Form (폼) 요소에 대해서 공부합니다.

Form 요소는 모두 <form> </from> 태그 사이에 있어야 합니다.

form 요소는 input, select, check, radio 등 여러 태그들이 올 수 있고 이 태그들은 사용자로부터 내용을 입력받게 됩니다.

또한 입력받은 내용들을 form 이 서버로 전송하는 역할을 하게 됩니다.

기존에 알고있던 html 의 form 요소보다 한층 더 업그레이드된 ui 를 제공하게 됩니다.

이번 시간에는 button과 slider 에 대해 살펴보겠습니다.

button

기본적인 버튼은 a 태그, button 태그, input 태그로 표현할 수 있습니다.

소스부터 살펴봅니다.

1번 라인 : a 태그를 사용한 버튼입니다. 클래스로 버튼임을 지정하게 됩니다. 기본적으로 width는 화면의 너비에 마춰집니다.

2번 라인 : button 태그를 사용한 버튼입니다. 방식은 a 태그와 같습니다.

3번 라인 : 3번 라인은 input 태그를 사용했습니다. data-icon 이라는 속성이 보입니다. 아이콘을 지정해주는 것은 이전 강의들에서 나온 부분임으로 생략합니다. data-iconpos 속성을 이용하면 아이콘의 위치를 이동할 수 있습니다. (참고강좌 : http://cofs.tistory.com/164)

이번에는 버튼들을 가로로 정렬시켜 보면서 다른 속성들도 살펴보겠습니다.

클래스 중에 ui-btn-inline 클래스가 있는데 이 클래스가 버튼들을 가로로 정렬시켜주는 역할을 합니다. 가로로 정렬하기 위해서는 정렬할 모든 버튼에 ui-btn-inline 클래스가 필요합니다.

1번 라인 : ui-icon-star 클래스는 별모양 아이콘을 나타냅니다. 이 클래스는 아이콘의 위치를 지정해 주는 ui-btn-icon-left 클래스와 함께 정의되어야 합니다. ui-btn-icon-left 클래스와 ui-icon-star 클래스 등 클래스로 아이콘을 설정하는 방식은 input 태그에서는 적용되지 않습니다.

2번 라인 : ui-mini 클래스가 있는데 이는 작은 버튼을 나타내는 의미입니다.

3번 라인 : ui-icon-plus 클래스와 ui-btn-icon-notext 클래스가 함께 있으면 아이콘만을 나타내는 것을 의미합니다.

위의 두 분류의 버튼들은 모두 사이가 멀어져 보입니다.

이 버튼들을 붙혀서 그룹을 지어줄 수 있습니다.

data-role="controlgroup" 속성을 가진 div 태그로 감싸주면 버튼들은 하나의 그룹으로 묶이게 됩니다. 여기서 data-type="horizontal" 이라는 속성이 있는데 이는 수평으로 그룹을 지어준다는 의미이며 생략시 기본값으로 수직으로 그룹화가 됩니다. data-mini 속성은 작은 버튼으로 만들것인지에 대한 정의입니다.

이번에는 slider에 대해 살펴보겠습니다.

슬라이더는 사용자가 커서를 이동시켜서 값을 선택할 수 있는 태그입니다.

input 태그의 type="range" 속성을 사용하며 HTML5 에서 새로 추가된 속성입니다.

2번 라인 : 별다른 속성 추가 없이 range 속성만으로도 slider 를 만들 수 있습니다.

4번 라인 : step 속성은 증가되거나 감소되는 량의 범위를 지정해줍니다. data-highlight 는 slider 의 증가된 부분에 색을 표시할지 여부를 설정합니다.

이번에는 슬라이더의 범위를 설정할 수 있도록 만들어 봅니다.

1번 라인 : data-role="rangeslider" 속성을 가진 div로 slider 2개를 감싸줍니다.

그럼 끝입니다. 다른 점은 없습니다.

7번 라인에서 data-mini 속성은 조금 더 작은 slider 를 만들겠다는 속성입니다.