Web Development

That's a completely different use case then, and the solution is Tor, proxies, ShadowSocks, vpn-ws.

But if you can't HTTPS, it's weird that you'd be able to do a VPN in the first place. HTTP only is super rare outside of China, and most places HTTPS would be blocked, VPNs are even more blocked

I mean technically you could encrypt most of the stuff client-side but you have to keep in mind the browser loading JavaScript over HTTP is still insecure and it would be easy to modify the script to also send the key to your attacker. There's nothing you can do that would be better than what the browser can do.

The only way to make it safe is to not have a web application. The code must already be on your device in a state you trust to be able to trust anything else that depends on it.

An easy fix might be to configure your browser to use your server as a plain HTTP proxy, which will issue CONNECT commands for HTTPS automatically, and now you're in HTTPS world and you're good.

You're really kinda conflating a bunch of different problems here, so I think you need to focus down what you're really interested in accomplishing.

I may at times only have access to HTTP only (No HTTPS)

If you don't have access to HTTPS, you can maybe make something to fill that gap through JS, but it's gonna involve hijacking and re-implementing MOST of the functionality of the browser. There is almost certainly a more-effective solution to solve the lack of HTTPS.

My understanding is that HTTPS is "secure" for basic use ... But not secure from five eye agencies

I think the point you're trying to get at here is that the encrypted connection is only as secure as its endpoints. Traffic encrypted over HTTPS is no less "secure" in itself than traffic over a VPN, but the security ends at the HTTP server, and you may or may not trust the owner of that server to keep your data secure from outside parties. There really isn't any difference between an HTTP server and a VPN server in this context, except that VPN providers tend to care about privacy more than general-purpose web host providers, because that's kinda the selling point of VPNs for most people. A VPN provider could still be vulnerable to a legal request to collect and/or hand over data they have on you.

My goal is to have a user connect to a web server and have it not possible for the web server to know what is going on

Sure, you're basically describing an E2EE messaging app, and this is different than HTTPS and VPNs, because the server sitting between two clients isn't an endpoint of the encryption, only the two clients are. Private keys are stored on client devices, public keys are exchanged, and all "data" moving out of the client is encrypted to be only decryptable by the client intended to receive it. The server doesn't have any of the private keys, so can't decrypt anything.

nor can anyone snooping the packets in transit know what is going on

This is what HTTPS and VPN connections provide already.

Not know the HTML structure, form field data, etc.

In theory, you could accomplish this by delivering an initial payload of a mostly-empty HTML document, and some JS capable of bootstrapping an encrypted "connection" to the server, using only low-level browser network APIs. You likely wouldn't be able to encrypt most of the traffic, just the HTTP data payloads. Once the initial "connection" is established, then the server delivers the rest of the app itself, mainly JS SPA that renders everything locally.

In practice, you've basically just re-invented HTTPS, but worse.

Why do you only have access to http? Knowing that would help guide answers.