デフォルトのフォーム
デフォルトのインラインフォームを作成するには、pure-form クラス名を <form> 要素に追加します。
<form class="pure-form">
<fieldset>
<legend>A compact inline form</legend>
<input type="email" placeholder="Email" />
<input type="password" placeholder="Password" />
<label for="default-remember">
<input type="checkbox" id="default-remember" /> Remember me
</label>
<button type="submit" class="pure-button pure-button-primary">Sign in</button>
</fieldset>
</form>スタックされたフォーム
ラベルの下にインプット要素があるスタックされたフォームを作成するには、pure-form とともに pure-form-stacked クラス名を <form> 要素に追加します。
<form class="pure-form pure-form-stacked">
<fieldset>
<legend>A Stacked Form</legend>
<label for="stacked-email">Email</label>
<input type="email" id="stacked-email" placeholder="Email" />
<span class="pure-form-message">This is a required field.</span>
<label for="stacked-password">Password</label>
<input type="password" id="stacked-password" placeholder="Password" />
<label for="stacked-state">State</label>
<select id="stacked-state">
<option>AL</option>
<option>CA</option>
<option>IL</option>
</select>
<label for="stacked-remember" class="pure-checkbox">
<input type="checkbox" id="stacked-remember" /> Remember me
</label>
<button type="submit" class="pure-button pure-button-primary">Sign in</button>
</fieldset>
</form>整列されたフォーム
整列されたフォームを作成するには、pure-form とともに pure-form-aligned クラス名を <form> 要素に追加します。整列されたフォームでは、ラベルはフォームのインプットコントロールに対して右揃えになりますが、小さい画面では スタックされたフォーム に戻ります。
<form class="pure-form pure-form-aligned">
<fieldset>
<div class="pure-control-group">
<label for="aligned-name">Username</label>
<input type="text" id="aligned-name" placeholder="Username" />
<span class="pure-form-message-inline">This is a required field.</span>
</div>
<div class="pure-control-group">
<label for="aligned-password">Password</label>
<input type="password" id="aligned-password" placeholder="Password" />
</div>
<div class="pure-control-group">
<label for="aligned-email">Email Address</label>
<input type="email" id="aligned-email" placeholder="Email Address" />
</div>
<div class="pure-control-group">
<label for="aligned-foo">Supercalifragilistic Label</label>
<input type="text" id="aligned-foo" placeholder="Enter something here..." />
</div>
<div class="pure-controls">
<label for="aligned-cb" class="pure-checkbox">
<input type="checkbox" id="aligned-cb" /> I've read the terms and conditions
</label>
<button type="submit" class="pure-button pure-button-primary">Submit</button>
</div>
</fieldset>
</form>複数カラムのフォーム（Pure Grids を使用）
複数カラムのフォームを作成するには、フォーム要素を Pure Grid に含めます。レスポンシブな複数カラムのフォーム（下の例のような）を作成するには、ページに Pure Responsive Grids がある必要があります。
<form class="pure-form pure-form-stacked">
<fieldset>
<legend>Legend</legend>
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-3">
<label for="multi-first-name">First Name</label>
<input type="text" id="multi-first-name" class="pure-u-23-24" />
</div>
<div class="pure-u-1 pure-u-md-1-3">
<label for="multi-last-name">Last Name</label>
<input type="text" id="multi-last-name" class="pure-u-23-24" />
</div>
<div class="pure-u-1 pure-u-md-1-3">
<label for="multi-email">E-Mail</label>
<input type="email" id="multi-email" class="pure-u-23-24" required="" />
</div>
<div class="pure-u-1 pure-u-md-1-3">
<label for="multi-city">City</label>
<input type="text" id="multi-city" class="pure-u-23-24" />
</div>
<div class="pure-u-1 pure-u-md-1-3">
<label for="multi-state">State</label>
<select id="multi-state" class="pure-input-1-2">
<option>AL</option>
<option>CA</option>
<option>IL</option>
</select>
</div>
</div>
<label for="multi-terms" class="pure-checkbox">
<input type="checkbox" id="multi-terms" /> I've read the terms and conditions
</label>
<button type="submit" class="pure-button pure-button-primary">Submit</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="A title" />
<textarea class="pure-input-1-2" placeholder="Textareas work too"></textarea>
</fieldset>
<button type="submit" class="pure-button pure-input-1-2 pure-button-primary">Sign in</button>
</form>インプットサイジング
インプット要素は、Pure Grids に似た構文でスムースな幅のサイズを持ちます。これらの要素に pure-input-* クラスを適用できます。
<form class="pure-form">
<input type="text" class="pure-input-1" placeholder=".pure-input-1" />
<br />
<input type="text" class="pure-input-2-3" placeholder=".pure-input-2-3" />
<br />
<input type="text" class="pure-input-1-2" placeholder=".pure-input-1-2" />
<br />
<input type="text" class="pure-input-1-3" placeholder=".pure-input-1-3" />
<br />
<input type="text" class="pure-input-1-4" 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 type="text" class="pure-input-1" placeholder=".pure-u-1-4" />
</div>
<div class="pure-u-3-4">
<input type="text" class="pure-input-1" placeholder=".pure-u-3-4" />
</div>
<div class="pure-u-1-2">
<input type="text" class="pure-input-1" placeholder=".pure-u-1-2" />
</div>
<div class="pure-u-1-2">
<input type="text" class="pure-input-1" placeholder=".pure-u-1-2" />
</div>
<div class="pure-u-1-8">
<input type="text" class="pure-input-1" placeholder=".pure-u-1-8" />
</div>
<div class="pure-u-1-8">
<input type="text" class="pure-input-1" placeholder=".pure-u-1-8" />
</div>
<div class="pure-u-1-4">
<input type="text" class="pure-input-1" placeholder=".pure-u-1-4" />
</div>
<div class="pure-u-1-2">
<input type="text" class="pure-input-1" placeholder=".pure-u-1-2" />
</div>
<div class="pure-u-1-5">
<input type="text" class="pure-input-1" placeholder=".pure-u-1-5" />
</div>
<div class="pure-u-2-5">
<input type="text" class="pure-input-1" placeholder=".pure-u-2-5" />
</div>
<div class="pure-u-2-5">
<input type="text" class="pure-input-1" placeholder=".pure-u-2-5" />
</div>
<div class="pure-u-1">
<input type="text" class="pure-input-1" placeholder=".pure-u-1" />
</div>
</form>必須のインプット
フォームコントロールを必須としてマークするには、required 属性を追加します。
<form class="pure-form">
<input type="email" placeholder="Requires an email" required="" />
</form>無効なインプット
フォームコントロールを無効にするには、disabled 属性を追加します。
<form class="pure-form">
<input type="text" placeholder="Disabled input here..." disabled="" />
</form>読み取り専用インプット
フォームインプットを読み取り専用にするには、readonly 属性を追加します。disabled と readonly の違いは、読み取り専用インプットは依然としてフォーカス可能です。これにより、ユーザーはインプットを操作してテキストを選択できますが、無効なコントロールは操作できません。
<form class="pure-form">
<input type="text" value="Readonly input here..." readonly="" />
</form>角丸のインプット
角が丸い状態でフォームコントロールを表示するには、pure-input-rounded クラス名を追加します。
<form class="pure-form">
<input type="text" class="pure-input-rounded" />
<button type="submit" class="pure-button">Search</button>
</form>チェックボックスとラジオボタン
チェックボックスとラジオインプットを正規化して整列するには、pure-checkbox または pure-radio クラス名を追加します。
<form class="pure-form">
<label for="checkbox-radio-option-one" class="pure-checkbox">
<input type="checkbox" id="checkbox-radio-option-one" value="" /> Here's option one.
</label>
<label for="checkbox-radio-option-two" class="pure-radio">
<input type="radio" id="checkbox-radio-option-two" name="optionsRadios" value="option1" checked="" /> Here's a radio button. You can choose this one..
</label>
<label for="checkbox-radio-option-three" class="pure-radio">
<input type="radio" id="checkbox-radio-option-three" name="optionsRadios" value="option2" /> ..Or this one!
</label>
</form>