HTML5 フォーム部品

TOP > HTML  > HTML5のフォーム部品 >  HTML5で追加されたフォーム部品・属性

HTML5のフォーム部品

このエントリーをはてなブックマークに追加

HTML5で追加されたフォーム部品・属性

input type="range" ■レンジ入力

<input type="range" name="xxx" min="-5" max="5" value="1" />

autofocus ■オートフォーカス

<input type="text" name="xxx" autofocus />

placeholder ■初期表示（プレースホルダー）を設定

<input type="text" name="xxx" placeholder="入力して下さい" /> <textarea name="xxx" cols="20" rows="3" placeholder="ご記入ください"></textarea>

required ■入力内容を必須に

※入力必須
 <input type="text" name="xxx" required /> ※入力必須<br>

pattern ■入力値を正規表現で自動チェック

<input type="text" name="xxx" pattern="^[0-9A-Za-z]+$" />

min max ■最大値・最小値の設定

　-5～+5
 <input type="number" name="xxx" min="-5" max="5" />　-5～+5<br>

step ■ステップ値

<input type="number"name="xxx" step="0.1" />

autocomplete ■自動補完（オートコンプリート）

<input type="text" name="xxx" autocomplete="on" list="yyy">
<datalist id="yyy">
<option value="犬">犬</option>
<option value="猫">猫</option>
<option value="鳥">鳥</option>
</datalist>

multiple ■複数のアイテムを選択・入力

<select name="xxx" multiple size="4">
<option value="dog">犬</option>
<option value="cat">猫</option>
<option value="bird">鳥</option>
<option value="fish">魚</option>
</select> <input type="text" name="xxx" list="yyy" multiple>
<datalist id="yyy">
<option value="犬">犬</option>
<option value="猫">猫</option>
<option value="鳥">鳥</option>
</datalist>

datalist ■データリストを定義

<input type="text" name="xxx" autocomplete="on" list="yyy">
<datalist id="yyy">
<option value="dog">犬</option>
<option value="cat">猫</option>
<option value="bird">鳥</option>
</datalist>

keygen ■フォーム送信時の暗号化キー

<keygen name="xxx" />

output ■計算結果

 <fieldset>
<input type="range" name="xxx" min="0" max="5" />
<output name="result" onforminput="value=xxx.value"></output>
</fieldset>

progress ■進捗

進捗率75% <progress min="0" max="100" value="75" />進捗率75%</progress>

meter ■範囲内の値

10/27 <meter min="0" max="27" value="10">10/27</meter>