92 lines
3.2 KiB
HTML
92 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>MCP Form Test Page</title>
|
|
<style>
|
|
body { font-family: monospace; max-width: 600px; margin: 40px auto; padding: 20px; }
|
|
label { display: block; margin: 10px 0 4px; font-weight: bold; }
|
|
input, textarea, select { display: block; width: 100%; max-width: 300px; padding: 8px; font-size: 14px; margin-bottom: 10px; }
|
|
button { padding: 10px 20px; font-size: 16px; cursor: pointer; margin: 5px 0; }
|
|
#output { margin-top: 20px; padding: 10px; border: 1px solid #ccc; min-height: 40px; white-space: pre-wrap; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Form Test Page</h1>
|
|
|
|
<form id="test-form" onsubmit="event.preventDefault(); submitForm()">
|
|
<label for="name">Name:</label>
|
|
<input type="text" id="name" name="name" placeholder="Enter your name">
|
|
|
|
<label for="email">Email:</label>
|
|
<input type="email" id="email" name="email" placeholder="Enter your email">
|
|
|
|
<label for="message">Message:</label>
|
|
<textarea id="message" name="message" rows="3" placeholder="Enter a message"></textarea>
|
|
|
|
<label for="color">Favorite Color:</label>
|
|
<select id="color" name="color">
|
|
<option value="">Choose...</option>
|
|
<option value="red">Red</option>
|
|
<option value="green">Green</option>
|
|
<option value="blue">Blue</option>
|
|
</select>
|
|
|
|
<label for="agree">
|
|
<input type="checkbox" id="agree" name="agree"> I agree to the terms
|
|
</label>
|
|
|
|
<button type="submit">Submit Form</button>
|
|
<button type="button" id="clear-btn">Clear</button>
|
|
</form>
|
|
|
|
<div id="output">Form not submitted yet.</div>
|
|
|
|
<script>
|
|
function submitForm() {
|
|
var data = {
|
|
name: document.getElementById('name').value,
|
|
email: document.getElementById('email').value,
|
|
message: document.getElementById('message').value,
|
|
color: document.getElementById('color').value,
|
|
agree: document.getElementById('agree').checked
|
|
};
|
|
document.getElementById('output').textContent = JSON.stringify(data, null, 2);
|
|
}
|
|
|
|
document.getElementById('clear-btn').addEventListener('click', function() {
|
|
document.getElementById('test-form').reset();
|
|
document.getElementById('output').textContent = 'Form cleared.';
|
|
});
|
|
|
|
// React-like controlled input simulation
|
|
var reactInput = document.createElement('input');
|
|
reactInput.type = 'text';
|
|
reactInput.id = 'react-input';
|
|
reactInput.placeholder = 'React-like controlled input';
|
|
reactInput.setAttribute('data-testid', 'react-input');
|
|
var reactLabel = document.createElement('label');
|
|
reactLabel.textContent = 'React-like Input:';
|
|
reactLabel.htmlFor = 'react-input';
|
|
var form = document.getElementById('test-form');
|
|
form.insertBefore(reactLabel, form.firstChild);
|
|
form.insertBefore(reactInput, reactLabel.nextSibling);
|
|
|
|
// Track value via event listener (like React does)
|
|
var reactValue = '';
|
|
reactInput.addEventListener('input', function(e) {
|
|
reactValue = e.target.value;
|
|
});
|
|
|
|
var reactBtn = document.createElement('button');
|
|
reactBtn.type = 'button';
|
|
reactBtn.textContent = 'Show React Value';
|
|
reactBtn.addEventListener('click', function() {
|
|
document.getElementById('output').textContent = 'React input value: ' + reactValue;
|
|
});
|
|
form.appendChild(reactBtn);
|
|
</script>
|
|
</body>
|
|
</html>
|