How can I set static text in an input field? - html

Question

I have read many articles related to this topic but none of these articles proffer exact solution to what I am trying to achieve.
I'll like to make "COMPUTER SCIENCE" a static text in the input filed for "Department in the following code".
<table>
<tr>
<td><label for="Username">Username</label></td>
<td><input name="txtusername" type="text" id="txtusername" style="height:20px; width:208px" /></td>
</tr>
<tr>
<td><label for="Password">Password</label></td>
<td><input name="txtpassword" type="password" id="txtpassword" style="height:20px; width:208px" /></td>
</tr>
<tr>
<td><label for="Lastname">Lastname</label></td>
<td><input name="txtlastname" type="text" id="txtlastname" style="height:20px; width:208px" /></td>
</tr>
<tr>
<td><label for="Firstname">Firstname</label></td>
<td><input name="txtfirstname" type="text" id="txtfirstname" style="height:20px; width:208px" /></td>
</tr>
<tr>
<td><label for="Sex">Sex</label></td>
<td>
<select name="sex" class="form-control" required>
<option value=""> ----- </option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</td>
</tr>
<tr>
<td><label for="ContactNo">Contact No</label></td>
<td><input name="txtcontactno" type="text" id="txtcontactno" style="height:20px; width:208px" /></td>
</tr>
<tr>
<td><label for="MatricNo">Matric No</label></td>
<td><input name="txtmatricno" type="text" id="txtmatricno" style="height:20px; width:208px" /></td>
</tr>
<tr>
<td><label for="Programme">Programme</label></td>
<td><input name="txtprogramme" type="text" id="txtprogramme" style="height:20px; width:208px" /></td>
</tr>
<tr>
<td><label for="Department">Department</label></td>
<td> <input name="txtdept" type="text" id="txtdept" style="height:20px; width:208px" /></td>
</tr>
<tr>
<td><label for="CFaculty">Faculty</label></td>
<td><input name="txtfaculty" type="text" id="txtfaculty" style="height:20px; width:208px" /></td>
</tr>
<tr>
<td><label for="UploadPhoto">UploadPhoto</label></td>
<td><input type="file" name="image" /> </td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="add" value="Register" id="submit" />
<input type="submit" name="Reset" value="Cancel" id="Reset" />
</td>
</tr>
</table>
I want to achieve a result similar to the output in the attached picture:
Any suggestion or recommendation is greatly appreciated.

Answer 1

As already mentioned, disabling the input field would be the first step.
<tr>
<td><label for="Department">Department</label></td>
<td><input name="txtdept" type="text" id="txtdept" style="height:20px; width:208px" disabled/></td>
</tr>
If the value of the department needs to be static, you can just define it directly in the input field.
<td><input name="txtdept" type="text" id="txtdept" style="height:20px; width:208px" value="COMPUTER SCIENCE" disabled/></td>
In case the department would have a correlation with a value from an other input field, you could theoretically use JS with some If-Statements.
$(document).ready(function(){
var txtdept = document.getElementById("txtdept");
txtdept.value = "COMPUTER SCIENCE";
});

Answer 2

Not too sure what you mean by static text but you have two ways of doing what is in the image: you can either add placeholder="COMPUTER SCIENCE" the input
<input name="txtdept" type="text" id="txtdept" style="height:20px; width:208px" placeholder="COMPUTER SCIENCE" />
and/or add value="COMPUTER SCIENCE".
<input name="txtdept" type="text" id="txtdept" style="height:20px; width:208px" placeholder="COMPUTER SCIENCE" value="COMPUTER SCIENCE" />
The placeholder is meant to show when the input is empty. The value will just be the default value of the input and can be changed by the user. You can add disabled to the input if you don't want the user to change the content of the input.
<input name="txtdept" type="text" id="txtdept" style="height:20px; width:208px" value="COMPUTER SCIENCE" disabled/>