tmeissner
/
learning-by-doing
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

new examples of various forms

master
T. Meissner 11 years ago
parent
affa59df40
commit
3c95a00eb1
11 changed files with 426 additions and 0 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +40
    -0
      ch05_01.html
  2. +32
    -0
      ch05_02.html
  3. +32
    -0
      ch05_03.html
  4. +33
    -0
      ch05_04.html
  5. +31
    -0
      ch05_05.html
  6. +35
    -0
      ch05_06.html
  7. +40
    -0
      ch05_07.html
  8. +58
    -0
      ch05_08.html
  9. +43
    -0
      ch05_09.html
  10. +47
    -0
      ch05_10.html
  11. +35
    -0
      ch05_11.html

+ 40
- 0
ch05_01.html View File

@ -0,0 +1,40 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>My first jQuery Mobile code</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>Simple form with field containers</h1>
</div>
<form action="wurst.php" method="get">
<div data-role="fieldcontain">
<label for="company">Company name:</label>
<input type="text" id="company" name="company">
</div>
<div data-role="fieldcontain">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
</div>
<div data-role="fieldcontain">
<label for="search">Search:</label>
<input type="search" id="search" name="search">
</div>
<div data-role="fieldcontain">
<label for="comments">Your comments:</label>
<textarea id="comments" name="comments"></textarea>
</div>
<button type="submit" name="submit" value="submit-value">Submit</button>
</form>
<div data-role="footer">
<h1>www.goodcleanfun.de</h1>
</div>
</div>
</body>
</html>

+ 32
- 0
ch05_02.html View File

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>My first jQuery Mobile code</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>Form with new HTML5 attributes</h1>
</div>
<form action="wurst.php" method="get">
<div data-role="fieldcontain">
<label for="name">Your name:</label>
<input type="text" id="name" required placeholder="Enter your name">
</div>
<div data-role="fieldcontain">
<label for="age">Your age:</label>
<input type="number" id="age" required placeholder="Enter your age" min="10" max="110">
</div>
<button type="submit" name="submit" value="submit-value">Submit</button>
</form>
<div data-role="footer">
<h1>www.goodcleanfun.de</h1>
</div>
</div>
</body>
</html>

+ 32
- 0
ch05_03.html View File

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>My first jQuery Mobile code</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>Form with HTML5 date fields</h1>
</div>
<form action="wurst.php" method="get">
<div data-role="fieldcontain">
<label for="birth">Your birthdate:</label>
<input type="date" id="birth" name="birth">
</div>
<div data-role="fieldcontain">
<label for="favemonth">Your favourite month:</label>
<input type="month" id="favemonth" name="favemonth">
</div>
<button type="submit" name="submit" value="submit-value">Submit</button>
</form>
<div data-role="footer">
<h1>www.goodcleanfun.de</h1>
</div>
</div>
</body>
</html>

+ 33
- 0
ch05_04.html View File

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>My first jQuery Mobile code</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>Form with HTML5 range (slider)</h1>
</div>
<form action="wurst.php" method="get">
<div data-role="fieldcontain">
<label for="quantity1">Quantity:</label>
<input type="range" id="quantity1" name="quantity1" min="1" max="100" value="5">
</div>
<div data-role="fieldcontain">
<label for="quantity2">Quantity:</label>
<input type="range" id="quantity2" name="quantity2" min="1" max="100" value="5"
data-theme="e" data-track-theme="b">
</div>
<button type="submit" name="submit" value="submit-value">Submit</button>
</form>
<div data-role="footer">
<h1>www.goodcleanfun.de</h1>
</div>
</div>
</body>
</html>

+ 31
- 0
ch05_05.html View File

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>My first jQuery Mobile code</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>Form with Flip toggle switch</h1>
</div>
<form action="wurst.php" method="get">
<div data-role="fieldcontain">
<label for="updated">Receive updates?</label>
<select id="updated" name="updated" data-role="slider">
<option value="no">No</option>
<option value="yes">Yes</option>
</select>
</div>
<button type="submit" name="submit" value="submit-value">Submit</button>
</form>
<div data-role="footer">
<h1>www.goodcleanfun.de</h1>
</div>
</div>
</body>
</html>

+ 35
- 0
ch05_06.html View File

@ -0,0 +1,35 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>My first jQuery Mobile code</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>Form with simple select menu</h1>
</div>
<form action="wurst.php" method="get">
<div data-role="fieldcontain">
<label for="training">Training</label>
<select id="training" name="training">
<option value="1">HTML5</option>
<option value="2">jQuery Mobile</option>
<option value="3">iOS</option>
<option value="4">Android</option>
<option value="5">Blackberry</option>
<option value="6">Qt for Meego</option>
</select>
</div>
<button type="submit" name="submit" value="submit-value">Submit</button>
</form>
<div data-role="footer">
<h1>www.goodcleanfun.de</h1>
</div>
</div>
</body>
</html>

+ 40
- 0
ch05_07.html View File

