Może coś takiego, do wykorzystania, do inspiracji. Jak coś można zrobić lepiej z tym kodem proszę o uwagi (człowiek całe życie się uczy ). Demo on-line.
Wysyłanie (submit), już chyba sam sobie potrafisz zrobić. (ajax, żeby nie "przeładowywać" strony)
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<style>
fieldset {
display: inline-block;
margin: 0px;
padding: 10px 5px 10px 15px;
background-color: lightgray;
width: 200px;
height: 40px;
border-radius: 10px;
float: left;
border-color: darkgray;
user-select: none;
}
fieldset span {
margin-left: 10px;
}
legend {
background-color: gray;
border: 1px solid darkgray;
color: white;
padding: 1px 10px;
border-radius: 10px;
font-weight: bold;
}
.dioda {
height: 20px;
width: 20px;
background-color: gray;
border-radius: 50%;
display: inline-block;
background: radial-gradient(circle, white, gray);
margin-left: 5px;
}
.dioda_off {
background: radial-gradient(circle, white, red);
box-shadow: 0px 0px 6px 2px orangered;
border: 1px solid firebrick;
}
.dioda_on {
background: radial-gradient(circle, white, green);
box-shadow: 0px 0px 6px 2px limegreen;
border: 1px solid darkgreen;
}
.switch_ {
height: 20px;
width: 30px;
background-color: gray;
border-radius: 10%;
display: inline-block;
border: 1px solid gray;
cursor: pointer;
}
.switch_off {
background: linear-gradient(to right, white, ghostwhite, lightgray, gray, darkgray);
box-shadow: 2px 2px 4px black;
}
.switch_on {
background: linear-gradient(to left, white, ghostwhite, lightgray, gray, darkgray);
box-shadow: -2px 2px 4px black;
}
span input {
display:inline-block;
}
input[type=submit] {
background-color: gray;
border: 1px solid darkgray;
border-radius: 10px;
color: white;
font-family: Verdana,sans-serif;
font-weight: bold;
font-size: 12px;
font-variant: small-caps;
cursor: pointer;
text-align: center;
padding: 1px 7px;
margin-left: 50px;
outline: none;
}
</style>
<script>
$(document).ready(function() {
$("#switch_").click(function() {
$("#dioda").toggleClass('dioda_on', 'dioda_off');
$("#switch_").toggleClass('switch_on', 'switch_off');
if ($("#webdata_Q7").val() == "0") {
$("#webdata_Q7").val("1");
} else {
$("#webdata_Q7").val("0");
}
});
});
</script>
<body>
<form action="twoj_skrypt_na_serwerze">
<fieldset>
<legend>"webdata".Q7</legend>
<span id="dioda" class="dioda dioda_off"></span>
<span id="switch_" class="switch_ switch_off"></span>
<input type="hidden" id="webdata_Q7" name=' "webdata".Q7' value="0">
<span><input type="submit" value="Ustaw"></span>
</fieldset>
</form>
</body>
</html>