HTML のフォーム

フォーム関連で input 要素の type 属性で指定できる種類が増えた。下記の通り。なお、datetime 属性は廃止されたことがわかったので、削除した（2020-06-21）。

キーワード	表記	Mozilla へのリンク
text	<input type="text" size="30">
radio	<input type="radio">
checkbox
password
file
tel
search
url
email
date
month
week
time
datetime-local
number	<input type="number" min="0">	number
range
color

選択肢型のフォーム

メニュータイプの選択である。「ポップアップメニュー」「ドロップダウンメニュー」「リストメニュー」などと呼ばれる。

携帯電話　自動車チェロ

ボタン要素とインプット要素

ボタンは input 要素でも、button 要素でも表現できる

キーワード	見た目	表記
input 要素		<input type="button" value="クリックして" size="30">
button 要素		<button type="button">クリックして</button>

選択可能なリスト

select 要素と option 要素

<select> と <option> を組合せて選択肢の中から要素を選ぶことができる。ただし、選択肢以外の要素を入力することはできない。


<label for="opening-choice">戦法を選んでください:</label>

<select id="opening">
	<option value="">--選んで下さい--</option>
	<option value="中飛車">中飛車</option>
	<option value="四間飛車">四間飛車</option>
	<option value="三間飛車">三間飛車</option>
	<option value="向かい飛車">向かい飛車</option>
</select>

戦法を選んでください:

datalist 要素と option 要素

<option> 要素を使うと通常は選択肢の中からしか選べないが、<datalist> 要素を使うと任意の値が入力可能な選択肢が表示できる。


<label for="science-choice">分野を選んでください:</label>
<input list="sciences" id="science-choice" name="science-choice">

<datalist id="sciences">
    <option value="数学">
    <option value="物理学">
    <option value="化学">
    <option value="生物学">
    <option value="天文学">
</datalist>

分野を選んでください:

参考

まりんきょ学問所＞コンピュータの部屋＞マーク付け言語手習い＞ HTML5

MARUYAMA Satosi