W3.CSS 入力

❮ 前章へ 次章へ ❯

入力フォーム









上ラベル

Input Form

例

<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>
Try It Yourself ❯

下ラベル

Input 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>
Try It Yourself ❯

入力カード

Header


例

<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>
Try It Yourself ❯

緑色のラベル

Labels with class="w3-label" are green by default:


例

<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>
Try It Yourself ❯

検証用ラベル

検証用ラベルは赤色ですが、入力が有効になると緑色に切り替わります。

検証用ラベルを作るには、w3-label クラスに w3-validate クラスを追加します。


例

<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>
Try It Yourself ❯

色付きラベル

ラベルに色を付けるためには、w3-text-color クラスのいずれかを使用します：

Register

例

<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>
Try It Yourself ❯

ボーダー付き入力

ボーダー付き入力を作るためには、w3-border クラスを追加します：


例

<input class="w3-input w3-border" type="text">
Try It Yourself ❯

角丸ボーダ

角丸ボーダを作るためには、いずれかの w3-round クラスを使用します：


例

<input class="w3-input w3-border w3-round" type="text">

<input class="w3-input w3-border w3-round-large" type="text">
Try It Yourself ❯

ボーダーなし入力

w3-input クラスには、デフォルトで下ボーダーが付きます。ボーダーの無い入力が必要な場合は、w3-border-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>
Try It Yourself ❯

色

気軽に、好きなスタイルと色を使ってください：

Input Form

Register

例

<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>
Try It Yourself ❯

ホバー効果付き入力

w3-hover-color クラスは、マウスオーバ時に入力フィールドへ背景色を追加します：

例

<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">
Try It Yourself ❯

アニメ付き入力

w3-animate-input クラスは、入力フィールドがフォーカスを取得したときに、幅を 100％ に変形します：

例

<input class="w3-input w3-animate-input" type="text" style="width:30%">
Try It Yourself ❯

チェックボックス

例

<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>
Try It Yourself ❯

ラジオボタン

例

<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>
Try It Yourself ❯

選択肢の選択

例

<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>
Try It Yourself ❯

ボーダー付きセレクト・メニュー

例

<select class="w3-select w3-border" name="option">
Try It Yourself ❯

グリッド内のフォーム要素

この例では、入力を同じ行に表示するため W3.CSS「レスポンシブ・グリッド・システムを使用します （小型画面上では、100％ 幅でスタックされます）。これに関しては、後でより詳しく学習します。

In this example, we use W3.CSS' Responsive Grid System to make the inputs appear on the same line (on smaller screens, they will stack horizontally with 100% width). You will learn more about this later.

例

<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>
Try It Yourself ❯

ラベル付き 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>
Try It Yourself ❯

❮ 前章へ 次章へ ❯