HTML/CSS WEB チェックボックス

【HTML /CSS】 お問い合わせやアンケートフォームなどのチェックボックスの作り方を紹介

こんにちはNAOです。

 

今回はお問い合わせフォームやアンケートフォームを作る時や顧客に選択してもらうときに必要なチェックボックスフォームのオリジナルの作り方を紹介したいと思います。

 

いろんなアンケート情報などの取得のため選択式のお問い合わせフォームなどが多岐にわたっていますのでその一部の作り方を理解すると様々なチェックボックスフォームが作成できるようになります。

 

【まずはlabelで囲んで基本のコードを書いてみます】

 

 

 

このコードですと下記のように複数選択ができる仕様になります。ですがこれだけだと説明がないので何を選択なのかわかりませんので見出しも加えておきましょう。

 

 

【チェックボックスをグループ化するfieldsetを書いてみます】

 

 

チェックボックスの部品をグループ化するタグのfieldsetで囲んでいきます。説明書きはlegendタグで書いておきます。CSSでは設定していないのでここから簡単な調整はしてみてください。※複数選択の場合はこのままでいいですが一つのみの場合はコードが変わってきますので書き換えていきます。

 

 

 

【チェックボックスを一つしか選択できないように変更します】

 

 

題名はあなたのやってみたいものを1つ選択に書き換えておきましょう。1つだけチェックですのでcheckboxをradioに書き換えていきますがそれだけでは複数選択のままですのでname属性studyを追記しておきます。

 

 

 

このようにチェックボックスを理解しているとどんなアンケートやお問い合わせでも使えますね。皆さん頑張っていきましょう!

ありがとうございましたー。

ビジネスにもブログにも使いやすいWordPressテーマ

「WING(AFFINGER5)」

SEOや収益化に効果的な機能が豊富

記事ごとにAMP化を選択可能

簡単に設置出来るランキング機能をはじめとしたアフィリエイトを始めやすい設計

お得にご購入はコチラ

  • この記事を書いた人
NAO

NAO

NAOです。 DTPデザイナー、ワードプレスを愛するWEBデザイナー// 世の中のお得な情報、DTP、WEB、ブログに関して発信してまいります。 「使用ソフト」Illustrator Photoshop DreamWEAVER「使用プログラミング」HTML/CSS/ワードプレス/Jquery/PHP 「企業実績」販売促進に関係するアイテム作成 実績多数 「個人実績」 ココナラ 名刺作成・ロゴ作成 400件以上 広告 50件以上 販売実績

-HTML/CSS, WEB, チェックボックス

© 2022 TSUTAERU BLOG