チェックボックス、ラジオボタンの作り方【コーディング 備忘録】

こんにちは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=”送信するよん”>

以上になります!
本日も忘れずにコーディングしていきます!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA

目次