I was developing a simple HTML form and I couldn't figure out why the following code works on Chrome but not in Firefox.
<!DOCTYPE html>
<html>
<body>
<form action="/hello.html" method="get">
<input type="submit" value="Submit">
</form>
</body>
</html>
After a while I figured out that the issue is the slash in the action url.
When the form action starts with a forward slash ('/'), the form is not submitted in firefox.
Without '/' from the action tag, pressing the 'submit' button results in a redirect to the hello.html page.
For me this behaviour is weird. I think it is valid to start a (relative) URL in the action attribute of a form tag with a forward slash.
Do you have some explanation for this behaviour?
It works in Google Chrome because Chrome is forgiving (or smart). What you actually mean is either:
<form action="hello.html" method="get">
or
<form action="./hello.html" method="get">
What's the difference to /hello.html?
Let's assume the URI of your file is file:///c:/somedir/index.html
./hello.html and hello.html both resolve to file:///c:/somedir/hello.html since they refer to the current directory.
But /hello.html resolves to file:///c:/hello.html because according to http://www.ietf.org/rfc/rfc2396.txt (page 16)
A relative reference beginning with a single slash character is termed
an absolute-path reference ...
The following example works. I am not sure why your code doesn't work.
<html>
<body>
<form action="/my-handling-form-page" method="post">
<div>
<label for="name">StackOverflow name:</label>
<input type="text" id="name" />
</div>
<label for="mail">Email:</label>
<input type="email" id="mail" />
</div>
</form>
</body>
</html>
However, when I removed <!DOCTYPE html> from your code, it started working too.
Related
I have a form and an input outside of the form. The input is linked to the form.
I have tested this on Chrome and it works but on IE it does not.
Is this a known bug? Is there a link to the bug? PS: I don't need a solution I just need a confirmation that only IE behaves like this and perhaps a page where the bug is described or maybe a page where it says that it is function as design.
UPDATE
The bug that I am referring is this: When you enter some text on this input and press enter key I would expect for the form to submit. (as state previously on chrome it works as expected while on IE it does not)
Here is a code: go to the second input and press enter: In Chrome/Firefox/Opera the message submit called is displayed while in IE/Edge it does not.
function submitForm(e) {
alert('Submit called');
e.stopPropagation();
e.preventDefault();
return false;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<form onsubmit="submitForm()" id="bugForm">
<input type="text" name="name" />
<input id="submitButton" type="submit" value="submit" />
</form>
<hr>
<input type="text" name="another" id="another" form="bugForm" />
</body>
</html>
You did not posted your sample code, So we cannot accurately say what you are doing in your code and why it is not working in IE.
If we assume like you have any input tag outside your form and you want to submit a form by pressing enter key on that input control than it should not submit the form because it is not inside the form tag. In that way IE is working correctly and it should not consider as a bug.
If you have a requirement to do that than you can try to refer an example below will work with IE.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<form action="something.php">
<input type="text" name="name" />
<input id="submitButton" type="submit" value="submit" />
</form>
<hr>
You can click this ->
<label for="submitButton">Submit</label><br>
Or You can click ->
<input type="submit" onclick="document.forms[0].submit();" />
</body>
</html>
For Reference, You can refer links below.
(1) Form not working in Internet Explorer
(2) Submit form using a button outside the tag
I found a page where indeed an input outside of a form is not supported (HTML5).
http://html5test.com/
I am learning HTML from w3schools HTML Tutorial - The Best in Class Tutorial
I come across one HTML form example which sends an email.
Please note that currently neither do I nor w3schools is going for server side input processing, so you also don't think about server side processing while considering my question.
Below is the code of HTML example :
<!DOCTYPE html>
<html>
<body>
<h2>Send e-mail to someone#example.com:</h2>
<form action="mailto:someone#example.com" method="post" enctype="text/plain">
Name:<br>
<input type="text" name="name"><br>
E-mail:<br>
<input type="text" name="mail"><br>
Comment:<br>
<input type="text" name="comment" size="50"><br><br>
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>
</body>
</html>
Normally I see a .php or .asp filename in action attribute of a form but in above example it's mailto:someone#example.com.
I want to know what is it and why they have not used a .php or .asp file-name as they normally do?
Please someone explain me.
Thank You.
You are basically giving the users browser the job of handling the mailto request. The browser usually starts the users mail client and fills in the fields according to the input of your form.
I have the following simple HTML:
<!doctype html public "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Foo</title>
<body>
<form method="get" action="http://example.com">
<input type="hidden" id="go">
<div>
<label for="userid">Userid:</label>
<input type="text" id="userid">
</div>
<div>
<input type="submit" value="Login">
</div>
</form>
</body>
</html>
I validated this with W3C's online validator: all that it doesn't like is the hidden input element not being inside a div, p or some such.
When this page is loaded and the form is filled and submitted, it goes to the exact URL http://example.com, without any form parameters.
This happens whether I serve it as a static page from a server, output it out of a CGI script or access it as a local document using file://... on my desktop box. The behavior is the same using Firefox 43.0.4 on Windows 7, IE 11, or FF 42.0 on Ubuntu 12.
What is missing to make it produce something like http://example.com?go&userid=whatever?
You haven't use name attributes in input fields.
I have html file like this:
<!DOCTYPE html>
<html>
<head>
<title>HTML Form</title>
</head>
<body>
</body>
</html>
<FORM action="/wsd/html_form_check" method="post">
<P>
//INPUTS AND LABES AND THINGS
<INPUT type="submit" value="Send">
</P>
</FORM>
Now I get an error saying
AssertionError: Invalid form action.
I suppose it has something to do with the
<FORM action="/wsd/html_form_check" method="post">
I was told that the HTTP request should look like this:
POST /wsd/html_form_check HTTP/1.1
Host: 127.0.0.1
So what am I doing wrong? Any help is appreciated!
Thanks!
A bit late, but I had to deal with the same issue.
Consider the following piece of HTML code:
<form id="file_uploader" action="/Home/Upload" class="dropzone">
<div class="fallback">
<input name="file" type="file" multiple />
</div>
</form>
In the development environment it runs fine. However, deploying it to IIS anywhere else but the root website will cause the action URL to become invalid. For instance, if it were deployed to https://example.com/deployed_app, then the actual action URL that the form will call is https://example.com/Home/Upload, which is invalid.
The solution is to change the action URL to this:
<form id="file_uploader" action="~/Home/Upload" class="dropzone">
If you're trying to send the data entered in the form to "html_form_check" you haven't used the file extension such as .php or .js. Try adding the file extension and see if that helps !
I have this piece of code:
<div>
<form name='profileForm' id='profileForm' action='' method='get'>
<input type='submit' name='ProfileBtn' id='ProfileBtn' class='buttonC' value='My Profile' />
</form>
<br />
<form name='logoutForm' id='logoutForm' action='' method='get'>
<input type='submit' name='LogOutBtn' id='LogOutBtn' class='buttonC' value='Logout' />
</form>
</div>
When I render the above the "profileForm" does not appear (although the profileBtn DOES appear).
the seconed form has no problems, which is weird because they are both similar.
It's probably an easy question but I have no idea what's the problem.
This just happened to me using Chrome -- it was because I had a form within a form. It looks like Chrome just stripped out the <form> open and close tag because my form was within another form. When I moved one form outside of the other, then both <form> tags were rendered in the html as intended.
Crackermann was getting at this in his answer too.
It's hard to give a direct solution without seeing your full html, but I'm guessing this is your problem - you need to make sure your form is not within another form. Really simple example to illustrate this:
Form within another form, notice if you run this code in Chrome and inspect <form id="form2"> is not rendered:
<html>
<head></head>
<body>
<form id="form1">
<div>form within a form</div>
<form id="form2">
<input type="text" placeholder="name" /><br/>
<input type="text" placeholder="title" />
</form>
</form>
</body>
</html>
If you move form2 outside of form1, run the code in Chrome and inspect, then <form id="form2"> is rendered:
<html>
<head></head>
<body>
<form id="form1">
<div>form2 moved outside of form1</div>
</form>
<form id="form2">
<input type="text" placeholder="name" /><br/>
<input type="text" placeholder="title" />
</form>
</body>
</html>
well then somehow there was a weird problem with the forms, the button didn't show up because when i ran the website the the 'profileForm' just disappeared somehow (and didn't show up in the console).
what i did was adding a third Form before 'profileForm' which somehow solved this.
There is an unclosed HTML TAG like < form > in your code before these lines ,
Find and close that form
OR
just put </form> before your code.
Just put a empty form on top of your form.
Then all forms will be appear with form id
<form></form>
<form name='profileForm' id='profileForm' action='' method='get'>
<input type='submit' name='ProfileBtn' id='ProfileBtn' class='buttonC' value='My Profile' />
</form>
<form name='logoutForm' id='logoutForm' action='' method='get'>
<input type='submit' name='LogOutBtn' id='LogOutBtn' class='buttonC' value='Logout' />
</form>
Check that you don't an unclosed form element before your next form open.
If you do, browsers will generate the source without displaying the subsequent form open and form close pair.
Try viewing your Page Source
For Mac users
Option + Command + U
For Windows users
Ctrl + U
Then check for any unclosed <form> tag above your specified <form> tag and close it.
It works for me, hope it works for you too