W3.CSS

W3.CSSホーム W3.CSSイントロ W3.CSSカラー W3.CSSコンテナ W3.CSSパネル W3.CSSボーダー W3.CSSカード W3.CSSのデフォルト W3.CSSフォント W3.CSS Google W3.CSSテキスト W3.CSSラウンド W3.CSSパディング W3.CSSマージン W3.CSSディスプレイ W3.CSSボタン W3.CSSノート W3.CSSの見積もり W3.CSSアラート W3.CSSテーブル W3.CSSリスト W3.CSS画像 W3.CSS入力 W3.CSSバッジ W3.CSSタグ W3.CSSアイコン W3.CSSレスポンシブ W3.CSSレイアウト W3.CSSアニメーション W3.CSS効果 W3.CSSバー W3.CSSドロップダウン W3.CSSアコーディオン W3.CSSナビゲーション W3.CSSサイドバー W3.CSSタブ W3.CSSページ付け W3.CSSプログレスバー W3.CSSスライドショー W3.CSSモーダル W3.CSSツールチップ W3.CSSグリッド W3.CSSコード W3.CSSフィルター W3.CSSトレンド W3.CSSケース W3.CSSマテリアル W3.CSS検証 W3.CSSバージョン W3.CSSモバイル

W3.CSSカラー

W3.CSSカラークラス W3.CSSカラー素材 W3.CSSカラーフラットUI W3.CSSカラーメトロUI W3.CSSカラーWin8 W3.CSSカラーiOS W3.CSSカラーファッション W3.CSSカラーライブラリ W3.CSSカラースキーム W3.CSSカラーテーマ W3.CSSカラージェネレーター

Web構築

Webイントロ Web HTML Web CSS Web JavaScript Webレイアウト Webバンド Webケータリング Webレストラン Webアーキテクト

W3.CSSの例 W3.CSSデモ W3.CSSテンプレート

参考文献

W3.CSSリファレンス W3.CSSダウンロード

W3.CSS入力


入力フォーム










トップラベル

入力フォーム

<form class="w3-container">

<label>First Name</label>
<input class="w3-input" type="text">

<label>Last Name</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>First Name</label>
<input class="w3-input" type="text">

<label>Last Name</label>
<input class="w3-input" type="text">

</form>

</div>

色付きラベル

w3-text-colorクラスのいずれかを使用して、ラベルに色を付けます。

<form class="w3-container">

<label class="w3-text-blue"><b>First Name</b></label>
<input class="w3-input w3-border" type="text">
 
<label class="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-borderクラスを追加して、境界入力を作成します。


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

丸みを帯びた境界線

w3-roundクラスのいずれかを使用して、丸みを帯びた境界線を作成します。


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

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

ボーダレス入力

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>

お好きなスタイルや色をお気軽にご利用ください。

入力フォーム

<div class="w3-container w3-teal">
  <h2>Input Form</h2>
</div>

<form class="w3-container">
  <label class="w3-text-teal"><b>First Name</b></label>
  <input class="w3-input w3-border w3-light-grey" type="text">

  <label class="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>

ホバー可能な入力

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">

アニメーション入力

w3-animate-inputクラスは、フォーカスを取得すると、入力フィールドの幅を100%に変換します。

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

チェックボックス

<input class="w3-check" type="checkbox" checked="checked">
<label>Milk</label>

<input class="w3-check" type="checkbox">
<label>Sugar</label>

<input class="w3-check" type="checkbox" disabled>
<label>Lemon (Disabled)</label>

ラジオボタン

<input class="w3-radio" type="radio" name="gender" value="male" checked>
<label>Male</label>

<input class="w3-radio" type="radio" name="gender" value="female">
<label>Female</label>

<input class="w3-radio" type="radio" name="gender" value="" disabled>
<label>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>

ボーダー選択メニュー

<select class="w3-select w3-border" name="option">

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

この例では、W3.CSSのレスポンシブグリッドシステムを使用して、入力を同じ行に表示します(小さい画面では、100%の幅で水平にスタックします)。これについては後で詳しく説明します。

<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>

ラベル付きグリッド

<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>

アイコンラベル

お問い合わせ