-
Notifications
You must be signed in to change notification settings - Fork 3
/
demo.html
114 lines (90 loc) · 3.21 KB
/
demo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<html>
<head>
<style type="text/css">
body {
font-family: Helvetica, Arial;
}
fieldset {
border: 1px solid #aaaaaa;
}
label {
min-width: 200px;
width: 200px;
}
input, select {
min-width: 250px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<h1>Sample Form with Placeholder Support</h1>
<form id="testForm" name="test">
<fieldset>
<legend>Account Information & Preferences</legend>
<div><label for="name">First & Last Name</label></div>
<div><input id="name" type="text" name="name" /></div>
<div><label for="user.name">Username</label></div>
<div><input id="user.name" type="text" name="user.name" /></div>
<div><label for="country">Country</label></div>
<div>
<select id="country" name="country" placeholder"">
<option value="">Select Your Country</option>
<option value="US">United States</option>
<option value="CA">Canada</option>
</select>
</div>
<div><label for="country.region">Region</label></div>
<div>
<select id="country.region" name="country.region" placeholder"">
<option value="">Select Your Region</option>
<option value="US">A</option>
<option value="CA">B</option>
</select>
</div>
<div><label for="postalCode">Postal Code</label></div>
<div>
<input id="postalCode" type="text" name="postalCode" pattern="[0-9]*" />
</div>
<div><label for="phoneNumber">Phone Number</label></div>
<div><input id="phoneNumber" type="tel" name="phoneNumber" /></div>
<div><label for="email">Email Address</label></div>
<div><input id="email" type="email" name="email" /></div>
<div><label for="password">Password</label></div>
<div><input id="password" type="password" name="password" /></div>
<div>
<input type="checkbox" id="optIn" name="optIn" value="Y" />
<label for="optIn">Join our mailing list</label>
</div>
<fieldset>
<legend>Gender</legend>
<div>
<input type="radio" id="genderMale" name="gender" value="M" />
<label for="genderMale">Male</label>
</div>
<div>
<input type="radio" id="genderFemale" name="gender" value="F" /> <label for="genderFemale">Female</label>
</div>
</fieldset>
</fieldset>
</form>
<button id="applyPlaceholders">Apply Placeholders</button>
<button id="applyPlaceholdersWithOptions">Apply Placeholders, Don't Hide <code>select</code> labels</button>
<button id="applyPlaceholdersWithCustomFn">Apply Placeholders, Using Custom Hide Function</button>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="./jquery.html5placeholders.js"></script>
<script type="text/javascript">
//<![CDATA[
$('#applyPlaceholders').click(function () {
$('#testForm').html5placeholders();
});
$('#applyPlaceholdersWithOptions').click(function () {
$('#testForm').html5placeholders( { hideSelectLabels: false } );
});
$('#applyPlaceholdersWithCustomFn').click(function () {
$('#testForm').html5placeholders( { hideMethod: function(el) { el.hide() } } );
});
//]]>
</script>
</body>
</html>