JSFiddle - React, Tailwind, and code Playground
HTML
<form action="" name="form" method="POST">
<div class="input">
<div class="left"><label for="fname">First Name</label></div>
<div class="right"><input type="text" id="fname" name="fname"></div>
</div>
<div class="input">
<div class="left"><label for="lname">Last Name</label></div>
<div class="right"><input type="text" id="lname" name="lname"></div>
</div>
<div class="input">
<div class="left"><label for="instance">Instance</label></div>
<div class="right"><input type="text" id="instance" name="instance"></div>
</div>
<div class="input">
<div class="left"> </div>
<div class="right"><label><input type="checkbox" name="TOS" value="true">Нажимая кнопку "Отправить", я принимаю <a href="">условия соглашения</a></label></div>
</div>
<div class="input">
<div class="left"> </div>
<div class="right">
<button type="submit" name="submit_btn">Send</button>
<button type="reset">Очистить</button>
</div>
</div>
</form>
CSS
.input {
clear: left;
line-height: 30px;
}
div.left {
float: left;
background: yellow;
width: 24%;
text-align: right;
padding-right: 0.5%;
/* border-right: 1px solid gray; */
border-bottom: 1px solid gray;
font-size: 12px;
}
.left label {
font-weight: bold;
font-family: sans-serif;
}
div.right {
float: left;
width: 74%;
padding-left: 1%;
border-bottom: 1px solid gray;
}
.right input[type="text"] {
width: 100%;
/* line-height: 30px; */
}
JavaScript
// Проверка перед отправкой формы.
// Если в браузере в консольке набрать form.submit(), то это событие игнорируется
var tos = document.forms[0].TOS;
document.forms[0].onsubmit = function(e) {
if (!tos.checked) {
e.preventDefault();
alert('U must agree our TOS!');
}
};
tos.onclick = function(e) {
if (tos.checked)
form.submit_btn.disabled = false;
else form.submit_btn.disabled = true;
};
// Это работать здесь не будет, да и не нужна она здесь
window.onload = function(e) {
if (!tos.checked) {
form.submit_btn.disabled = true;
}
};