115 lines
4.4 KiB
HTML
115 lines
4.4 KiB
HTML
|
<!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">
|
||
|
|
<label for="email">Email</label>
|
||
|
|
<input type="email" name="email" placeholder="email" id="email">
|
||
|
|
<label for="password">Password</label>
|
||
|
|
<input type="password" name="password" placeholder="password" id="password">
|
||
|
|
<input type="text" name="language" placeholder="language">
|
||
|
|
<label for="strange">Strange</label>
|
||
|
|
<input type="whatever" name="strange" id="strange">
|
||
|
|
<label for="content">Content</label>
|
||
|
|
<textarea name="content" id="content"></textarea>
|
||
|
|
<label for="topic">Topic</label>
|
||
|
|
<select name="topic" id="topic">
|
||
|
|
<option>foo</option>
|
||
|
|
<option value="bar">baz</option>
|
||
|
|
</select>
|
||
|
|
<label for="multitopic">Multitopic</label>
|
||
|
|
<select multiple name="multitopic" id="multitopic">
|
||
|
|
<option>foo</option>
|
||
|
|
<option value="bar">baz</option>
|
||
|
|
<option value="car">caz</option>
|
||
|
|
</select>
|
||
|
|
<label for="check">Check</label>
|
||
|
|
<input type="checkbox" name="check" id="check">
|
||
|
|
<label for="choice_yes">Yes</label>
|
||
|
|
<input type="radio" name="choice" value="yes" id="choice_yes">
|
||
|
|
<label for="choice_no">No</label>
|
||
|
|
<input type="radio" name="choice" value="no" id="choice_no">
|
||
|
|
<label for="file">File</label>
|
||
|
|
<input type="file" name="file" id="file">
|
||
|
|
<label for="checklist_1">1</label>
|
||
|
|
<input type="checkbox" name="checklist[]" value="1" id="checklist_1">
|
||
|
|
<label for="checklist_2">2</label>
|
||
|
|
<input type="checkbox" name="checklist[]" value="2" id="checklist_2">
|
||
|
|
<label for="checklist_3">3</label>
|
||
|
|
<input type="checkbox" name="checklist[]" value="3" id="checklist_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';
|
||
|
|
|
||
|
|
// Force fields initialization
|
||
|
|
document.querySelector("input[name=email]").value = "";
|
||
|
|
|
||
|
|
// 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>
|