기본 폼
기본 인라인 폼을 만들려면 아무 <form> 엘리먼트에 pure-form 클래스이름을 넣으면 된다.
<form class="pure-form">
<fieldset>
<legend>단순한 인라인 폼</legend>
<input type="email" placeholder="Email">
<input type="password" placeholder="Password">
<label for="remember">
<input id="remember" type="checkbox"> 기억하기
</label>
<button type="submit" class="pure-button notice">로그인</button>
</fieldset>
</form>쌓인 폼
레이블아래 인풋 엘리먼트들이 쌓이는 폼을 만들려면, <form> 엘리먼트의 클래스이름 pure-form 옆에 pure-form-stacked를 추가한다.
<form class="pure-form pure-form-stacked">
<fieldset>
<legend>쌓인 폼</legend>
<label for="email">Email</label>
<input id="email" type="email" placeholder="Email">
<label for="password">Password</label>
<input id="password" type="password" placeholder="Password">
<label for="state">주소</label>
<select id="state">
<option>서울</option>
<option>경기도</option>
<option>인천</option>
</select>
<label for="remember" class="pure-checkbox">
<input id="remember" type="checkbox"> 기억하기
</label>
<button type="submit" class="pure-button notice">로그인</button>
</fieldset>
</form>정렬된 폼
정렬된 폼을 만들려면 <form> 엘리먼트의 클래스이름 pure-form 옆에 pure-form-aligned를 추가한다. 정렬된 폼에서는 폼의 인풋들과 반대로 레이블들이 오른쪽 정렬이지만, 작은 스크린에서는 쌓인 폼으로 전환된다.
<form class="pure-form pure-form-aligned">
<fieldset>
<div class="pure-control-group">
<label for="name">이름</label>
<input id="name" type="text" placeholder="Username">
</div>
<div class="pure-control-group">
<label for="password">패스워드</label>
<input id="password" type="password" placeholder="Password">
</div>
<div class="pure-control-group">
<label for="email">Email 주소</label>
<input id="email" type="email" placeholder="Email Address">
</div>
<div class="pure-control-group">
<label for="foo">쓸데없이이리저리늘여서확인해보는 레이블</label>
<input id="foo" type="text" placeholder="Enter something here...">
</div>
<div class="pure-controls">
<label for="cb" class="pure-checkbox">
<input id="cb" type="checkbox"> 약관과 조건을 읽었습니다.
</label>
<button type="submit" class="pure-button">가입</button>
</div>
</fieldset>
</form>(Pure 그리드를 쓰는) 멀티컬럼 폼
멀티컬럼 폼을 만들려면, 폼 엘리먼트 안에 Pure 그리드를 넣어라. 쌓인 폼과 Pure 그리드를 이용한 예제는 다음과 같다.
<form class="pure-form pure-form-stacked">
<fieldset>
<legend>회원가입</legend>
<!-- 한국어화에 맞추기 위해 성-이름 순으로 변경 -->
<div class="pure-g-r">
<div class="pure-u-1-3">
<label for="first-name">성</label>
<input id="first-name" type="text">
</div>
<div class="pure-u-1-3">
<label for="last-name">이름</label>
<input id="last-name" type="text">
</div>
<div class="pure-u-1-3">
<label for="email">E-Mail</label>
<input id="email" type="email" required>
</div>
<div class="pure-u-1-3">
<label for="city">도시</label>
<input id="city" type="text">
</div>
<div class="pure-u-1-3">
<label for="state">주소</label>
<select id="state" class="pure-input-medium">
<option>서울</option>
<option>경기도</option>
<option>인천</option>
</select>
</div>
</div>
<label for="terms" class="pure-checkbox">
<input id="terms" type="checkbox"> 약관과 조건을 읽었습니다.
</label>
<button type="submit" class="pure-button notice">가입</button>
</fieldset>
</form>인풋 묶음
텍스트 기반의 인풋들을 묶기 위해서 pure-group 클래스 이름을 가진 <fieldset> 엘리먼트로 묶으면 된다. 인풋 묶음은 회원가입 폼에서 유용하며 모바일 기기에서도 자연스럽게 보인다.
<form class="pure-form">
<fieldset class="pure-group">
<input type="text" class="pure-input-1-2" placeholder="Username">
<input type="text" class="pure-input-1-2" placeholder="Password">
<input type="email" class="pure-input-1-2" placeholder="Email">
</fieldset>
<fieldset class="pure-group">
<input type="text" class="pure-input-1-2" placeholder="Another Group">
<input type="text" class="pure-input-1-2" placeholder="More Stuff">
</fieldset>
<button type="submit" class="pure-button pure-input-1-2 notice">가입</button>
</form>인풋 크기
인풋 엘리먼트들은 Pure 그리드와 비슷한 방법으로 유연한 너비 크기를 갖는다. 엘리먼트에 "pure-input-*" 클래스를 추가해서 적용할 수 있다.
<form class="pure-form">
<input class="pure-input-1" type="text" placeholder=".pure-input-1"><br>
<input class="pure-input-2-3" type="text" placeholder=".pure-input-2-3"><br>
<input class="pure-input-1-2" type="text" placeholder=".pure-input-1-2"><br>
<input class="pure-input-1-3" type="text" placeholder=".pure-input-1-3"><br>
<input class="pure-input-1-4" type="text" placeholder=".pure-input-1-4"><br>
</form>
그리드 컨테이너로 묶어서 인풋 크기를 조절할 수도 있다. 아래 예시에서는 <input> 엘리먼트들이 pure-input-1 클래스지만 특정 그리드 클래스를 가진 <div>로 묶여있다.
<form class="pure-form pure-g">
<div class="pure-u-1-4">
<input class="pure-input-1" type="text" placeholder=".pure-u-1-4">
</div>
<div class="pure-u-3-4">
<input class="pure-input-1" type="text" placeholder=".pure-u-3-4">
</div>
<div class="pure-u-1-2">
<input class="pure-input-1" type="text" placeholder=".pure-u-1-2">
</div>
<div class="pure-u-1-2">
<input class="pure-input-1" type="text" placeholder=".pure-u-1-2">
</div>
<div class="pure-u-1-8">
<input class="pure-input-1" type="text" placeholder=".pure-u-1-8">
</div>
<div class="pure-u-1-8">
<input class="pure-input-1" type="text" placeholder=".pure-u-1-8">
</div>
<div class="pure-u-1-4">
<input class="pure-input-1" type="text" placeholder=".pure-u-1-4">
</div>
<div class="pure-u-1-2">
<input class="pure-input-1" type="text" placeholder=".pure-u-1-2">
</div>
<div class="pure-u-1-5">
<input class="pure-input-1" type="text" placeholder=".pure-u-1-5">
</div>
<div class="pure-u-2-5">
<input class="pure-input-1" type="text" placeholder=".pure-u-2-5">
</div>
<div class="pure-u-2-5">
<input class="pure-input-1" type="text" placeholder=".pure-u-2-5">
</div>
<div class="pure-u-1">
<input class="pure-input-1" type="text" placeholder=".pure-u-1">
</div>
</form>필수 인풋
폼에서 필수 항목을 나타내기 위해서 required 속성을 추가한다.
<form class="pure-form">
<input type="email" placeholder="email은 필수" required>
</form>비활성화된 인풋
폼 항목을 비활성화하기 위해서는 disabled 속성을 추가한다.
<form class="pure-form">
<input type="text" placeholder="이건 비활성화된 인풋..." disabled>
</form>둥근 인풋
폼 항목의 모서리를 둥글게 보이려면, pure-input-rounded 클래스이름을 추가한다.
<form class="pure-form">
<input type="text" class="pure-input-rounded">
<button type="submit" class="pure-button">검색</button>
</form>체크박스와 라디오
체크박스와 라디오 인풋들을 깔끔하게 정렬하고 싶으면, pure-checkbox 혹은 pure-radio 클래스이름을 추가한다.
<form class="pure-form">
<label for="option-one" class="pure-checkbox">
<input id="option-one" type="checkbox" value="">
여기 옵션 하나.
</label>
<label for="option-two" class="pure-radio">
<input id="option-two" type="radio" name="optionsRadios" value="option1" checked>
여기는 라디오 버튼. 선택할 수도 있고...
</label>
<label for="option-three" class="pure-radio">
<input id="option-three" type="radio" name="optionsRadios" value="option2">
...아니면 이거!
</label>
</form>