技術ブログ横浜市

【コピペで使える】横浜市18区のフォーム部品サンプル

2024年05月09日

セレクトボックス（プルダウン）

<label for="ku">区</label>
<select id="ku">
  <option value="">区</option>
  <option value="14101">鶴見区</option>
  <option value="14102">神奈川区</option>
  <option value="14103">西区</option>
  <option value="14104">中区</option>
  <option value="14105">南区</option>
  <option value="14106">保土ケ谷区</option>
  <option value="14107">磯子区</option>
  <option value="14108">金沢区</option>
  <option value="14109">港北区</option>
  <option value="14110">戸塚区</option>
  <option value="14111">港南区</option>
  <option value="14112">旭区</option>
  <option value="14113">緑区</option>
  <option value="14114">瀬谷区</option>
  <option value="14115">栄区</option>
  <option value="14116">泉区</option>
  <option value="14117">青葉区</option>
  <option value="14118">都筑区</option>
</select>

データリスト

Q
datalistとは？
A

テキストボックスとセレクトボックスの良いとこ取り。入力もできるプルダウン。

【デメリット】ブラウザによっては非対応。select-optionのようにvalueと表示値を別々にもつことはできない。

<label for="ku">区</label>
<input list="18ku" id="ku" />
<datalist id="18ku">
  <option value="鶴見区"></option>
  <option value="神奈川区"></option>
  <option value="西区"></option>
  <option value="中区"></option>
  <option value="南区"></option>
  <option value="保土ケ谷区"></option>
  <option value="磯子区"></option>
  <option value="金沢区"></option>
  <option value="港北区"></option>
  <option value="戸塚区"></option>
  <option value="港南区"></option>
  <option value="旭区"></option>
  <option value="緑区"></option>
  <option value="瀬谷区"></option>
  <option value="栄区"></option>
  <option value="泉区"></option>
  <option value="青葉区"></option>
  <option value="都筑区"></option>
</datalist>

コメント