HTML | 曜日選択フォームパーツのサンプルコード
曜日を選択するHTMLフォームパーツのサンプルコードになります。
セレクトボックスタイプとラジオボタンタイプを紹介しています。
曜日選択フォームパーツ（セレクトボックスタイプ）
セレクトボックス（セレクトメニュー）で作成する曜日選択フォームのHTMLサンプルコードです。
name属性には「dow（Day of the weekの略語）」を指定しています。
セレクトボックスの曜日選択フォームでは「送信データも表示名も日本語表記」「送信データは英表記、表示は日本語表記」「送信データ、表示ともに英表記」の3タイプを紹介しています。
<!-- 送信データも表示名も日本語表記 -->
<p><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></p>
<!-- 送信データは英表記、表示は日本語表記 -->
<p><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></p>
<!-- 送信データ、表示ともに英表記 -->
<p><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></p>以下は上記フォームパーツのHTMLを実際に表示した例になります。
スタイル・デザインは変更を加えていないため、サイトの設定が反映されています。
曜日選択フォームパーツ（ラジオボタンタイプ）
ラジオボタンで作成する曜日選択フォームのHTMLサンプルコードです。
name属性には「dow（Day of the weekの略語）」を指定しています。
ラジオボタンの曜日選択フォームではCSSでのカスタマイズ性を考えて「lavelタグ」「lavelタグで囲ったタイプ」と、それぞれ「送信データも表示名も日本語表記」「送信データは英表記、表示は日本語表記」「送信データ、表示ともに英表記」の3タイプを紹介しています。
表示名が英語表記のものは日曜日（Sun）から始まっています。
<label>タグを利用したタイプ
<!-- 送信データも表示名も日本語表記 -->
<p>
<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>
</p>
<!-- 送信データは英表記、表示は日本語表記 -->
<p>
<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>
</p>
<!-- 送信データ、表示ともに英表記 -->
<p>
<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>
</p>以下は上記フォームパーツのHTMLを実際に表示した例になります。
スタイル・デザインは変更を加えていないため、サイトの設定が反映されています。
<label>タグで囲ったタイプ
<!-- 送信データも表示名も日本語表記 -->
<p>
<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>
</p>
<!-- 送信データは英表記、表示は日本語表記 -->
<p>
<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>
</p>
<!-- 送信データ、表示ともに英表記 -->
<p>
<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>以下は上記フォームパーツのHTMLを実際に表示した例になります。
スタイル・デザインは変更を加えていないため、サイトの設定が反映されています。