Mobile-Web-App: HTML Text input and input type@jQuery Mobile

Sunday, February 5, 2012

HTML Text input and input type@jQuery Mobile

jQuery Mobile can convert text input to suitable for mobile device automatically, without change. Below HTML code is same as previous post "HTML Text input and input type", with jquery and jquery mobile javascript and stylesheet linked.

<!doctype html>
<html>
    
<head>
 <meta charset="utf-8"></meta>
 <title>Mobile-Web-App: text input and input type</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
 
</head>
<body>
<h1>Mobile-Web-App</h1>

<form>
<p>Name: <input type="text" name="name" placeholder="Name"/></p>
<p>Email: <input type="email" name="email" placeholder="Email" /></p>
<p>Tel: <input type="number" name="tel" placeholder="Tel" /></P>
<p>Password: <input type="password" name="password" placeholder="Password" /></p>
<p>Birthday: <input type="date" name="birthday" /></p>
<p>Now(Date-Time): <input type="datetime" name="now" /></p>
</form>

</body>
</html>