106 lines
2.3 KiB
HTML
106 lines
2.3 KiB
HTML
<head>
|
|
<script>
|
|
const toggleCheckboxes = document.querySelectorAll('input[type="checkbox"]');
|
|
|
|
toggleCheckboxes.forEach(checkbox => {
|
|
checkbox.addEventListener('change', function() {
|
|
const target = document.getElementById(this.id.replace('toggle', ''));
|
|
const label = target.previousElementSibling;
|
|
label.style.visibility = this.checked ? 'visible' : 'hidden';
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
h1 {
|
|
border: 2px #eee solid;
|
|
color: brown;
|
|
text-align: center;
|
|
padding: 10px;
|
|
}
|
|
|
|
html, body {
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: #ADD8E6; /* Light blue color */
|
|
}
|
|
|
|
form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
background-color: white;
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
box-shadow: 0 0 10px gray;
|
|
}
|
|
|
|
input[type="text"] {
|
|
width: 50%;
|
|
padding: 10px;
|
|
margin: 10px 0;
|
|
font-size: 16px;
|
|
background-color: lightgray;
|
|
border: none;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
input[type="submit"] {
|
|
padding: 10px 20px;
|
|
font-size: 16px;
|
|
background-color: lightblue;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.red-border {
|
|
border: 2px solid red;
|
|
display: inline-block;
|
|
padding: 5px;
|
|
border-radius: 5px;
|
|
visibility: hidden;
|
|
}
|
|
|
|
button.toggle-border {
|
|
padding: 5px 10px;
|
|
font-size: 14px;
|
|
background-color: lightgray;
|
|
border: none;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
|
|
|
|
</style>
|
|
</head>
|
|
|
|
<form action="" method="post">
|
|
<div>
|
|
<input type="checkbox" id="first_game_toggle">
|
|
<label for="first_game_toggle">I don't like this game</label>
|
|
<label for="first_game" class="red-border">First game:</label>
|
|
<input type="text" id="first_game" name="first_game">
|
|
</div>
|
|
<div>
|
|
<input type="checkbox" id="second_game_toggle">
|
|
<label for="second_game_toggle">I don't like this game</label>
|
|
<label for="second_game" class="red-border">Second game:</label>
|
|
<input type="text" id="second_game" name="second_game">
|
|
</div>
|
|
<div>
|
|
<input type="checkbox" id="third_game_toggle">
|
|
<label for="third_game_toggle">I don't like this game</label>
|
|
<label for="third_game" class="red-border">Second game:</label>
|
|
<input type="text" id="third_game" name="third_game">
|
|
</div>
|
|
<input type="submit" value="Submit">
|
|
</form>
|
|
|