読者です 読者をやめる 読者になる 読者になる

未経験からWebエンジニアを目指す!!

日々学ぶ新しいことや発見をメモしていくブログです。

HTML: ラジオボタンとチェックボックス Radio button and Checkbox

アンケートやフォームに必要なラジオボタンチェックボックスを作成する。
input要素のtypeでradioを指定すると、ラジオボタンへ、checkboxを指定するとチェックボックスになる。nameは選択肢グループの共通のものを指定し、valueはサーバに送信する値を指定する。checkedはcheckedにしておけば、予め選択された状態になる。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>犬猫アンケート</title>
  </head>
  <body>
    <p>あなたの性別を教えてください。</p>
      <input type="radio" name="gender" value="otoko"><input type="radio" name="gender" value="onna"><input type="radio" name="gender" value="fumei" checked="checked">不明

    <p>あなたは犬派ですか?猫派ですか?</p>
      <input type="checkbox" name="animal" value="both" checked="checked">両方好き!
      <input type="checkbox" name="animal" value="dog" ><input type="checkbox" name="animal" value="cat" ></body>
</html>

●ブラウザでの見え方
f:id:web0ninja:20160717001514p:plain


HTML and CSS: Design and Build Websites

Icons made by Iconnice from www.flaticon.com is licensed by CC 3.0 BY