HTML website programming - html

I am starting a new business and am creating a basic website for displaying what it is about and its products.
I have started with an outline in HTML and CSS, but I have met on some trouble with adding submitting forms and adding a path to the links.
I have figured out how to make a basic form like this:
<form>
First name:<br>
<input type="text" name="firstname">
<br>
E-mail:<br>
<input type="text" name=„E-mail“>
</form>
But whenever I click the submit button the page gets an error and I am also not sure where the data would be stored. I have not yet set up the domain for the website so I am still doing this in my browser.
Also if I want to have a link to another page on my website such as:
Learn More
how do I add the path to the next page?
Thanks in advance!

You need to learn first how html works, and how to receive data with a server-side language (like php, java, asp, nodejs, etc).
To put a target to the form make something like this:
<form action="your-target-page.php" method="POST">
If you have a php server you can receive data:
$email = $_POST['email']
Learn more about form tag:
https://developer.mozilla.org/es/docs/Web/HTML/Elemento/form

Regarding the form you are going to need a server side language to handle the posting of a form. If you are new to website creation I would suggest using Wordpress and an already made free theme.
For your form this is better markup:
<form>
<label>First name:</label>
<input type="text" name="firstname">
<label>E-mail:</label>
<input type="text" name="email">
</form>
Assuming you have a file called learn_more.html in the same root that is how the link would work, target="_blank" opens it in a new browser window, if you just want it in the same window omit this.
Learn More

HTML form doesn't store any data with itself. It can just send a formed data to a server via HTTP protocol.
You need to have any kind of server side (CGI) program. Those are usually programmed in Perl, Python, Ruby, Java, PHP or so on.
In short
Send data to server side program from HTML form
Receive and process data with the program.

Related

Is there any way to show feedback for a form submission without Javascript?

Let's say we have a basic HTML form like this:
<form action="#" method="post">
<input type="text" name="name">
<textarea name="message" id="message" rows="5"></textarea>
<button type="Submit">Submit</button>
</form>
When a user clicks on the Submit button, whatever is in the action attribute will happen without any javascript.
The question is, is there any way to show some kind of feedback based on the submission (either success or error) without javascript?
Also please note that the project is supposed to be hosted on GitHub Pages.
Short answer: no
You need to have some kind of programming language involved.
Typically a form will submit to the URL specified in the action attribute and the response will be handled by server-side programming. GitHub Pages only supports static files so that isn’t an option unless you combine it with a third party host for your server-side code.
You can also handle the data using client-side programming. This requires JavaScript (although you can write in some other languages, such as TypeScript, that you can transpile to JavaScript). Typically you would add a submit event listener to the form.
No. You must use some programming language.
However, if you're hosting the form,
Some hosts like Netlify will display a message once the message has been sent.

Get is being stripped off an HTML form

