HTML | 曜日選択フォームのサンプルコード
曜日を選択するフォームのセレクトメニューボックスとラジオボタンタイプのHTMLサンプルコードになります。
See the Pen CSS | Table width 100% and margin by yochans (@yochans) on CodePen.
曜日選択フォームサンプル
セレクトボックスタイプ
セレクトボックス（セレクトメニュー）で作成する曜日選択フォームのHTMLサンプルコードです。
name属性には「dow（Day of the weekの略語）」を指定しています。
セレクトボックスの曜日選択フォームでは「送信データも表示名も日本語表記」「送信データは英表記、表示は日本語表記」「送信データ、表示ともに英表記」の3タイプを紹介しています。
// 送信データも表示名も日本語表記
<select name="dow">
<option value="月曜日">月曜日</option>
<option value="火曜日">火曜日</option>
<option value="水曜日">水曜日</option>
<option value="木曜日">木曜日</option>
<option value="金曜日">金曜日</option>
<option value="土曜日">土曜日</option>
<option value="日曜日">日曜日</option>
</select>
// 送信データは英表記、表示は日本語表記
<select name="dow">
<option value="mon">月曜日</option>
<option value="tue">火曜日</option>
<option value="wed">水曜日</option>
<option value="thu">木曜日</option>
<option value="fri">金曜日</option>
<option value="sat">土曜日</option>
<option value="sun">日曜日</option>
</select>
// 送信データ、表示ともに英表記
<select name="dow">
<option value="mon">mon</option>
<option value="tue">tue</option>
<option value="wed">wed</option>
<option value="thu">thu</option>
<option value="fri">fri</option>
<option value="sat">sat</option>
<option value="sun">sun</option>
</select>ラジオボタンタイプ
ラジオボタンで作成する曜日選択フォームのHTMLサンプルコードです。
name属性には「dow（Day of the weekの略語）」を指定しています。
ラジオボタンの曜日選択フォームではCSSでのカスタマイズ性を考えて「lavelタグ」「lavelタグで囲ったタイプ」と、それぞれ「送信データも表示名も日本語表記」「送信データは英表記、表示は日本語表記」「送信データ、表示ともに英表記」の3タイプを紹介しています。
表示名が英語表記のものは日曜日（Sun）から始まっています。
labelタグタイプ
<!-- 送信データも表示名も日本語表記 -->
<input type="radio" name="dow" id="mon" "value="月曜日"><label for="mon">月曜日</label>
<input type="radio" name="dow" id="tue" "value="火曜日"><label for="tue">火曜日</label>
<input type="radio" name="dow" id="wed" "value="水曜日"><label for="wed">水曜日</label>
<input type="radio" name="dow" id="thu" "value="木曜日"><label for="thu">木曜日</label>
<input type="radio" name="dow" id="fri" "value="金曜日"><label for="fri">金曜日</label>
<input type="radio" name="dow" id="sat" "value="土曜日"><label for="sat">土曜日</label>
<input type="radio" name="dow" id="sun" "value="日曜日"><label for="sun">日曜日</label>
<!-- 送信データは英表記、表示は日本語表記 -->
<input type="radio" name="dow" id="mon" value="mon"><label for="mon">月曜日</label>
<input type="radio" name="dow" id="tue" value="tue"><label for="tue">火曜日</label>
<input type="radio" name="dow" id="wed" value="wed"><label for="wed">水曜日</label>
<input type="radio" name="dow" id="thu" value="thu"><label for="thu">木曜日</label>
<input type="radio" name="dow" id="fri" value="fri"><label for="fri">金曜日</label>
<input type="radio" name="dow" id="sat" value="sat"><label for="sat">土曜日</label>
<input type="radio" name="dow" id="sun" value="sun"><label for="sun">日曜日</label>
<!-- 送信データ、表示ともに英表記 -->
<input type="radio" name="dow" id="sun" value="sun"><label for="sun">sun</label>
<input type="radio" name="dow" id="mon" value="mon"><label for="mon">mon</label>
<input type="radio" name="dow" id="tue" value="tue"><label for="tue">tue</label>
<input type="radio" name="dow" id="wed" value="wed"><label for="wed">wed</label>
<input type="radio" name="dow" id="thu" value="thu"><label for="thu">thu</label>
<input type="radio" name="dow" id="fri" value="fri"><label for="fri">fri</label>
<input type="radio" name="dow" id="sat" value="sat"><label for="sat">sat</label>labelタグで囲ったタイプ
<!-- 送信データも表示名も日本語表記 -->
<label><input type="radio" name="dow" "value="月曜日">月曜日</label>
<label><input type="radio" name="dow" "value="火曜日">火曜日</label>
<label><input type="radio" name="dow" "value="水曜日">水曜日</label>
<label><input type="radio" name="dow" "value="木曜日">木曜日</label>
<label><input type="radio" name="dow" "value="金曜日">金曜日</label>
<label><input type="radio" name="dow" "value="土曜日">土曜日</label>
<label><input type="radio" name="dow" "value="日曜日">日曜日</label>
<!-- 送信データは英表記、表示は日本語表記 -->
<label><input type="radio" name="dow" value="mon">月曜日</label>
<label><input type="radio" name="dow" value="tue">火曜日</label>
<label><input type="radio" name="dow" value="wed">水曜日</label>
<label><input type="radio" name="dow" value="thu">木曜日</label>
<label><input type="radio" name="dow" value="fri">金曜日</label>
<label><input type="radio" name="dow" value="sat">土曜日</label>
<label><input type="radio" name="dow" value="sun">日曜日</label>
<!-- 送信データ、表示ともに英表記 -->
<label><input type="radio" name="dow" value="sun">sun</label>
<label><input type="radio" name="dow" value="mon">mon</label>
<label><input type="radio" name="dow" value="tue">tue</label>
<label><input type="radio" name="dow" value="wed">wed</label>
<label><input type="radio" name="dow" value="thu">thu</label>
<label><input type="radio" name="dow" value="fri">fri</label>
<label><input type="radio" name="dow" value="sat">sat</label>pタグで囲ったタイプ
<!-- 送信データも表示名も日本語表記 -->
<p><input type="radio" name="dow" value="月曜日">月曜日</p>
<p><input type="radio" name="dow" value="火曜日">火曜日</p>
<p><input type="radio" name="dow" value="水曜日">水曜日</p>
<p><input type="radio" name="dow" value="木曜日">木曜日</p>
<p><input type="radio" name="dow" value="金曜日">金曜日</p>
<p><input type="radio" name="dow" value="土曜日">土曜日</p>
<p><input type="radio" name="dow" value="日曜日">日曜日</p>
<!-- 送信データは英表記、表示は日本語表記 -->
<p><input type="radio" name="dow" value="mon">月曜日</p>
<p><input type="radio" name="dow" value="tue">火曜日</p>
<p><input type="radio" name="dow" value="wed">水曜日</p>
<p><input type="radio" name="dow" value="thu">木曜日</p>
<p><input type="radio" name="dow" value="fri">金曜日</p>
<p><input type="radio" name="dow" value="sat">土曜日</p>
<p><input type="radio" name="dow" value="sun">日曜日</p>
<!-- 送信データ、表示ともに英表記 -->
<p><input type="radio" name="dow" value="sun">sun</p>
<p><input type="radio" name="dow" value="mon">mon</p>
<p><input type="radio" name="dow" value="tue">tue</p>
<p><input type="radio" name="dow" value="wed">wed</p>
<p><input type="radio" name="dow" value="thu">thu</p>
<p><input type="radio" name="dow" value="fri">fri</p>
<p><input type="radio" name="dow" value="sat">sat</p>