form.html
3.27 KB
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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CasperJS test form</title>
</head>
<body>
<form action="result.html" enctype="multipart/form-data">
<input type="email" name="email" placeholder="email" id="email">
<input type="password" name="password" placeholder="password">
<input type="text" name="language" placeholder="language">
<input type="whatever" name="strange">
<textarea name="content"></textarea>
<select name="topic">
<option>foo</option>
<option value="bar">baz</option>
</select>
<input type="checkbox" name="check">
<input type="radio" name="choice" value="yes">
<input type="radio" name="choice" value="no">
<input type="file" name="file">
<input type="checkbox" name="checklist[]" value="1">
<input type="checkbox" name="checklist[]" value="2">
<input type="checkbox" name="checklist[]" value="3">
<input type="submit" name="submit" value="submit">
</form>
<form id="no-type-test-form" action="#" enctype="multipart/form-data">
<input name="notype">
</form>
<script>
(function () {
'use strict';
// El-cheapo autocomplete
var choices = [
'dutch',
'danish',
'english',
'french',
'german',
'greek',
'irish',
'italian',
'portuguese',
'spanish'
],
blurAutocomplete = function () {
var el = document.getElementById('autocomplete');
if (el) {
el.parentNode.removeChild(el);
}
},
input = document.querySelector('input[name="language"]');
input.onkeyup = function () {
var that = this,
value = this.value,
html = '',
el,
i;
for (i = 0; i < choices.length; i += 1) {
if (choices[i].search(value) >= 0) {
html += '<li>' + choices[i] + '</li>';
}
}
el = document.getElementById('autocomplete');
if (!el) {
el = document.createElement('ul');
el.setAttribute('id', 'autocomplete');
el.onclick = function (e) {
that.value = e.target.innerHTML;
};
document.getElementsByTagName('body')[0].appendChild(el);
}
el.innerHTML = html;
};
input.onblur = function () {
window.setTimeout(blurAutocomplete, 200);
};
}());
</script>
</body>
</html>