Question

我一直在制作HTML网站，我一直担心制作表单，所以我使用了表单生成器。

这一次，我决定自己想做。我知道表单看起来像这样的基础知识：

<form id="mail_form">
        <div>
            <input type="text" name="subject" id="subject"/>
        </div>
        <div>
            <textarea name="message" id="message"></textarea>
        </div>
        <div>
            <input type="submit" name="submit" id="submit" value="Send"/>
        </div>
</form>

但是为了使表格真正起作用，您认为最简单有效的方法是什么？

由于

Answer 1

您需要将其发布到脚本以便可以处理它。

在标记中，您需要包含操作和方法属性。该操作指定将数据发送到的网页，方法是如何发送数据。有两种方法可以使用POST或GET发送数据，但在你的情况下，POST可能是更好的选择。

您的意愿如下：

myform.php

<form id="mail_form" action="mypost.php" method="POST">
        <div>
            <input type="text" name="subject" id="subject"/>
        </div>
        <div>
            <textarea name="message" id="message"></textarea>
        </div>
        <div>
            <input type="submit" name="submit" id="submit" value="Send"/>
        </div>
</form>

您可以使用以下内容访问数据：

mypost.php

<?PHP
     echo $_POST['subject'];
     echo "\<br\>";
     echo $_POST['message'];
?>

这将打印出用户输入的值。您可以选择随意使用它。

当然，这种方式只适用于PHP。您可以将操作设置为任何类型的文档，但是您需要一些服务器端脚本语言来检索和操作数据。

如需进一步阅读，请参阅http://www.w3schools.com/php/php_forms.asp。

Answer 2

你需要一个“后端”来完成这项工作。这通常是ASP或PHP。

当您单击“提交”按钮时，浏览器会将数据发送到后端，代码将根据提交的数据执行操作。通常它会将这些数据存储到数据库中。

你应该看看PHP可能更容易进入，托管成本通常更便宜

Answer 3

首先，我建议将表格简化为必需品：

<form id="mail_form">
    <input type="text" name="subject" id="subject"/>
    <textarea name="message" id="message"></textarea>
    <input type="submit" name="submit" id="submit" value="Send"/>
</form>

然后添加一些语义信息：

<form id="mail_form">
    <label for="subject">Subject:</label>
    <input type="text" name="subject" id="subject"/>

    <label for="message">Message:</label>
    <textarea name="message" id="message"></textarea>

    <input type="submit" name="submit" id="submit" value="Send"/>
</form>

然后使用fieldset元素将表单分段为相关组件：

<form id="mail_form">
    <fieldset class="message">
        <label for="subject">Subject:</label>
        <input type="text" name="subject" id="subject"/>

        <label for="message">Message:</label>
        <textarea name="message" id="message"></textarea>
    </fieldset>

    <fieldset class="submitReset">
        <input type="submit" name="submit" id="submit" value="Send"/>
    </fieldset>
</form>

此时，您需要向form的开始标记添加信息，以说明您在提交时要发生的事情，以及如何：

<form id="mail_form" action="http://path.to.server-side-script.com/script.php" method="post" <!-- or 'get' -->>

单击提交按钮（或通过任何方式提交表单），信息将发送到位于“http：//path.to.server-side-”的服务器端/后端脚本script.com/script.php”。

与JS不同，不需要担心同域政策，并且可以（尽管可能不应该）向您的浏览器可访问的任何表单提交信息。

已编辑以回应OP的评论（提问）

...表格不发送。我正在寻找发送网络表单的最佳脚本。

您不需要脚本来发送表单，只需将action和method属性添加到form'即可打开标签。浏览器将自行处理提交。但是，执行需要一个脚本来处理/处理服务器上的表单。但这是另一个问题，如果您提供有关后端/服务器端资源的详细信息，则只能回答。

Answer 4

您需要指定表单的操作和目标属性和方法（POST或GET）。

Answer 5

正如其他响应所指出的那样，您需要一个服务后端来处理服务器中的请求。

如果您希望使用PHP，我建议您让WAMP在您的计算机上运行Apache / PHP，这是一个非常简单的教程：http://www.w3schools.com/php/php_forms.asp

如果您打算使用ASP .NET，可以从http://www.asp.net获取该软件，并且他们的网站上也有非常好的教程。

您还可以使用其他服务器端程序，例如Python或Ruby。这是一个探索和发现你喜欢的问题。

Answer 6

尝试一下：在桌面上新建一个名为Form.html的文件。然后，如果您需要一个网络论坛，则应该复制并粘贴此代码。您可以稍后修改文字内容。

form.html代码：

<!DOCTYPE html>
<style>
h1 {
  background-color: red;
}
body { 
background-color: black;
}
</style>
<html>
<head>
<script>
function formSubmit() {
    document.forms["myForm"].submit();
}
</script>
</head>
<body>
<h1><sup>Emerson</sup>Wishlist</h1>

<form name="myForm"
action="actionpage.html" method="get">
  <label for="fname"><p style="color:red">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname"><p style="color:red">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="button" onclick="formSubmit()" value="Sign in">
</form>

<p style="color:red">Sign in to the Emerson Wishlist</p>

</body>
</html>

好了，现在您已经完成了，新建一个名为actionpage.html的.html文件。

然后将代码从此处复制并粘贴到该文件中：

<!DOCTYPE html>
<style>
h1 {
  background-color: red;
}
body { 
background-color: black;
}

@import url('https://fonts.googleapis.com/css2?family=Itim&display=swap');
</style>
<header>
<h1><sup>Emerson</sup>Wishlist</h1>
</header>
<body>
<h2 style="color:red">Signed in</h2>
<p style="color:red">Ms. Example needs Wet Wipes. (the Purell kind)</p>
<p style="color:red">Click the button below to donate Wet Wipes to Ms. Example</p>
</body>
<button onclick="myFunction()">Donate</button>

<script>
function myFunction() {
  alert("Successfully donated to Ms. Example!");
}
</script>

然后，保存并在浏览器中运行form.html。您应该获得一个有效的Web表单。

如果您对以下部分感到疑惑：“示例女士需要湿纸巾”，这是一个学校项目，我将为我学校的老师建立一个愿望清单。

如何创建HTML Web表单？

6 个答案: