画像の代わりにラジオボタンとチェックボックスの使用

画像の代わりにチェックボックスとラジオボタンを使用する必要が"作ることができない、CSSを経由して、フォームの要素は単にチェックボックス、ラジオボタン、選択ボックスなどの困難な様式化された要素になっている、という事実に起因してフラット"スタイルシートを介して、そのためには、この欠陥の美学を補うために、いくつかのトリックに頼る必要があります。

チェックボックスとラジオボタンのイメージ

他の二つは大切なチェックボックスとラジオを表しながら、お気に入りのグラフィックスプログラムを使用して、4つのイメージを作成し、二人は、チェックボックスが評価されていないと、ラジオを大切にされていない表します。

私の私は、古き良きMSペイント、以下の画像（およびそれらのファイル名）で作成されたグラフィックであるはずで。

	checkbox_pieno.jpg
	checkbox_vuoto.jpg
	radio_pieno.jpg
	radio_vuoto.jpg

私たちのワークブックに保存します。

HTMLのフォーム

ブック内で、HTMLファイルとcorrediamolo次のコードを作成します。

 <form name="modulo">







の<p> SEX </ B> </ P>







 <input type="hidden" name="sesso">







 <P>







 <img src="radio_vuoto.jpg" id="sesso_U" onclick="Sesso('U','D')" align="absmiddle">マン







 <img src="radio_vuoto.jpg" id="sesso_D" onclick="Sesso('D','U')" align="absmiddle">女性







 </ P>







ホビー<P> </ B> </ P>







 <input type="hidden" name="hobby">







 <P>







 <img src="checkbox_vuoto.jpg" id="hobby_C" onclick="Hobby('C')" align="absmiddle">シネマ







 <img src="checkbox_vuoto.jpg" id="hobby_L" onclick="Hobby('L')" align="absmiddle">読書







 <img src="checkbox_vuoto.jpg" id="hobby_S" onclick="Hobby('S')" align="absmiddle">スポーツ







 </ P>







 <input type="button" VALUE=" OK "onclick="Conferma()">







 </フォーム>

を通過してみましょう。

空のフィールドを表す初期画像を設定し、代わりにフォームの伝統的な要素のチェックボックスとラジオボタンの画像をインポートし、定期的に<FORM>（およびクローズ）がオープン。

各グループのために我々は等しいと接頭辞（たとえば）オプションの初期の説明と代表的な接頭辞を持つIDを渡します。

画像はまた、onclickイベントがありますが、それはラジオボタンやチェックボックスだかに応じて、2つまたは1つのパラメータの関数参照を割り当てることになります。

チェックボックスの場合には、唯一のオプションの値が、ラジオボタンの場合は、最初のパスの値として服用してはいけません値を渡します。

一言で言えば、JavaScript関数を解析することによって、これらは明確な理由です。

最後に、我々の通過値または値を格納するために行くために、隠しフィールド（非表示の型）を使用して"画像/フィールドを。"

フォームの外観は次のようになります。

進んでください。

• <<
• 1
• 2
• >>