首页我需要一个HTML的文本输入框一个文本显示框的程序，该程序可以将文本输入到位于页面中央的文本输入框，并通过一个按钮将数据提交，后台判断数据后，会返回一个值在位于页面中央的文本显示框上显示

我需要一个HTML的文本输入框一个文本显示框的程序，该程序可以将文本输入到位于页面中央的文本输入框，并通过一个按钮将数据提交，后台判断数据后，会返回一个值在位于页面中央的文本显示框上显示

时间: 2024-12-30 22:39:06 浏览: 4

为了创建一个基本的HTML网页，包含一个文本输入框、一个文本显示框以及一个提交按钮，你可以使用下面的HTML和JavaScript代码。这个例子假设你已经有一个服务器端API来处理数据验证和返回结果。 ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>简单文本输入展示</title> <style> .container { display: flex; justify-content: center; align-items: center; height: 50vh; /* 确保元素居中 */ } </style> </head> <body> <div class="container"> <label for="inputText">请输入文本:</label> <input type="text" id="inputText" placeholder="在此输入..."> <br><br> <button onclick="submitData()">提交</button> <p id="displayResult"></p> </div> <script> function submitData() { const inputVal = document.getElementById('inputText').value; fetch('your_server_url', { /* 替换为你实际的API URL */ method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({ data: inputVal }), }) .then(response => response.json()) .then(data => { document.getElementById('displayResult').innerText = `返回的结果: ${data.result}`; }) .catch((error) => { console.error('Error:', error); document.getElementById('displayResult').innerText = '发生错误'; }); } </script> </body> </html> ``` 在这个示例中，当用户点击提交按钮时，`submitData`函数会被触发。它从输入框获取内容，然后发送一个POST请求到指定的服务器URL（这里仅作示例，你需要替换为实际地址）。服务器响应的数据会被解析并显示在`<p>`标签内的文本显示框。

阅读全文