以下が実装例になります。安全性に配慮してevalやリダイレクトなどを避け、JavaScriptの標準関数を利用して処理しています。
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Base64 Encoder</title>
</head>
<body>
<h1>Base64 Encoder</h1>
<label for="inputstr">Input string:</label>
<input type="text" id="inputstr" name="inputstr">
<br>
<br>
<button onclick="encodeString()">Encode</button>
<br>
<br>
<label for="outputstr">Output string:</label>
<textarea id="outputstr" rows="5" cols="50"></textarea>
<script>
function encodeString() {
var input = document.getElementById("inputstr").value;
var output = btoa(input);
document.getElementById("outputstr").value = output;
}
</script>
</body>
</html>
```
ジョークを取り入れてみました。ご利用は自己責任でお願いします。
