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=" 送信 " />