Question

我有三十个使用相同表格的程序。我在每个程序中都有编码的表单。如果需要更改表单，只更改一个文件会好得多。我尝试将表单插入到我的html代码中，但它不起作用。这是html表单文件的一部分 -

document.write("<form  name="game">");
document.write("<pre>");
document.write("<textarea  name="status"  rows="8"  cols="16"  onfocus="stayAway()">");
document.write("</textarea><br>");
document.write("</pre>");
document.write("<p> <input  name="toGuess"  onfocus="stayAway()"  type="text"> <br>Word to guess.</p>");
document.write("<input  value=" A "  id="A"  onclick="guess('A')"  type="button">");
document.write("<input  value=" B "  id="B"  onclick="guess('B')"  type="button"html >");
document.write("</form>");

我把它命名为hangman.html，我试图像这样插入

<script  type="text/javascript"  src="../scripts/hangman.html"></script>

我的脚本目录中有其他html文件，这样调用，但表单根本不显示。它是一个＆＃34;形式＆＃34;表格无法以这种方式插入的问题？如何将表单插入到html程序中，以便可以在许多不同的程序中使用？

Answer 1

在html页面中，您只需添加类似的类，之后您将获得相同html中的表单。

＆＃13;

$(document).ready(function() { 
    $(".formContainer").append('<form name="game"> <div><input type="text" name="name" placeholder="Name"> </div> <div><input type="text" name="email" placeholder="Email"></div> <div><textarea name="status" rows="8" cols="16" placeholder="Message"></textarea></div> </form>')
  })

＆＃13;

  .formContainer input{
    height: 30px;
    width: 100%;
    max-width: 500px;
    margin: 5px auto;
    padding: 5px;
  }
  .formContainer textarea{
    width: 100%;
    max-width: 500px;
    margin: 5px auto;
    padding: 5px;
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="formContainer"></div>

＆＃13;

Answer 2

我喜欢使用PHP，所以你可以做的是将代码粘贴到外部文件中，比如form.php：

<?php
     echo "<form action.....>
        </form>";
?>

然后将此行放在您希望表单显示的位置：

<?php include 'form.php' ?>

此解决方案将要求您运行Apache。

Answer 3

you can use this HTML code
<html>
<head>
    <title>Contact Form using JavaScript </title>

    <!-- include css file here-->
   <link rel="stylesheet" href="css/form.css"/>  

</head>
<body>

   <div id="main">
   <h1>Contact Form using JavaScript</h1>
    <div id="form_sample">

    </div>
   <!-- include JavaScript file here -->
   <script src="js/form.js"></script>   


</body>
</html>

next use this javascript code

var x = document.getElementById("form_sample");

var createform = document.createElement('form'); // Create New Element form
    createform.setAttribute("action", "");        // Setting action Attribute on form
    createform.setAttribute("method", "post");  // Setting method Attribute on form
    x.appendChild(createform);

var heading = document.createElement('h2'); // Heading of form
    heading.innerHTML = "Contact Form ";  
    createform.appendChild(heading);

var line = document.createElement('hr');  //giving horizontal row after heading
    createform.appendChild(line);

var linebreak = document.createElement('br');
    createform.appendChild(linebreak);

var namelabel = document.createElement('label'); // Create Label for name field
    namelabel.innerHTML = "Your Name : ";            // Set Field Labels
    createform.appendChild(namelabel);

var inputelement = document.createElement('input'); // Create input field for name
    inputelement.setAttribute("type", "text");  
    inputelement.setAttribute("name", "fname");
    createform.appendChild(inputelement);

var linebreak = document.createElement('br');
    createform.appendChild(linebreak);


var emaillabel = document.createElement('label');  //Create Label for email field
    emaillabel.innerHTML = "Your Email : ";
    createform.appendChild(emaillabel);

var emailelement = document.createElement('input'); // Create input field for email
    emailelement.setAttribute("type", "text");
    emailelement.setAttribute("name", "demail");
    createform.appendChild(emailelement);

var emailbreak = document.createElement('br');
    createform.appendChild(emailbreak);

// Append Textarea
var messagelabel = document.createElement('label'); 
    messagelabel.innerHTML = "Your Message : ";
    createform.appendChild(messagelabel);

var texareaelement = document.createElement('textarea'); 
    texareaelement.setAttribute("name", "dmessage");
    createform.appendChild(texareaelement);

var messagebreak = document.createElement('br');
    createform.appendChild(messagebreak);

// Append Submit Button
var submitelement = document.createElement('input'); 
    submitelement.setAttribute("type", "submit");
    submitelement.setAttribute("name", "dsubmit");
    submitelement.setAttribute("onclick", "showInput();");
    submitelement.setAttribute("value", "Submit");
    createform.appendChild(submitelement);

use this css code

/* below line is write to use google font online  */
@import url(http://fonts.googleapis.com/css?family=Ubuntu);

div#main{
width: 830px;
height: 650px;
margin: 0px auto; 
font-family: 'Ubuntu', sans-serif;
}

div#form_sample{
text-align:center;
border: 1px solid #ccc;
width: 300px;
padding: 0px 50px 15px;
margin-top:20px;
box-shadow: 0 0 15px;
border-radius: 6px;
float:left;
}

#main h1{
margin-top:40px; 
}

hr{
margin-top:-5px;
}

label{
float: left;
font-size: 16px;
}

input[type="text"]{
width:100%;
margin-top:10px;
height: 35px;
margin-bottom: 25px;
padding:10px;
border:3px solid #2BC1F2;
}

textarea{
width:100%;
border:3px solid #2BC1F2;
padding:10px;
margin-bottom: 25px;
margin-top: 10px;
height: 100px;
resize:none;
}

input[type="submit"]{
width:100%;
padding: 10px 45px;
background-color: #2BC1F2;
border: none;
color: white;
font-size: 18px;
font-weight: bold;
cursor: pointer;
font-family: 'Ubuntu', sans-serif;
}


this time I am used this.
i hope you can easily understand this code.

许多html文件中使用的一个表单

3 个答案: