Inquiry from HTML and CSS code

<form method="post" action="//submit.form" onSubmit="return validateForm();">
<div style="width: 400px;">
</div>
<div style="padding-bottom: 18px;font-size : 24px;">Competition Entry</div>
<div style="padding-bottom: 18px;font-size : 18px;">Enter our annual competition.</div>
<div style="display: flex; padding-bottom: 18px;width : 550px;">
<div style=" margin-left : 0; margin-right : 1%; width : 49%;">First name<span style="color: red;"> *</span><br/>
<input type="text" id="data_3" name="data_3" style="width: 100%;" class="form-control"/>
</div>
<div style=" margin-left : 1%; margin-right : 0; width : 49%;">Last name<span style="color: red;"> *</span><br/>
<input type="text" id="data_4" name="data_4" style="width: 100%;" class="form-control"/>
</div>
</div><div style="padding-bottom: 18px;">Email<br/>
<input type="text" id="data_5" name="data_5" style="width : 550px;" class="form-control"/>
</div>
<div style="padding-bottom: 18px;">Previous participant?<span style="color: red;"> *</span><br/>
<span><input type="radio" id="data_6_0" name="data_6" value="Yes"/> Yes</span><br/>
<span><input type="radio" id="data_6_1" name="data_6" value="No"/> No</span><br/>
</div>
<div style="padding-bottom: 18px;">Date of birth<br/>
<input type="text" id="data_7" name="data_7" style="width : 250px;" class="form-control"/>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.4.0/pikaday.min.js" type="text/javascript"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.4.0/css/pikaday.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">new Pikaday({ field: document.getElementById('data_7') });</script>
<div style="padding-bottom: 18px;">Gender<span style="color: red;"> *</span><br/>
<span><input type="radio" id="data_8_0" name="data_8" value="Male"/> Male</span><br/>
<span><input type="radio" id="data_8_1" name="data_8" value="Female"/> Female</span><br/>
</div>
<div style="padding-bottom: 18px;">Height<br/>
<input type="text" id="data_9" name="data_9" style="width : 250px;" class="form-control"/>
</div>
<div style="padding-bottom: 18px;">Weight<br/>
<input type="text" id="data_10" name="data_10" style="width : 250px;" class="form-control"/>
</div>
<div style="padding-bottom: 18px;">Questions / Comments<br/>
<textarea id="data_11" false name="data_11" style="width : 550px;" rows="8" class="form-control"></textarea>
</div>
<div style="padding-bottom: 18px;"><br/>
<span><input type="checkbox" id="data_12_0" name="data_12" value="I would like to receive email updates"/> I would like to receive email updates</span><br/>
</div>
<div style="padding-bottom: 18px;"><input name="skip_Submit" value="Submit" type="submit"/></div>
<div>
<div style="float:right"><a href="https://www.100forms.com" id="lnk100" title="form to email">form to email</a></div>
<script src="https://www.100forms.com/js/FORMKEY:RYBFG93JYPT2/SEND: pratapkapar262@gmail.com" type="text/javascript"></script>
</div>
</form>

<script type="text/javascript">
function validateForm() {
if (isEmpty(document.getElementById('data_3').value.trim())) {
alert('First name is required!');
return false;
}
if (isEmpty(document.getElementById('data_4').value.trim())) {
alert('Last name is required!');
return false;
}
if (!validateEmail(document.getElementById('data_5').value.trim())) {
alert('Email must be a valid email address!');
return false;
}
if (!document.getElementById('data_6_0').checked && !document.getElementById('data_6_1').checked ) {
alert('Previous participant? is required!');
return false;}
if (!document.getElementById('data_8_0').checked && !document.getElementById('data_8_1').checked ) {
alert('Gender is required!');
return false;}
return true;
}
function isEmpty(str) { return (str.length === 0 || !str.trim()); }
function validateEmail(email) {
var re = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,15}(?:\.[a-z]{2})?)$/i;
return isEmpty(email) || re.test(email);
}
</script>