如何将contentEditable可编辑元素转换为表单输入字段？

原代码中的contentEditable元素不属于标准表单控件，表单提交时不会携带它们的值，需要替换为input和textarea这类原生表单控件：

<form action="" method="post">
    <input type="text" name="name" placeholder="Your Favorite Movie">
    <textarea name="Comment" placeholder="Your Comment"></textarea>
    <button>Submit</button>
</form>

关键修改说明： #

• 单行的电影名称输入：用input[type="text"]替代原div，保留name="name"属性确保提交时能传递该字段的值；用placeholder设置提示文本，和原contentEditable元素的初始文本作用一致。
• 多行的评论输入：用textarea替代原p标签，同样保留name="Comment"属性，placeholder设置提示文本，适配多行输入的场景。
• 所有表单控件都保留了原有的name属性，保证表单提交时能正确携带对应的数据。

内容的提问来源于stack exchange，提问作者Asif Iqbal