HTMLで使うボタン系/その他のフォーム部品を説明した記事です。
checkbox
チェックボックスがつかえる
input タグで type 属性を使い、値を checkbox にする。
＜ソース＞
<input type="checkbox">＜ブラウザの表示＞
チェックされた状態にする
checked 属性を使う。
＜ソース＞
<input type="checkbox" checked>＜ブラウザの表示＞
radio
ラジオボタンが使える
input タグで type 属性を使い、値を radioにする。
＜ソース＞
<input type="radio">＜ブラウザの表示＞
一つだけ選択できるようにする
name 属性を使い、値を同じにする。
＜ソース＞
りんご <input type="radio" name="fruit">
バナナ <input type="radio" name="fruit">
ぶどう <input type="radio" name="fruit">＜ブラウザの表示＞
りんご バナナ ぶどう
チェックされた状態にする
checked 属性をつかう。
＜ソース＞
<input type="radio" checked>＜ブラウザの表示＞
fieldset
線で囲ってキャプション（見出し・説明文）を付ける
fieldset タグが親要素、legend タグを子要素として見出しを囲う。
＜ソース＞
<fieldset>
<legend> 好きな果物 </legend>
りんご <input type="checkbox">
バナナ <input type="checkbox">
ぶどう <input type="checkbox">
</fieldset>＜ブラウザの表示＞
button
ボタンを配置する
方法１
input タグで type 属性の値を button 、value 属性の値にボタンの文字
＜ソース＞
<input type="button" value="OK">＜ブラウザの表示＞
方法２
button タグでボタンの文字を囲う
＜ソース＞
<button>OK</button>＜ブラウザの表示＞
color（ブラウザ環境あり）
カラーピッカーから色が選べる
input タグで type 属性を使い、値を color にする。
＜ソース＞
<input type="color">＜ブラウザの表示＞
date（ブラウザ環境あり）
日付を入力できる
input タグで type 属性を使い、値を date にする。
＜ソース＞
<input type="date">＜ブラウザの表示＞
number（ブラウザ環境あり）
数字のみを入力できる
input タグで type 属性を使い、値を number にする。
＜ソース＞
<input type="number">＜ブラウザの表示＞
range（ブラウザ環境あり）
スライダーを表示させることができる
input タグで type 属性を使い、値を range にする。
＜ソース＞
<input type="range">＜ブラウザの表示＞
disabled
フォーム部品の無効化
無効化したいフォーム部品に disabled 属性を使う。
＜ソース＞
<input type="button" value="押せない" disabled>＜ブラウザの表示＞
form
入力されたデータを別のプログラムへ送る
別のプログラムに送りたいフォーム部品を form タグで囲い、送り先に action 属性/値にファイル名を指定する。送り方をどうするかは method 属性を使う。
＜ソース＞
<form action="iogin.php" method="post">
ユーザーネーム <input type="text" name="username">
パスワード <input type="password" name="password">
<button>ログイン</botton>
</form>＜ブラウザの表示＞
※この辺りは PHP の学習をお勧めします。
コメント