HTML5 フォーム部品

TOP > HTML > HTML5のフォーム部品 > 前バージョンのHTMLと同様のフォーム部品・属性

HTML5のフォーム部品

前バージョンのHTMLと同様のフォーム部品・属性

input type="text" ■テキスト入力欄

名前：


名前：<input type="text" name="xxx" value="hogehoge" size="20" />

input type="password" ■パスワード入力欄

パスワード：


パスワード：<input type="password" name="xxx" value="hogehoge" size="10" />

input type="hidden" ■隠しフィールド


<input type="hidden" name="dog" value="プードル" />

<input type="hidden" name="cat" value="シャム" />

<input type="hidden" name="bird" value="ペンギン" />

input type="checkbox" ■チェックボックス

犬猫鳥


<input type="checkbox" name="pet" value="dog" checked="checked" />犬

<input type="checkbox" name="pet" value="cat" />猫

<input type="checkbox" name="pet" value="bird" />鳥

input type="radio" ■ラジオボックス

犬猫猫


<input type="radio" name="pet" value="dog" checked="checked" />犬

<input type="radio" name="pet" value="cat" />猫

<input type="radio" name="pet" value="bird" />猫

select ■選択リスト


<select name="xxx">

<option value="犬" selected="selected">犬</option>

<option value="猫">猫</option>

<option value="鳥">鳥</option>

</select>

optgroup ■<option>のグループ化

選択肢をグループ化する


<select name="animal">

<option selected>▼好きな動物を選択</option>

<optgroup label="犬">

<option value="dog1">トイプードル</option>

<option value="dog2">レドリバー</option>

<option value="dog3">ダックスフンド</option>

</optgroup>

<optgroup label="猫" disabled>

<option value="cat1">シャム</option>

<option value="cat2">アメリカンショートヘアー</option>

<option value="cat3">ペルシャ</option>

</optgroup>

<optgroup label="鳥">

<option value="bird1">鳩</option>

<option value="bird2">オウム</option>

<option value="bird3">ペンギン</option>

</optgroup>

</select>

動物：


<label for="yyy">動物：</label>

<select id="yyy" name="xxx">

<option value="dog">犬</option>

<option value="cat" disabled>猫</option>

<option value="bird">鳥</option>

</select>


<input type="search" name="xxx" list="yyy" autocomplete="on">

<datalist id="yyy">

<option value="犬">犬</option>

<option value="猫">猫</option>

<option value="鳥">鳥</option>

</datalist>

fieldset、legend、label ■グループ化とラベル

ペット犬猫鳥


<fieldset disabled="disabled">

<legend>ペット</legend>

<label><input type="radio" name="pet" value="dog">犬</label>

<label><input type="radio" name="pet" value="cat">猫</label>

<label><input type="radio" name="pet" value="bird">鳥</label>

</fieldset>

ペット犬猫鳥

▼書き方はかわるが上記ソースと同様の内容


<fieldset disabled="disabled">

<legend>ペット</legend>

<label for="dog">犬</label><input type="radio" name="dog" id="dansei" value="dog" />

<label for="cat">猫</label><input type="radio" name="cat" id="jyosei" value="cat" />

<label for="bird">鳥</label><input type="radio" name="bird" id="jyosei" value="bird" />

</fieldset>

input type="file" ■ファイル選択


<input type="file" name="xxx" />

input type="button" ■ボタン


<input type="button" value="ボタンです" />

input type="reset" ■フォームの内容をクリアする


<input type="reset" value="リセットする" />

input type="submit" ■実行する


<input type="submit" value=" 送信 " />