When using this code/css in the html form I created, the text is left aligned and looks as it should. When creating code to update this in php the form returns not properly aligned. I am assuming something in php is overwriting the CSS formatting. Any help would be appreciated.
<html>
<head>
<title>search</title>
<p style="text-align:center"><strong>Update Request</strong></p>
<style>
form[name=form3] {
/* Center the form on the page */
margin: 0 auto;
width: 700px;
/* Form outline */
padding: 1em;
border: 15px solid rgba(10, 48, 131, 0.863);
border-radius: 1em;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
form li + li {
margin-top: 1em;
}
label{
/* Uniform size & alignment */
display: inline-block;
width: 90px;
text-align: right;
font-weight:bold;
font-size: 18px;
}
label[name=ID1]{
/* Uniform size & alignment */
width: 90px;
text-align: right;
font-weight:bold;
font-size: 18px;
}
input,
textarea {
/* To make sure that all text fields have the same font settings
By default, textareas have a monospace font */
font: 14px sans-serif;
font-family: Arial, sans-serif;
/* Uniform text field size */
width: 300px;
box-sizing: border-box;
/* Match form field borders */
border: 1px solid #999;
}
input:focus,
textarea:focus {
/* Additional highlight for focused elements */
border-color: #000;
}
textarea {
/* Align multiline text fields with their labels */
vertical-align: top;
/* Provide space to type some text */
height: 20em;
width: 40em;
}
button {
/* This extra margin represent roughly the same space as the space
between the labels and their text fields */
margin-left: .5em;
}
input[type=checkbox]:checked + input[name=Packets1] {
visibility:visible;
}
input[type='number']{
width: 42px;
}
input[type='number']{
width: 42px;
}
p {
font-size: 25px;
}
input[name=ID]{
width: 40%;
height: 5%;
border-radius: 05px;;
margin: 10px 0px 15px 0px;
box-shadow: 1px 1px 2px 1px grey;
padding:8px 15px 8px 15px;
border: 1px;
}
input[name=search]{
width: 40%;
height: 5%;
border-radius: 05px;;
margin: 10px 0px 15px 0px;
box-shadow: 1px 1px 2px 1px grey;
padding:8px 15px 8px 15px;
border: 1px;
}
input[type=checkbox] {
vertical-align: middle;
position: relative;
bottom: 1px;
}
</style>
</head>
<body>
<center>
<h1></h1>
<form action="" method="Post" id="form1" name="form1" style="background-color: #36a8f4">
<input type="text" name="ID" placeholder="Enter ID"/> <br>
<input type="submit" name="search" id="Search Data" class="p1"/>
</form>
<?php
$host="localhost";
$dbname="tracking";
$username="root";
$password="";
$conn= mysqli_connect($host, $username, $password, $dbname);
$db=mysqli_select_db($conn, 'tracking');
if(isset($_POST['search']))
{
$ID=$_POST["ID"];
$query="SELECT * FROM tracking where ID='$ID' ";
$query_run= mysqli_query($conn, $query);
while($row=mysqli_fetch_array($query_run))
{
?>
<form method="post" action="" name=form3 id=form3 onsubmit=required()>
<ul>
<li>
<input type="hidden" name="ID" value="<?php echo $row['ID'] ?>"/><br>
<?php echo "<B> Query ID:" .$row['ID']. "</b>" ?>
</li>
<li>
<label for="title">Title:</label>
<input type="text" id="title" name="Title" value= "<?php echo $row['Title'] ?>"><br>
</li>
<li>
<label for="analyst">Analyst:</label>
<input list="analysts" name="Analyst" id="analyst" value= "<?php echo $row['Analyst'] ?>"><br>
<datalist id="analysts">
</datalist>
</li>
<li>
<label for="agency">Agency:</label>
<input list="requesting agency" name="Agency" id="agency" value= "<?php echo $row['Agency'] ?>"><br>
<datalist id="requesting agency">
</datalist>
</li>
<li>
<label for="date">Date:</label>
<input type="date" name="Date" id="date" value= "<?php echo $row['Date'] ?>"><br>
</li>
<li>
<label for="requester">Requester:</label>
<input type="text" id="requester" name="Requester" value= "<?php echo $row['Requester'] ?>"><br>
</li>
<li>
<label for="firearm"> Firearm:</label>
<input type="checkbox" id="firearm" name="Firearm" style="margin:0;width:13px;height:13px;overflow:hidden;"> <br>
<label for="packets"> Packets:</label>
<input type="checkbox" style="margin:0;width:13px;height:13px;overflow:hidden;" name="Packets" id="packets" value= "<?php echo $row['Packets'] ?>">
<input type="number" name="Packets1" value= "<?php echo $row['Packets1'] ?>" /><br>
</li>
<li>
<label for="summary">Summary:</label>
<textarea id="summary" name="Summary"><?php echo $row['Summary']; ?></textarea>
</li>
<li class="button">
<input type="submit" name="update" value= 'Update' style="height:30px; width:60px" onsubmit=required(); ><br>
</li>
</ul>
</div>
<script>
function required()
{
valid = true;
if ( document.form3.Title.value == "" )
{
alert ( "Please fill in the 'Title' box." );
event.preventDefault();
valid = false;
}
if ( document.form3.Analyst.value == "" )
{
alert ( "Please fill in the 'Analyst' box." );
event.preventDefault();
valid = false;
}
if ( document.form3.Agency.value == "" )
{
alert ( "Please fill in the 'Agency' box." );
event.preventDefault();
valid = false;
}
if ( document.form3.Requester.value == "" )
{
alert ( "Please fill in the 'Requester' box." );
event.preventDefault();
valid = false;
}
return true;
}
</script>
</form>
<?php
}
}
?>
</center>
</body>
</html>
<?php
$host="localhost";
$dbname="tracking";
$username="root";
$password="";
$conn= mysqli_connect($host, $username, $password, $dbname);
if(isset($_POST['update']))
{
$Title= $_POST['Title'];
$Analyst= $_POST['Analyst'];
$Agency= $_POST['Agency'];
$Date= $_POST['Date'];
$Requester= $_POST['Requester'];
$Firearm= filter_input(INPUT_POST,"Firearm", FILTER_VALIDATE_BOOLEAN);
$Packets= filter_input(INPUT_POST,"Packets", FILTER_VALIDATE_BOOLEAN);
$Packets1= $_POST['Packets1'];
$Summary= $_POST['Summary'];
$query= "UPDATE tracking SET Title='$_POST[Title]', Analyst='$_POST[Analyst]', Agency='$_POST[Agency]',Date='$_POST[Date]',Requester='$_POST[Requester]',
Firearm='filter_input(INPUT_POST,Firearm, FILTER_VALIDATE_BOOLEAN)',Packets='filter_input(INPUT_POST,Packets, FILTER_VALIDATE_BOOLEAN)',
Packets1='$_POST[Packets1]',Summary='$_POST[Summary]' where ID='$_POST[ID]'";
$query_run= mysqli_query($conn, $query);
if($query_run)
{
echo '<script> alert("Entry Succesfully Updated") </script>';
}
else
{
echo '<script> alert("Error Updating Entry") </script>';
}
}
?>