I already make a form consist of two inputs (input text and input date) and a button. I design the form in Google Chrome.
Here it is :
After I finished the form, I'm trying to open the page in Mozilla Firefox Browser and I see that the date input is not date-formatted.
Like this : 
This is my code
<!DOCTYPE HTML><HTML>
<body>
<!--NAVIBAR-->
<div class="container">
<div class="row">
<div class="col-md-3 no-float"><br>
<img src="img/logo-pln-persero.png" style="height:150px; margin-top:-40px;" ><hr>
<p class="navbar-font-gold">
<?php
$tgl_hari_ini = date('D, d M Y ');
echo $tgl_hari_ini;
?>
</p>
<div role="navigation">
<div class="navbar-main-collapsed">
<ul class="nav li navbar-stacked">
<li>
<a class="page-scroll" href="home.php">
<p class="navbar-font">HOME</p>
</a>
</li>
<li>
<a class="page-scroll" href="home.php?cek=logout">
<p class="navbar-font">LOG OUT</p>
</a>
</li>
</ul>
</div>
</div><hr>
<!-- Footer Starts -->
<div class="footer">
© Copyright 2015
</div>
<!-- # Footer Ends -->
</div>
<div class="col-md-9 no-float">
<div class="span">
<header><p class="font-header br1" align="center" style="padding-top:10px;">SISTEM PENGADAAN BARANG/JASA <br>UPT SULSELRABAR </p><hr></header>
<div class="form-thumbnail">
<form method="post">
<h3 style="font-weight:bold" align="center">Surat Kuasa Kerja</h3>
<div class="form-group">
Nomor SKK:
<input type="text" class="form-control" name="no_skk" placeholder="NO SKK" style="width:300px;"></input>
</div>
<div class="form-group">
Tanggal Masuk:
<input type="date" class="form-control" name="tgl_skk" style="width:200px;"></input>
</div>
<div class="form-group" align="center">
<button type="submit" class="btn btn-custom btn-default" name="btn_submit_skk" style="border-radius:0px"> Simpan </button>
</div>
</form>
<a class="page-scroll" href="kontrak-home.php?id=<?php echo $id;?>">
<span class="glyphicon glyphicon-arrow-left"></span> Back
</a>
</div>
</div>
</div>
</div>
<script src="js/bootstrap.min.js"></script>
</body>
</HTML>
and my head tag is :
<head>
<title>Edit Surat Kuasa Kerja</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
*
{
margin:0;padding:0;
}
html,body,.container
{
height:100%;
}
.container
{
display:table;
width: 100%;
margin-top: -50px;
padding-top: 50px;
padding-left:0px;
padding-right:0px;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.font-header{
font-weight:bold;
color:gold;
font-size:48px;
line-height:50px;
}
.font-kontrak{
font-weight:bold;
color:black;
}
.font-progress>a:hover{
}
.thumbnail{
border-radius:0px 0px 0px 0px;
}
.footer {
position:absolute;
bottom:0px;
background-color: #3E4095;
height: 50px;/* or however high you would like */
color:gold;
font-weight:bold;
}
header
{
background:#820404;
height: 130px;
margin-left:-15px;
margin-right:-15px;
}
#br1
{
line-height:25px;
}
.col-md-3.no-float, .col-md-9.no-float {
float: none;
}
.col-md-3
{
display: table-cell;
background: #3E4095;
width: 25%;
}
.col-md-9
{
display: table-cell;
width: 75%;
height:100vh;
}
input[type=text]
{
border-radius:0px 0px 0px 0px;
}
input[type=password]
{
border-radius:0px 0px 0px 0px;
}
input[type=date]
{
border-radius:0px 0px 0px 0px;
}
.navbar-font
{
font-size:16px;
font-weight:bold;
color:white;
}
.navbar-font-gold{
font-size:16px;
font-weight:bold;
color:gold;
}
.nav li
{
line-height:15px;
}
.nav>li>a:hover
{
background-color:gold;
width:100%;
margin:0;
}
.p1{
line-height: 20px;
font-weight:bold;
font-size:24px;
}
.row
{
height: 100%;
display: table-row;
}
.col-special{
column-count:2;
-webkit-columns:2;
-moz-columns:2;
margin-left:6px;
}
.thumbnail{
border-radius:0px 0px 0px 0px;
border:none;
}
.form-thumbnail{
display: table;
background:#EEEEEE;
margin-top:10vh;
margin-left:40vh;
padding-bottom:30px;
padding-top:30px;
padding-left:70px;
padding-right:70px;
}
</style>
</head>
