ラジオボタン

htmlにて選択ボタンを作成する場合には、チェックボックスやラジオボタンがありますが、今回はラジオボタンの作成方法の説明になります。 チェックボックスは通常複数選択可能な場合に使用しますが、ラジオボタンはどれか１つを選択したいような時に使用します。 (adsbygoogle = window.adsbygoogle || []).push({}); 目次 １．基本パターン ２．文字列クリックでも反応させる方法 ３．初期選択しておく方法 ４．どれか1つを必ず選択させる方法 １．基本パターン ラジオボタンの作成例としては以下のようになります。 <input type="radio" name="c…

どうも！LSSです！！ かなり前に、 little-strange.hatenablog.com という記事を出し、その後も何度かそれに似たものを出していました。 これはチェックボックスを使用した、単一のメニューの開閉を実現するものでしたが、今回はラジオボタンを使用して「複数のうちからひとつを開く」開閉メニューを作ってみました。 ラジオボタンによる開閉サンプル コード 使い方 あとがき ラジオボタンによる開閉サンプル .rdd input{display:none;} .rdd label,.rdds{display:block;} .rdds{ width:300px;height:35px…

どうも！LSSです！！ JavaScriptを使わず、CSSだけで動作するフォトギャラリーを作ってみました。 CSSで作るフォトギャラリー コード 使い方 あとがき CSSで作るフォトギャラリー .cglry{ display:grid; /*gridレイアウト*/ grid-template:repeat(8,1fr)/1fr 6fr 1fr; /*縦8行に分割／横1:6:1の比で3列に分割*/ gap:5px; /*各グリッドの間に5pxの隙間*/ } .cglry input{display:none;} /*ラジオボタン非表示*/ .cglry label{grid-column:1/…

今回は、HTMLのフォームタグを復習したので見返して使えるように簡単な備忘録として残します。 色々なフォーム部品がある。 フォームタグ 1行テキストのフォーム <input type="text"> <input type="text", value="hello"> # value属性で初期値を入れておける。画像の左から2番目 パスワードのフォーム <input type="password"> # 画像の左から3番目 複数行テキストのフォーム <textarea name="テスト">ああああ※初期値はここに入力する</textarea> # 画像の一番右 入力例を入れておきたい場合 記入…

CakePHPのラジオボタンですが、ヘルパーで設置すると縦並びになって、個人的に非常に嫌でした。そこでこのラジオボタンを横並びにする方法を説明していきます。結論から言うと、自分でCSSを書くのが一番手っ取り早いです。自分でdisplay: flex;などして、上書きしてしまう方法です。もともとのコードをいじるとなると、かなり細かい作業になってしまうので、オススメしません。 元々のかんじ 書き換えたビューテンプレート CSSを読み込む CSSを書く 終わりに 【自分の環境】macOS Catalina PHP7.4.2 CakePHP3.8 MAMP5.7 Apache2.2 MySQL5.7 …

今回は、GUI部品（ラベル、テキストボックス、チェックボックス、ラジオボタン）を表示してみます。 Python(tkinter)は少し自分の知っているものとしくみが異なるようで、ラベルなどを生成する関数にウィンドウ（フレーム）を渡すことで、その渡したウィンドウ（フレーム）に表示されます。 自分が知っている言語では、ラベルなどのオブジェクトを作成、ウィンドウ（ラベル）に追加する流れで部品が表示されました。 そんなライブラリですので、少し関数を組んで部品を追加表示するようにしてみました。 # -*- coding: utf-8 -*- # 日本語コメントをエラーとしないように、UTF-8で保存 #…

どうも！LSSです！！ だいぶ前の記事になりますが というのを書いていました。 HTMLのフォームパーツであるチェックボックスを非表示で用意し、「チェックボックスの状態からCSSで分岐できる」というのを利用したものですね。 実際のところ、CSSでユーザー操作によるオン／オフ切り替えは、この「チェックが入ってるか否か」ぐらいしか方法がないようです。 ですが、「HTMLのフォームパーツ」で「チェック状態にできる」ものとしては、チェックボックスの他に「ラジオボタン」があります。 ラジオボタンってのは、 こんな風に、「いくつかの選択肢から一つを選んで、ひとつだけ有効になる」というパーツですね。 今回は…