如何使 HTML 表单提交
Posted
技术标签:
【中文标题】如何使 HTML 表单提交【英文标题】：how to make HTML form submit 【发布时间】：2021-11-27 14:19:57 【问题描述】：我正在使用 MVC 框架在 .NET 中构建一个 Web 应用程序。从来没有这样做过，而且我对这种软件开发还很陌生。
我正在创建一个 html 表单，其中包含一个输入字段。据我了解，默认的“提交”将是返回按钮。我试图让它向控制器发送一个 ID，但它不会在“？”之后解析任何内容。表格位于顶部的标题下方。
整页：
@model Web_App.Models.CAN_Waterium_Frame
@using System.Collections.Generic;
@
ViewData["Title"] = "Data";
<h2>Raw Data</h2>
<form id="searchBar" action="/Data/RawData" method="GET">
<input type="text" placeholder="Search id.." id="id">
</form>
<ul>
@
var list = (List<CAN_Waterium_Frame>)ViewData["data"];
@foreach (var item in @list)
System.DateTime dtDateTime = new DateTime(1970,1,1,0,0,0,0,System.DateTimeKind.Utc);
dtDateTime = dtDateTime.AddSeconds(item.time).ToLocalTime();
<li>ID: @item.id
data length: @item.dlc
raw data: @System.Text.Json.JsonSerializer.Serialize(item.data)
time: @dtDateTime.ToString("dddd, dd MMMM yyyy HH:mm:ss") </li>
</ul>
现在，谁能帮我理解我在这里做错了什么以及如何解决它？我的理解是，在点击返回后，这个表单应该请求：
https://url/Data/RawData?id=x
但确实如此：
https://url/Data/RawData?
当我看到 URL 更改时，它确实记录了我点击返回按钮。请帮助我理解。
【问题讨论】：
使用name="id" 而不是id="id"
【参考方案1】：
您的input 元素没有name 属性：
<input type="text" placeholder="Search id.." id="id">
浏览器使用该属性为与表单数据一起提交的键/值对定义“键”。所以你有一个值，但没有键。添加您的密钥：
<input type="text" placeholder="Search id.." id="id" name="id">
【讨论】：
大人，我是不是觉得自己很蠢。谢谢老兄！【参考方案2】：您应该指定控件的name，以便与form 一起发送。
<input type="text" placeholder="Search id.." name="id" />
发件人：https://www.w3schools.com/tags/att_form_method.asp
定义和用法
[...]
表单数据可以作为 URL 变量（使用 method="get"）或作为 HTTP post 事务（使用 method="post"）发送。
GET 说明：
将表单数据附加到 name/value 对中的 URL
[...]
【讨论】：
【参考方案3】：需要在表单中添加提交类型按钮如下
<input type=“submit” value=“Submit” />
【讨论】：
【参考方案4】：表单将根据里面的字段名称提交
例如
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<div id="app">
<form id="searchBar" action="/" method="GET">
<input
name="id"
value="some value"
type="text"
placeholder="Search id.."
id="id"
/>
</form>
</div>
</body>
</html>进入后，您应该会在 URL 处看到 /?id=some+value 这个值
你没有得到任何东西，因为你错过了输入的名称属性
【讨论】：
以上是关于如何使 HTML 表单提交的主要内容，如果未能解决你的问题，请参考以下文章