入力フォームを使いやすくするHTML(備忘録)

2066 ワード
form form テキストリンク

電話番号を入力時に数字キーボードを表示する

<input type="tel">

type="tel"を入れることでキーボードが数字入力になります。

チェックボックスの選択部分を文章もまるごとにする

<label>
  <input type="checkbox" >選択肢A
</label>

<label>タグで囲むことでテキスト部分も選択範囲として認識します。

自動入力機能をつかう

<input type="text" autocomplete="street-address" >

こちらで指定した入力候補を出す

<input type="text" list="samplelist" >
<datalist id="samplelist">
  <option value="埼玉県"></option>
  <option value="東京都"></option>
  <option value="神奈川県"></option>
</datalist>

参考

池田泰延さんTwitter