I have a php-file called loginscreen.php. For now it contains two JqueryMobile pages and a form on the first page to login. The login process is working just fine. The whole thing is hosted with xampp (Version: 5.6.3-0) on my Mac.
When I change the file extension of my loginscreen.php file to .html (so --> loginscreen.html) and open it in the htdocs folder in finder, the loginscreen page opens just fine in Safari in correct jquery mobile style after my custom theme, the login process works and gets me to my second page.
However, if I access the loginscreen.php in my browser with localhost/loginscreen.php the file renders wrongly. I get double buttons (usual html button within jQuery button). Double input fields (same as buttons). My second page is being displayed as well and when login in I get a page load error!
What's my problem here? Since it works when opening the file as an html via finder I suppose the problem is my xampp hosting. What could the problem be so that my files don't render correctly when hosted via xampp?
My code (The loginscreen.php file)(There's also a javascript and another php file being responsible for the login via ajax and php to access my database (also hosted with xampp) everything working properly when being opened via finder as html but not when accessed through browser as php)
<!doctype html>
<html><head>
<title>Prototyplogin</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <meta name="viewport" content="initial-scale=1, maximum-scale=1"> -->
<link rel="stylesheet" href="themes/mensa1.min.css" />
<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="jquery/jquery.mobile.structure-1.4.5.min.css" />
<link rel="stylesheet" type="text/css" href="loginscreen.css" />
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="jquery.mobile-1.4.5.js"></script>
<script type="text/javascript" src="loginscreen.js"></script>
</head>
<body>
<div data-role="page" data-theme="c" id="loginscreen">
<div data-role="main" class="ui-content">
<br />
<div id="titel">
<p>Logo</p>
</div>
<br />
<form action="test.php" method="post" id="loginformular">
<label for="username">Benutzername:</label>
<input type="text" name="username" id="username">
<br/>
<label for="password">Passwort:</label>
<input type="password" name="password" id="password">
<br/>
<input type="button" value="Anmelden" id="submit" data-role="button">
</form>
<div id="notificationdiv"><h3 id="notification"></h3></div>
</div>
</div>
<div data-role="page" id="firstpage">
<div data-role="header">
</div>
<div data-role="main" class="ui-content">
<h1>Secondpage</h1>
</div>
<div data-role="footer">
</div>
</div>
</body>
</html>Searched the whole internet for this issue, would be awesome to receive some help! :-) Thanks for your help in advance! :-)
</div>
