HTML输入输出 - HTML input output

用户在这里输入他们的名字作为表单的一部分。

  <p>Name <font color="red">(required) </font> <input name="flname" required="required" placeholder="Your Name" </p>

这个解决方案目前提供了一种提供示例文本的方法，该示例文本也可以被编辑，并且PHP可以在其中运行，不像<textarea>。然而，我的问题是，不像<textarea>，我似乎不能得到<div contenteditable...提交其信息的邮件php文件，我已经设置在服务器上。有谁知道我该如何实现这个吗?

  <div contenteditable="true" name="message" required="" placeholder="Your Message" >Dear <?php echo "$mptitle $mpsecondname" ?>, <p> Please support us... </p>
 <p> Kind Regards, </p>
 <script type="text/javascript"> document.write(document.getElementById('flname').id);</script>
 </div>
 <div align="center">

# Update 2:嗨,

感谢你们的快速反应。

我试着在这里实现你的解决方案:

    <div align="left">
     <form action="form.php" method="post" enctype="multipart/form-data">
     <p>Name <font color="red">(required) </font> <input name="flname"       required="required" placeholder="Your Name" </p>
    <p>Email <font color="red">(required) </font> <input name="emailfrom" type="email" required="required" placeholder="Your Email">  </p>
    <p>Address <font color="red">(required) </font> <input name="address" type="name" required="required" placeholder="Address"> </p>
        <p>City <font color="red">(required) </font> <input name="city" type="name" required="required" placeholder="City"> </p>
        <p>Postcode <font color="red">(required) </font> <input name="postcode" type="name" required="required" placeholder="Postcode"> </p>
               <p>What is 2+2? <font color="red">(required) </font> <input name="human" required placeholder="Type Here">  </p>
        <p> <b> You can edit the text below as much or as little as you wish </b> </p>
          <div contenteditable="true" required="" placeholder="Your              Message" >Dear <?php echo "$mptitle $mpsecondname" ?>, <p> Please support us... </p> <p> Kind Regards, </p>
    </div>
         <input type=hidden name=userContent id=userContent>
        <script>
        var el=document.getElementById('userForm');
        el.addEventListener('submit', function() {
        var elInput=document.getElementById('userContent');
        var elDiv=document.getElementById('divContent');
        elInput.value = elDiv.innerHTML;
        });
        </script>
     <div align="center">
    <input id="cancel" name="cancel" type="submit" value="Cancel" />
        <input id="submit" name="submit" type="submit" value="Submit">
</form>
</div>
</div>

PHP:

  <?php
    ini_set('display_errors',1);  error_reporting(E_ALL);
    include('mplookup.php');
    $name = $_POST['flname'];
    $email = $_POST['emailfrom'];
    $message = $_POST['userContent'];
     $address = $_POST['address'];
     $city = $_POST['city'];
     $postcode = $_POST['postcode'];
    $human = $_POST['human'];
    $to = "";
    $body = $message;
    $subject = 'From: $email 'r'n : Sisi''s visit to the UK: Sent using EG4DEMUK''s Tool ';
    ?>
    <?php
    if ($_POST['submit']) {
        if (mail ($to, $subject, $body, $email))
        {
            echo '<p>Thank you for your email!</p>';
        } else {
            echo '<p>Oops! An error occurred. Try sending your message again.</p>';
        }
    }
    ?>

然而，输出的电子邮件看起来像这样

From: Hassan Ismail
E-Mail: 
Message

Thanks in advance

<div>不是表单元素，因此不会提交。您需要在表单的提交事件上实现一个事件侦听器，该事件将获取<div>的内容并将其放入表单元素中。在表单中添加一个隐藏的<input>。

下面是一个简单的例子:

<div id=divContent style="width:400px; height=200px;overflow:auto" contenteditable>Some content</div>
<form id=userForm>
    <input type=hidden name=userContent id=userContent>
        <input type=submit name=submit value="Send!">
</form>

<script>
        var el=document.getElementById('userForm');
el.addEventListener('submit', function() {
    var elInput=document.getElementById('userContent');
    var elDiv=document.getElementById('divContent');
    elInput.value = elDiv.innerHTML;
});
</script>

var el=document.getElementById('userForm');
el.addEventListener('submit', function() {
    var elInput=document.getElementById('userContent');
    var elDiv=document.getElementById('divContent');
    elInput.value = elDiv.innerHTML;
});

<div id=divContent style="width:400px; height=200px;overflow:auto" contenteditable>Some content</div>
<form id=userForm>
    <input type=hidden name=userContent id=userContent>
        <input type=submit name=submit value="Send!">
</form>
<script>

getElementById('flname')…在方法名中是否明确地写了方法通过其Id获取元素，而不是通过其名称。使用getElementsByName或为输入标记设置一个id。您的输入标签也没有关闭…不要使用字体——它已经过时了。如果您想要提交标记内容，使用ajax，或者在代码的某个地方设置一个隐藏字段，那么在实际提交之前使用提交处理程序将其与div的内容一起设置。

<div id="yourdivid">....</div>
<input id="submitarea" type="hiden" name="submitarea">
$(function() {
  $('#yourformid').submit( function() {
    $('#submitarea').val($('#yourdivid').html()); 
  }); 
});