I have an HTML form on a page. The method is POST, but I'm manually adding a GET parameter to the URL string depending on which button the user clicks. But when the form is submitted, the GET is being stripped off the URL.
I'm really baffled by this. This method has worked many times in the past, and this actual form itself used to work fine. Suddenly, the exact same (formerly working) code doesn't work.
I'm using Firefox Web Developer tools to look at which parameters are passed in the request, and there's no sign of the GET.
<form method="post" target="_blank">
<input type="hidden" name="report" value="abc">
...a couple Select form fields...
<input type="submit" action="reports.php?format=PDF" value="Go">
[<input type="submit" action="reports.php?format=preview" value="Web Preview">]
</form>
Basically, if they click "Go" they should get a PDF, and if they click "Web Preview" they get the same report as a web page; but the "format" parameter isn't received on the processing end of things.
(I've also tried it in multiple browsers.)
Edit to add: I can confirm that the POST data is being received on the processing end. Only the GET is missing.
Edit to add:
If I move the action to the <form> tag, it works. Of course that prevents me from having two buttons that do two things, so it doesn't solve the problem, but it's a clue to what might be happening. This DOES work:
<form method="post" action="reports.php?format=PDF" target="_blank">
<input type="hidden" name="report" value="abc">
...a couple Select form fields...
<input type="submit" value="Go">
<!-- [<input type="submit" action="reports.php?format=preview" value="Web Preview">] -->
</form>
The first place I would look would be to verify that the data is indeed being sent as a POST request. If, for any reason, the browser thinks the form should be using a GET request, it will quite happily delete and replace the hardcoded query string.
What I would suggest is doing a var_dump() on $_POST and $_GET in reports.php to get a definitive idea of what the browser is actually transmitting. There may be some clues in the output.
If the $_GET data is truly missing, I would then check to verify that no one has put a rewrite rule into place on the server to strip query strings off of PHP requests, or even requests to this specific page. As far as I am aware IIS does not normally strip query strings from POST requests, as this would go against well established standards, but it is always possible that rules were manually added to accomplish the same thing.
Solved -- In a submit <input>, an "action" attribute is invalid. I should have used "formaction":
<input type="submit" formaction="reports.php?format=PDF" value="Go">
Somewhere along the way an update to various web browsers must have stopped accepting "action".

Using Perl to update HTML

I am having trouble wrapping my head around getting Perl to work with HTML. I am trying to do something I think is simple, but I cant find anything like it online.
Let's say I have a blank web page that has only a button labeled new, and when I press it, I want to destroy the button and create two new buttons, one that is a submit button, and one cancel that creates the old new button.
How would I go about doing that, without reloading the page?
From my understanding, the original HTML code would look something like this.
<form action="/cgi-bin/switchButtons.cgi" method="POST">
<input type="button" value="new">
</form>
and afterward should look like this.
<form action="/cgi-bin/switchButtons.cgi" method="POST">
<input type="submit" value="submit">
<input type="button" value="cancel">
</form>
On pressing cancel, it should refer back to the first snippet.
You can't do that.
/cgi-bin/switchButtons.cgi is a Perl program on the server. Clicking on one of the form's buttons sends a request message to the server, which runs switchButtons.cgi. The output from that program is the contents of a new web page which is sent back to the client (the browser). Of course that involves loading a new page
You could do it in JavaScript, which is part of the page and runs on the client. You can specify that a button will cause the browser to execute some JavaScript, which could alter the page 9n any way you want. But that doesn't answer your question

Saving HTML input data to XML

I've searched through the forum and couldn't find a specific answer on my troubles.
What I want to do, is having a simple form, where a user can input information and then, when a button is pressed, get it saved on the server. And if its possible get the XML document saved with the name that specified in the first field.
I need to pull out the information in an app written in action script. Which is, sad to say, the only language I know properly.
I'm trying to get my information from this form (it should be bigger, but right now, I just need a working example):
<form action="" method="post" class="form">
Name: <input type="text" id="name" name="name">
<br>
Activity: <input type="text" id="activity1" name="activity1">
<br>
Activity: <input type="text" id="activity2" name="activity2">
<input type="submit" id="btnSub" name="btnSub" value="Save">
</form>
To be saved in a XML document.
And as said, everything is going to be on the server. If it helps anything.
I can't use ASP as one.com doesn't support this. :/
Hopefully some of you are able and willing to help me out.
I'll try to answer everything thats unclear.
This may be of help:
http://www.hardcode.nl/subcategory_1/article_431-xml-to-string-and-string-to-xml-in-javascript
You can then use an AJAX call in jQuery to send the data to PHP to save it if that is what you are needing.
EDIT: However, I do feel that it is much easier for this to be done server-side. I'm not great with PHP but it's very simple in .NET (unfortunately you explained you can't use this option).

Can we send email from static html page?

I have created one html static inquiry form and i want to write a code on submit action in which when we click on submit, One email will send on my account.
How can i write a code in static html form to send email in static html page?
Only HTTP(S) URIs are safe for use in form actions. You need a server side process to send email (even if it is an externally hosted, third party service). Attempts to do this purely client side are too unreliable to use.
You can't do this with pure static HTML. You'll need to use some sort of server side scripting, via an embedded language like PHP/Python/Perl/Ruby/etc., or a CGI handoff to a custom executable.
Unfortunately you cant automatically send a email from a html/static file, you would have to use some server technology to process the request and send the email.
its not to difficult to do though, so check out this tutorial from css tricks css tricks email in php tutorial
there is also the php docs here php.net docs for mail()
((The above is for PHP, see asp.net email if you are using asp.net
(there is also node, java, python etc, but php and c#.net are all I have experience in)
There is always the option to use mailto
<a href='mailto:myemail#me.com'>send an email</a> // etc
However this will only open up the users email client, so could put some users off (as well as making it unusable for people without an email client (although it can be used to open up web based clients such as gmail)) so not ideal.
Check out the answer posted here
https://stackoverflow.com/a/34653647/1609406
tl;dr
<form action="http://formspree.io/your#email.com" method="POST">
<input type="email" name="_replyto">
<textarea name="body">
</textarea>
<input type="submit" value="Send">
</form>