Pre populating interface popup box - html

Question

When I select the update function, I need the pop-up interface to gather the information on the Row that you are currently on in the sheet and fill in.
Then the user can change the information to update. but not the top 3 boxes. these would only view only.
please help.
I have tried changing the Html code but not getting the information from the row, the information I enter submits correctly.
I have researched this site and others but cannot find any information on getting this to populate the popup interface box.
function inputUpdates_() {
var html = doGet();
SpreadsheetApp.getUi().showModalDialog(html, 'Update Techicians Training Dates & Comments');
}
//Create a Data Entry Form
function doGet() {
var result = HtmlService
.createTemplateFromFile('Form')
.evaluate()
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
result.setHeight(600);
result.setWidth(500)
return result;
}
//The function retrieves the data from the return form and fills the spreadsheet
function getValuesFromForm(form){
var first_name = form.first_name,
last_name = form.last_name,
student_id = form.student_id,
training_date = form.training_date,
seam_sealer = form.seam_sealer,
filler_repair = form.filler_repair,
corrosion_protection = form.corrosion_protection,
body_filler_repair = form.body_filler_repair,
plasic_repair = form.plasic_repair,
bonding = form.bonding,
sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('List')
var lastRow = sheet.getLastRow();
sheet.getRange(lastRow + 1, 1).setValue(first_name);
sheet.getRange(lastRow + 1, 2).setValue(last_name);
sheet.getRange(lastRow + 1, 3).setValue(student_id);
sheet.getRange(lastRow + 1, 4).setValue(training_date);
sheet.getRange(lastRow + 1, 5).setValue(seam_sealer);
sheet.getRange(lastRow + 1, 6).setValue(filler_repair);
sheet.getRange(lastRow + 1, 7).setValue(corrosion_protection);
sheet.getRange(lastRow + 1, 8).setValue(body_filler_repair);
sheet.getRange(lastRow + 1, 9).setValue(plasic_repair);
sheet.getRange(lastRow + 1, 10).setValue(bonding);
}
<script type="text/javascript">
function formSubmit() {
google.script.run.getValuesFromForm(document.forms[0]);
google.script.host.close();
}
</script>
<style>
input.i01 {
margin-left: 84px;
}
input.i02 {
margin-left: 85px;
}
input.i03 {
margin-left: 81px;
}
input.i04 {
margin-left: 68px;
}
input.i05 {
margin-left: 73px;
}
input.i06 {
margin-left: 79px;
}
input.i07 {
margin-left: 12px;
}
input.i08 {
margin-left: 34px;
}
input.i09 {
margin-left: 75px;
}
input.i10 {
margin-left: 112px;
}
input.i11 {
margin-left: 170px;
}
<p><font face="verdana" color="green">
</style>
<!--Login Form -->
<div id="logindiv">
<form method="POST">
<label><p><font face="verdana" color="blue">First Name: </label>
<input class="i01" type="text" name="firstName"/>
<br/>
<br/>
<label>Last Name: </label>
<input class="i02" type="text" name="last_name" /><br/>
<br/>
<label>Student Id: </label>
<input class="i03" name="student_id" list="techid" type="text" />
<datalist id="techid">
<? var data = studentid(); ?>
<? for (var i = 0; i < data.length; i++) { ?>
<option value="<?= data[i]?>"></option>
<? } ?>
</datalist>
<br/>
<br/>
<label>Training Date: </label>
<input class="i04" type="date" name="training_date" /><br/>
<br/>
<label>Seam Sealer: </label>
<input class="i05" type="date" name="seam_sealer" /><br/>
<br/>
<label>Filler Repair: </label>
<input class="i06" type="date" name="filler_repair"/><br/>
<br/>
<label>Corrosion Protection: </label>
<input class="i07" type="date" name="corrosion_protection" /><br/>
<br/>
<label>Body Filler Repair: </label>
<input class="i08" type="date" name="body_filler_repair"/><br/>
<br/>
<label>Plasic Repair: </label>
<input class="i09" type="date" name="plasic_repair"/><br/>
<br/>
<label>Bonding: </label>
<input class="i10" type="date" name="bonding" /><br/>
<br/>
<br/>
<br/>
<input class="i11" onclick="formSubmit()" type="button" value="Submit" />
<input onclick="google.script.host.close()" type="button" value="Exit" />
<br/></font></p>
</form>