Question

我是HTML的初学者，我想知道，我如何在HTML-Body中创建一个段落，等同于用户使用JavaScript函数在HTML-Body中写入文本框的文本。有没有办法做到这一点？还有一个问题：当用户点击“提交”按钮时会发生什么？ HTML是否将用户的所有输入都写入变量？

（编辑）所以，这是我的代码（HTML）：

<!DOCTYPE html>
<html>
<head>
    <script src="script.js"></script>
    <link href="stylesheet.css" rel="stylesheet">
</head>
<body>
    <div class="input-text">
        <input type="user-answer" id="uA1">
        <p id="paragraph"></p>
        <input type="button" onClick="inp.input();" value="Write Text">
    </div>
</body>
</html>

JavaScript的：

var inp = document.getElementById('uA1');
var p = document.getElementById('paragraph');

inp.addEventListener('input', function() {
    p.textContent = inp.value;
});

它仍然不起作用。

Answer 1

点击“提交”按钮时，浏览器将包含该按钮的内容序列化为网址编码字符串（name1=value1&name2=value2&etc=etc）并执行form标记中描述的http请求（action和method属性）。它不会创建任何变量或保存它。所有值都已保存在表单元素的属性中（DOM树的节点）。

要将输入与段落同步，您必须向该输入添加事件侦听器，如果用户在其中插入任何文本，则使用输入值作为段落的文本内容。

var inp = document.getElementById('myArea');
var p = document.getElementById('myP');

inp.addEventListener('input', function(){
    p.textContent = inp.value;
});

在jsFiddle上查看。

你可以看到在这个例子中我使用了value DOM节点的属性textarea（由它的id选择）。这是存储表单数据的地方，但直到点击“提交”按钮。

Answer 2

关于用户点击“提交”按钮时会发生什么的问题，通常输入中包含的所有信息都存储在php变量中。我不认为你想使用php，但这很简单：

<form method = "post" action = "next.php">
    <div>
        <input id = "id" name = "id" placeholder = "your id here..." />
        <input id = "pass" name = "pass" placeholder = "your pass here..." />
    </div>
    <div>
        <input id = "btn_valid" value = "Valid information" />
    </div>
</form>

在这个例子中，我做了一个简短的表单，有两个输入让用户输入他的id和密码。如果您指定了“name”标签（就像我在两个输入“id”和“pass”中所做的那样），您将能够在这样的php“next.php”文件中获取它们（在另一页，在此页面“next.php”中的大小写：）

<?php
    $id = $_POST['id'];
    $pass = $_POST['pass'];
?>

因为您指定在表单参数中转到“next.php”，所以您可以通过调用“$ _POST ['name-of-the input']”来获取这些数据。它适用于所有可以带有“名称”标签的元素！

最后的信息，一个php文件可以包含html，javascript或php代码！但是你需要通过服务器（如Xampp）执行它。

JavaScript / HTML |使HTML段落等于用户输入

2 个答案: