HTML:ラジオボタンの実装方法、完全ガイド。WWWクリエイターズHTMLタグ辞典CSSリファレンスGitコマンド開発ブログ開発ブログGit、CSS、HTML、正規表現など、入門者がつまづきそうなポイントを中心に、役立ち情報発信します。開発ブログ›HTML›HTML:ラジオボタンの実装方法、完全ガイド。HTML:ラジオボタンの実装方法、完全ガイド。JoeHTMLを使って、ラジオボタンを実装する方法の解説です。HTMLのフォームを使って、実際にデータを送信する所までやってみます。many)するためのGUIコンポーネントです。ラジオボタンの例:一方で、チェックボックスと役割が似て言いますが、チェックボックスは、「複数の中から、1つ以上選ぶか、なにも選ばない」と言う目的で利用する事が意図されています。チェックボックスの例:これらは、いずれも、通常は「フォーム」と呼ばれる、ユーザによる選択・入力情報を、サーバー上の特定のアドレスに送信を行うための機能の一部として利用されます。ラジオボタンの名前の由来?少し昔は、いわゆる「ラジオ」や「ラジカセ」というデバイスがまだ家庭にありました。その頃の、ラジカセのボタンは「複数ボタンがあっても、構造上、絶対に1つしか押せない」という仕組みで作られていました。当時はまだラジオボタンがイメージしやすかったですが、きっと現代に生まれた若者には全くピンとこない事でしょう。ラジオボタンラジオボタンの基本的な実装まずは、ラジオボタンを含むフォームのソースコードの基本サンプルからです。わかりやすさのため、HTML内にコメントを付けています。value="プロポーズする"></form>コード自体はシンプルで、一度覚えてしまえば、以外に簡単なはずです。[参考])上記のコードだけでは、このような粗野な状態に実装されます。CodePen.0form要素とinput要素に指定した属性を詳しく見ていきます。他にも幾つかform専用の属性が存在しますが、一般的なフォームで利用するのは下記の2つでしょう。フォームから送信するHTTPリクエストの種類です。通常は「POST」で送信するする事が多いですが、目的によっては「GET」でも構いません。フォームから送信する宛先のURLです。button要素や、input要素(submitタイプ)、formaction属性で上書きすることもできます。今回はラジオボタンですので、typeの値を「radio」とします。input要素はこのtype値によって、種々の機能をFormに与えることができます。フォーム内のinputのタイプを指定します。今回はラジオボタンなので「radio」と指定します。「submit」はフォームの内容をactionに書かれたメソッドで、送信するボタンの役割を果たします。同じグループに含むラジオボタンに、同じname文字列を割り振ります。同じグループ内では、それぞれのラジオボタン要素の選択は、排他的になります。あらゆるHTML要素共通の属性ですが、特に、ラジオボタンのfor属性と一致させることで、label要素をクリック可能にできます。このラジオボタンがチェックされたとき、送信される値です。labelのテキストでなく、このvalueの文字列が送信されることに注意します。このラジオボタンがチェックされているかどうかです。checked属性が存在するかどうかで、値は必要ありません。この属性が存在すると、ラジオボタンが無効化され、選択できなくなります。checked属性が記載があれば値は必要ありません。label要素の属性labelは主にinput要素の名前をテキストで表示するために利用するHTML要素です。labelには「どのinput要素に向けられたものなのか」を指定するfor属性があります。forで指定されたIDを持つinputがあれば、ラベル自体もクリック可能になります。for属性は、対応するinput要素とラベルを紐付けるために必要ですが、labelでinputを囲むことにより、for属性による指定はなくても、対応が関連づけられ、labelのクリックが可能になります。value="b">選択肢B</label>CSSでレイアウトを整えるさて、上述のラジオボタンフォームのレイアウトを、CSSを駆使して整えていきます。スタイリング例をご覧ください。追加するfieldsetはフォーム内の関連する要素群をグルーピングすることができます。必須ではありませんが、特定の意味でグループを形成することに役立ちます。同時にlegend要素を利用すれば、fieldsetの役割を記述することができます。各ブラウザはこのfieldsetとlegendの組み合わせのデフォルトスタイルを実装していますので、それを利用するのも悪くありません。HTML構造をセマンティックに記載できますので、検索エンジンがフォームの内容を正しく理解するのにも、幾分役立つと考えられます。要素のスタイリングより詳細な独自デザインのスタイルを適応したい場合は、あえて、fieldsetとlegendのHTML要素を用いないほうが良いでしょう。これらはCSSの仕様を越えたブラウザ独自実装によるスタイリングが施されているため、CSSによるコントロールが行いにくくなっています。関してブラウザごとの実装の違いによるスタイル調整の問題が指摘されています。https://stackoverflow.com/questions/29967730/how-to-get-cross-browser-form-fieldset-content-height-in-with-legendhttps://stackoverflow.com/questions/5339161/legend-tag-and-chromeその場合、通常通り、sectionや、divでグルーピングし、h1などの見出しタグが、スタイリングにおいては利用しやすいでしょう。囲み、階層化するスタイリングを行いやすくするため、ラジオボタンのinput要素を、labelで囲んでしまいました。これには、今回は下記のようなメリットがあります。labelにfor属性を振らなくても、ラベル文字列がクリック可能になる。labelとinput親子関係になるので、CSS上で、ネームスペース管理しやすい。submitタイプのボタンも、見た目を調整するため、-webkit-appearanceを指定しています。これは主にchromeやsafariなどのブラウザで有効です。3クラス名を割り振り、CSSでスタイリングするCSSでネームスペース(*)を確保するため、form要素にクラス名「who-to-marry」を割り振っています。下記のように、クラス名セレクタで限定することで、label、input要素のCSSから参照しやすくします。input[type=radio]と、属性のセレクタとして、利用していますが、単純にクラスを割り振っても構いません。}さて、いくつかのポイントを補足します。ブロック要素にして、縦並びにlabelは、デフォルトではインラインレベルの要素ですので、CSSで明示的にブロックにして、縦並びを実現します。スタイリングする際に、下記のプロパティを記述します。*/}「appearance」はいわゆるブラウザUI部品のOSデザインを適応するための独自プロパティです。MacOSであればMacOSの、WindowであればWindowsが実装したGUIの見た目が適応されることになります。これをいったんnoneにしてキャンセルしてやらないと、ブラウザが違ったときも意図通りのスタイリングが難しくなります。」はIEの対応が異なりますので、必要に応じて、テストしながら調整して下さい。Appearance[3-3]ラジオボタンを縦方向に揃えるフォントサイズを調整すると、ラジオボタンが縦方向にずれて見えてしまう事がよくあります。フォントは大きくなっても、ラジオボタン自体が拡大されないからです。これをCSSを使ってうまく縦方向の中央に寄せるには、ちょっとしたテクニックが必要です。デフォルトラジオボタンの縦の中央寄せデフォルトのラジオボタン要素の縦方向の中央揃えの方法をこちらで詳しく紹介しています。チェックボックス(ラジオボタン)を縦に中央揃えするHTMLとCSS[3-4]ラジオボタンに画像を適応する(こちらのセクションは、編集中です)jQueryでフォーム送信イベントを制御するsubmitタイプのボタンは、クリック時に「フォーム送信イベント」が発生し、ブラウザがこれを受け取ると、指定されたリクエストを送信します。このイベントを「横取り」することで、間に処理を挟んだり、もしくは、ブラウザに処理を受け渡さない用にすることもできます。下記にサンプル実装を添付します。ボタンを押すと、現在のフォームの状態をポップアップで表示します。要素から親要素にバブルアップしていきますので、これを横取りします。メソッドを利用するのが一般的です。(逆にこれを使わないと結構面倒です。イベントを渡さず、ここでバブルアップを停止する。false」を記載して、イベントを破棄します。これを記載すると、ブラウザはフォームデータを送信しません。不要であれば記載しないで下さい。特定の任意のイベントに紐付けてフォーム送信を、submitボタン以外からも実行する事ができます。$('.who-to-marry').submit();});jQueryでは、上記の例を知っておけば、フォーム周り基本的な実装は可能だと思います。加えて、チェックボックス版、記事です。HTML:チェックボックスの実装方法、徹底ガイド。おすすめの記事Chromeのキャッシュを「完全に」削除する方法、まとめ。Chrome(グーグルクローム)に保存されたキャッシュを完全に削除する方法をまとめました。Spreadsheet)で改行の方法のご紹介です。リモートブランチの最新に合わせようとしたら・・、あれ?コンフリクト・・?なにこれ、うまくいかない12018-07-13GitCSSで上下・左右に中央寄せする方法、全部まとめHTMLとCSSで、テキストや画像を縦方向(上下方向)に中央寄せ(センタリング)したい事があります。取り消し方法や、やり直し操作に関する方法をまとめました。どんなコミッ12018-07-15GitHTMLに関連する記事HTML入力フォームの作成、徹底ガイド(サンプル付)HTML5における、form要素を使ったWEB入力フォームの作成方法をまとめました。フォーム内部でGUIとなるinput12018-03-06HTMLHTML:文字を右寄せ・左寄せ・中央寄せする方法HTML上で、文字やHTML要素をを左寄せ、右寄せ、中央寄せする方法です。2018-11-21HTMLHTML:画像に文字を回り込ませる。CSS「float」の利用HTMLとCSSを使って、画像に文字を回り込ませる方法です。2018-03-07HTMLHTML:アンカー(aタグ)でページ内リンクを作成する方法HTMLのaタグを使ってアンカー要素でページ内リンクしたい時、正しい方法をたまに忘れるのでメモします。クリック後のスクロ12018-08-14HTMLHTML:textareaの拡大/縮小を禁止し、サイズを固定する方法HTMLにおいて、フォーム要素のテキストエリア(textarea)の領域の拡大、縮小などのリサイズを禁止したり、サイズ変12017-08-17HTMLHTML:チェックボックスの実装方法、徹底ガイド。HTMLを使って、チェックボックスを実装する方法です。VIMHTMLの記事HTML入力フォームの作成、徹底ガイド(サンプル付)2018-03-06HTML:文字を右寄せ・左寄せ・中央寄せする方法2018-11-21HTML:画像に文字を回り込ませる。CSS「float」の利用2018-03-07HTML:アンカー(aタグ)でページ内リンクを作成する方法2018-08-14HTML:textareaの拡大/縮小を禁止し、サイズを固定する方法2017-08-17HTML:チェックボックスの実装方法、徹底ガイド。2017-08-18おすすめの記事Chromeのキャッシュを「完全に」削除する方法、まとめ。隠しファイルを表示する方法。リセット方法2018-10-08「WWWクリエイターズ」は、より多くの人が開発とウェブを楽しむための目指したウェブサイトです。コマンドラインやgitなど、開発ビギナーのつまづきやすい部分を共有しています。})(jQuery);閉じる。