@ -0,0 +1,40 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>My first jQuery Mobile code</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>Form with multiple select menu</h1>
</div>
<form action="wurst.php" method="get">
<div data-role="fieldcontain">
<label for="lang">Languages you like</label>
<select id="lang" name="lang" multiple>
<option value="1">C/C++</option>
<option value="2">Objective C</option>
<option value="3">Java</option>
<option value="4">C#</option>
<option value="5">Visual Basic</option>
<option value="6">ActionScript</option>
<option value="7">Delphi</option>
<option value="8">Python</option>
<option value="9">JavaScript</option>
<option value="10">Ruby</option>
<option value="11">PHP</option>
</select>
</div>
<button type="submit" name="submit" value="submit-value">Submit</button>
</form>
<div data-role="footer">
<h1>www.goodcleanfun.de</h1>
</div>
</div>
</body>
</html>

+ 58
- 0
ch05_08.html View File

@ -0,0 +1,58 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>My first jQuery Mobile code</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>Form with multiple select menu</h1>
</div>
<form action="wurst.php" method="get">
<div data-role="fieldcontain">
<div data-role="controlgroup">
<legend>Color and Size</legend>
<select id="color" name="color">
<option value="1">Blue</option>
<option value="2">White</option>
<option value="3">Red</option>
<option value="4">Black</option>
<option value="5">Pink</option>
</select>
<select id="size" name="size">
<option value="1">X-Small</option>
<option value="2">Small</option>
<option value="3">Medium</option>
<option value="4">Large</option>
<option value="5">X-Large</option>
</select>
</div>
<div data-role="controlgroup" data-type="horizontal">
<legend>Week day and time</legend>
<select id="weekday" name="weekday">
<option value="1">Mon</option>
<option value="2">Tue</option>
<option value="3">Wed</option>
<option value="4">Thu</option>
<option value="5">Fri</option>
</select>
<select id="time" name="time">
<option value="1">Morning</option>
<option value="2">Midday</option>
<option value="3">Afternoon</option>
</select>
</div>
</div>
<button type="submit" name="submit" value="submit-value">Submit</button>
</form>
<div data-role="footer">
<h1>www.goodcleanfun.de</h1>
</div>
</div>
</body>
</html>

+ 43
- 0
ch05_09.html View File

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>My first jQuery Mobile code</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>Form with multiple select menu</h1>
</div>
<form action="wurst.php" method="get">
<div data-role="fieldcontain">
<div data-role="controlgroup" data-type="horizontal">
<legend>Delivery options</legend>
<label for="weekday">Weekday</label>
<select id="weekday" name="weekday">
<option value="1">Mon</option>
<option value="2">Tue</option>
<option value="3">Wed</option>
<option value="4">Thu</option>
<option value="5">Fri</option>
</select>
<label for="time">Time</label>
<select id="time" name="time">
<option value="1">Morning</option>
<option value="2">Midday</option>
<option value="3">Afternoon</option>
</select>
</div>
</div>
<button type="submit" name="submit" value="submit-value">Submit</button>
</form>
<div data-role="footer">
<h1>www.goodcleanfun.de</h1>
</div>
</div>
</body>
</html>

+ 47
- 0
ch05_10.html View File

@ -0,0 +1,47 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>My first jQuery Mobile code</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>Form with non-native select menu</h1>
</div>
<form action="wurst.php" method="get">
<div data-role="fieldcontain">
<label for="training">Training</label>
<select id="training" name="training" data-native-menu="false">
<option value="1">HTML5</option>
<option value="2">jQuery Mobile</option>
<option value="3">iOS</option>
<option value="4">Android</option>
<option value="5">Blackberry</option>
<option value="6">Qt for Meego</option>
</select>
</div>
<div data-role="fieldcontain">
<label for="training1">Training</label>
<select id="training1" name="training" data-native-menu="false" data-overlay-theme="e">
<option value="0" data-placeholder="true">Select your training</option>
<option value="1">HTML5</option>
<option value="2">jQuery Mobile</option>
<option value="3">iOS</option>
<option value="4">Android</option>
<option value="5">Blackberry</option>
<option value="6">Qt for Meego</option>
</select>
</div>
<button type="submit" name="submit" value="submit-value">Submit</button>
</form>
<div data-role="footer">
<h1>www.goodcleanfun.de</h1>
</div>
</div>
</body>
</html>

+ 35
- 0
ch05_11.html View File

@ -0,0 +1,35 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>My first jQuery Mobile code</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>Form with non-native select multiple menu</h1>
</div>
<form action="wurst.php" method="get">
<div data-role="fieldcontain">
<label for="training">Training</label>
<select id="training" name="training" data-native-menu="false" multiple>
<option value="1">HTML5</option>
<option value="2">jQuery Mobile</option>
<option value="3">iOS</option>
<option value="4">Android</option>
<option value="5">Blackberry</option>
<option value="6">Qt for Meego</option>
</select>
</div>
<button type="submit" name="submit" value="submit-value">Submit</button>
</form>
<div data-role="footer">
<h1>www.goodcleanfun.de</h1>
</div>
</div>
</body>
</html>

Write Preview
Loading…
Cancel
Save