入力フォーム
トップラベル
入力フォーム
例
<form class="w3-container">
<label>First Name</label>
<input class="w3-input" type="text">
<label>Last Namel</label>
<input class="w3-input" type="text">
</form>
»それを自分で試してみてください ボトムラベル
入力フォーム
例
<form class="w3-container">
<input class="w3-input" type="text">
<label>First Name</label>
<input class="w3-input" type="text">
<label>Last
Name</label>
</form>
»それを自分で試してみてください 入力カード
ヘッダ
例
<div class="w3-card-4">
<div class="w3-container
w3-green">
<h2>Header</h2>
</div>
<form class="w3-container">
<label
class="w3-label">First Name</label>
<input class="w3-input"
type="text">
<label
class="w3-label">Last Name</label>
<input class="w3-input"
type="text">
</form>
</div> »それを自分で試してみてください グリーンラベル
クラス= "W3ラベル 」とのラベルは、デフォルトでは緑のとおりです。
例
<form class="w3-container">
<label
class="w3-label">First Name</label>
<input class="w3-input"
type="text">
<label
class="w3-label">Last Name</label>
<input class="w3-input"
type="text">
</form> »それを自分で試してみてください ラベルの検証
検証ラベルは赤であり、入力が有効になったときに緑色に点灯します。
検証ラベルを作成するには、W3-ラベルクラスにW3-検証クラスを追加します。
例
<form class="w3-container">
<input
class="w3-input" type="text" required>
<label class="w3-label
w3-validate">First Name</label>
<input class="w3-input" type="text" required>
<label class="w3-label
w3-validate">Last Name</label>
<input class="w3-input" type="email" required>
<label class="w3-label
w3-validate">Email</label>
</form> »それを自分で試してみてください 色付きのラベル
あなたのラベルを着色するためにW3-テキストカラークラスのいずれかを使用します。
例
<form class="w3-container">
<label
class="w3-label w3-text-blue"><b>First Name</b></label>
<input class="w3-input w3-border" type="text">
<label
class="w3-label w3-text-blue"><b>Last Name</b></label>
<input class="w3-input w3-border" type="text">
<button class="w3-btn
w3-blue">Register</button>
</form> »それを自分で試してみてください フチ入力
ボーダーの入力を作成するために、W3ボーダーのクラスを追加します。
丸みを帯びたボーダー
丸みを帯びた境界線を作成するために、W3ラウンドのクラスのいずれかを使用します。
例
<input class="w3-input w3-border w3-round"
type="text">
<input class="w3-input w3-border
w3-round-large"
type="text"> »それを自分で試してみてください ボーダレス入力
W3-入力クラスは、デフォルトで下の境界を持っています。 あなたはボーダレス入力をしたい場合は、W3-ボーダー-0クラスを追加します。
例
<form class="w3-container w3-light-grey">
<label>First
Name</label>
<input class="w3-input w3-border-0" type="text">
<label>Last Name</label>
<input class="w3-input
w3-border-0" type="text">
</form> »それを自分で試してみてください 色
お気に入りのスタイルや色を使用してお気軽に：
入力フォーム
例
<div class="w3-container w3-teal">
<h2>Input Form</h2>
</div>
<form class="w3-container">
<label class="w3-label w3-text-teal"><b>First Name</b></label>
<input class="w3-input w3-border w3-light-grey" type="text">
<label class="w3-label
w3-text-teal"><b>Last Name</b></label>
<input class="w3-input w3-border w3-light-grey" type="text">
<button class="w3-btn w3-blue-grey">Register</button>
</form> »それを自分で試してみてください Hoverable入力
W3-hover- カラークラスマウスオーバー上の入力フィールドに背景色を追加します。
例
<input class="w3-input w3-hover-green" type="text">
<input class="w3-input
w3-border w3-hover-red" type="text">
<input class="w3-input
w3-border w3-hover-blue" type="text">
»それを自分で試してみてください アニメーション入力
それがフォーカスを取得したときにW3-アニメイト入力クラスが100％に入力フィールドの幅を変換します：
例
<input class="w3-check" type="checkbox" checked="checked">
<label class="w3-validate">Milk</label>
<input class="w3-check"
type="checkbox">
<label class="w3-validate">Sugar</label>
<input class="w3-check" type="checkbox" disabled>
<label class="w3-validate">Lemon (Disabled)</label> »それを自分で試してみてください 例
<input class="w3-radio" type="radio" name="gender" value="male" checked>
<label class="w3-validate">Male</label>
<input class="w3-radio"
type="radio" name="gender" value="female">
<label class="w3-validate">Female</label>
<input class="w3-radio"
type="radio" name="gender" value="" disabled>
<label class="w3-validate">Don't know (Disabled)</label> »それを自分で試してみてください [オプション]を選択します
例
<select class="w3-select" name="option">
<option value="" disabled
selected>Choose your option</option>
<option value="1">Option
1</option>
<option value="2">Option 2</option>
<option
value="3">Option 3</option>
</select> »それを自分で試してみてください フチの選択メニュー
グリッド内のフォーム要素
この例では、入力が（小さな画面上で、彼らは100％の幅で水平にスタックします）同じ行に表示するためにW3.CSS「応答グリッドシステムを使用します。 後でこのについての詳細を学びます。
例
<div class="w3-row-padding">
<div class="w3-third">
<input class="w3-input w3-border" type="text" placeholder="One">
</div>
<div class="w3-third">
<input
class="w3-input w3-border" type="text" placeholder="Two">
</div>
<div class="w3-third">
<input class="w3-input
w3-border" type="text" placeholder="Three">
</div>
</div> »それを自分で試してみてください ラベルを持つ2つの列レイアウト：
例
<div class="w3-row-padding">
<div class="w3-half">
<label>First Name</label>
<input
class="w3-input w3-border" type="text" placeholder="Two">
</div>
<div class="w3-half">
<label>Last
Name</label>
<input class="w3-input
w3-border" type="text" placeholder="Three">
</div>
</div> »それを自分で試してみてください