こんにちはrey( @reydesign8376) です
チェックボックス、ラジオボタンの作り方をサクサクっとしたためて参ります
では早速〜
チェックボックス、ラジオボタンの要素
チェックボックス、ラジオボタンの要素はinput要素になります。
inputとは送信フォームによく使うタグになります
inputにはtype属性と言われるものがあり
<input type=”type属性名”>を入力すると記述した属性の機能を追加することができます。
チェックボックス
<input type=”checkbox”>
こんな↓
海 パラソル イルカ<input type=”checkbox”>は複数の選択肢のうち何個でも選択ができるボタンになります。
チェックボックスは複数選択させたいアンケートや質問などに向いています。
heckboxは選択ボタンの表示
name=” “をつけることでグループ化になります
そのグループの中で複数選択ができるということになります。
value=” “は送信される選択肢の名前になります
checkedは最初からチェックをつけていたい場合のタグになります
これはつけていてもいなくても問題ないです
html
<input type=”Checkbox” name=”sea” value=”海” checked>海
<input type=”Checkbox” name=”sea” value=”パラソル”>パラソル
<input type=”Checkbox” name=”sea” value=”イルカ”>イルカ
ラジオボタン
<input type=”radio”>
こんな↓
海 パラソル イルカ<input type=”radio”>は複数の選択肢のうち1つだけに選択ができるボタンになります。
チェックボックスとの使い分けポイントになります。
radioは選択ボタンの表示
name=” “をつけることでグループ化になります
そのグループの中で1つだけ選択ができるということが可能になりま
value=” “は送信される選択肢の名前になります
checkedは最初からチェックをつけていたい場合のタグになります
これはつけていてもいなくても問題ないです
html
<input type=”radio” name=”wave” value=”海” checked>海
<input type=”radio” name=”wave” value=”パラソル”>パラソル
<input type=”radio” name=”wave” value=”イルカ”>イルカ
他のtype属性の種類
<input type=”text”>
こんな↓
<input type=”text”>はテキスト入力ができるエリアになります。
テキストエリア内に文字を入れる場合
placeholder=””
ダブルコーテーションの中に自由に入力します。
html
<input type=”text” placeholder=”ここにテキスト入力するよん”>
<input type=”submit”>
こんな↓
最後に<input type=”submit”>をご紹介
フォームに入力した内容を送信するパーツになります。
ボタン名は用途によって変更します
例えば検索であれば「検索」、会員登録なら「登録など」
実際にデータを受送信するにはPHPなどを使う必要があります。ここではhtmlの書き方だけを備忘録しております。
submitはボタンの表示
name=” “はボタンの名前
value=” “はボタンに表示されるテキストになります。
つけない場合デフォルトの「送信」になります。
html
<input type=”submit” value=”送信するよん”>
以上になります！
本日も忘れずにコーディングしていきます！
コメント