HTML | 曜日選択フォームパーツのサンプルコード

2023-10-07HTML フォーム,HTML

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を実際に表示した例になります。
スタイル・デザインは変更を加えていないため、サイトの設定が反映されています。