I have multiple forms on a complex page with fields separated by considerable intervening HTML. In firefox and chrome, I can declare a form and close it, then put a form="xxx" attribute in the fields to be associated with the form. This does not appear to work in IE9.
Here is a simplified example:
<?php
if (isset($_POST["field1"])) echo "Field1: " . $_POST["field1"] . "<br>";
if (isset($_POST["Btn1"])) echo "Btn1: " . $_POST["Btn1"] . "<br>";
if (isset($_POST["Btn2"])) echo "Btn2: " . $_POST["Btn2"] . "<br>";
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test Page</title>
<link rel="stylesheet" href="css/normalize.css" media="all">
<!--[if lt IE 9]>
<script src="js/html5shiv-printshiv.js" media="all"></script>
<![endif]-->
</head>
<body>
<form id="form1" action="Test.php" method="POST"></form>
<input type="text" form="form1" id="field1" name="field1" value="text input">
<button type="submit" form="form1" id="Btn1" name="Btn1" value="Btn1" title="Btn1">
Btn1</button>
<input type="submit" form="form1" id="Btn2" name="Btn2" value="Btn2" title="Btn2">
</body>
</html>
I have tried adding
< meta http-equiv="X-UA-Compatible" content="IE=9" >
... no change.
... anybody else run across this "feature" and how do I fix it?
There does not seem to be any information about support to the form attribute in Microsoft’s info on support to HTML5 forms. A quick test suggests that even IE 10 does not support it.
So consider simplifying the structure. Intervening HTML should not be a problem, as long as your are not trying to overlap or nest forms.
The form attribute is an HTML5 addition. It won't work in browsers too old to support HTML5.
You need to close the form tag after the fields, it should look like this:
<form id="form1" action="Test.php" method="POST">
<input type="text" form="form1" id="field1" name="field1" value="text input">
<button type="submit" form="form1" id="Btn1" name="Btn1" value="Btn1" title="Btn1">
Btn1</button>
<input type="submit" form="form1" id="Btn2" name="Btn2" value="Btn2" title="Btn2">
</form>
Add also labels to each field to make the form accessible.
Related
I use these codes for creating a form which accept one or more files. not zero files.
<form id="uploader">
<input type="file">
<button type="submit"></button>
</form>
but it's not working. How can I do that?
Use required and multiple attributes in your input field.
<input type="file" required multiple>
Example:
<form id="uploader">
<input type="file" required multiple>
<button type="submit">Submit</button>
</form>
To select multiple files, hold down the CTRL or SHIFT key while selecting.
use multiple attribute.
<html>
<head>
<meta charset="utf-8">
<title>Problem</title>
</head>
<body>
<!-- Insert form here -->
<form id="uploader">
<input type="file" multiple>
<button type="submit"></button>
</form>
</body>
</html>
I want to add required property in radio input field and here is my code
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<title>test radio</title>
<style>
div.radio{
background-color:silver;
}
</style>
</head>
<body>
<form action='procesPost.html' method='POST'>
<div class='radio'>
<input type='radio' required name='test' value=1>
<input type='radio' required name='test' value=2>
</div>
<input type='SUBMIT' value='submit'>
</form>
</body>
</html>
It works well,I have to select one radio to submit, However, if I want to disable one radio, the required constraint will not work
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<title>test radio</title>
<style>
div.radio{
background-color:silver;
}
</style>
</head>
<body>
<form action='procesPost.html' method='POST'>
<div class='radio'>
<input type='radio' required name='test' value=1>
<input type='radio' required disabled name='test' value=2>
</div>
<input type='SUBMIT' value='submit'>
</form>
</body>
</html>
Now, I can submit the form even though I didn't select any radio.
I wonder why this would happen and how could I solve this problem?
I tested my code in FierFox 32.0.3, RHEL6.2
According to CBroe:
www.w3.org/TR/html5/forms.html#enabling-and-disabling-form-controls:-the-disabled-attribute:
Constraint validation: If an element is disabled, it is barred from constraint validation.
http://www.w3.org/TR/html5/forms.html#barred-from-constraint-validation:
A submittable element is a candidate for constraint validation except when a condition has barred the element from constraint validation.
And finally, from the list of Constraint validation steps, http://www.w3.org/TR/html5/forms.html#constraint-validation:
3.1: If field is not a candidate for constraint validation, then move on to the next element.
That means, a disabled element will just be “passed over” when form validity is checked.
It doesn’t trigger any errors, and has no influence whatsoever on the validation state of the form it belongs to.
The comment is in this link.
https://stackoverflow.com/a/30533215
I'm just testing with a simple log-in page. Here are 3 text-forms.
Username, EmailAddress, Password.
When I put the value in there, hit the submit,and auto-complete works for only 2 of them. And the form (EmailAddress) is not filled at all.
I just couldn't figure out why auto-complete is not working at EmailAddress.
<!DOCTYPE html>
<html>
<head>
<title>Log in Page</title>
</head>
<body>
<form action="login.php" method='post'>
<p><strong>Login Page </strong></p>
<p>Username:<input name="username" type="text" ></p>
<p>EmailAddress:<input name="email" type="text" ></p>
<p>Password:<input name="password" type="password""></p>
<p><input type="submit" name="Submit" value="Login"></p>
</form>
</body>
</html>
Try setting the autocomplete value. It should default to on, but I'd try adding it.
It's also possible your browser has already recorded the data for the autocomplete (as it seems by the image at least), which could mean the browser no longer tries to find anything. Try renaming all the fields and the form (just to test it out, of course) and see if your browser inquires you to save the form data upon submission.
<!DOCTYPE html>
<html>
<head>
<title>Log in Page</title>
</head>
<body>
<form action="login.php" method='post'>
<p><strong>Login Page </strong></p>
<p>Username:<input name="username" type="text" ></p>
<p>EmailAddress:<input name="email" type="text" autocomplete="on"></p>
<p>Password:<input name="password" type="password""></p>
<p><input type="submit" name="Submit" value="Login"></p>
</form>
</body>
</html>
Does anyone have a good start for a simple front end html login? I am pretty new with html and coding in general. Also how do I connect the login with my other work such as the database?
<html>
<head>
<title>
Login page
</title>
</head>
<body>
<form name="login">
Username<input type="text" name="userid"/>
Password<input type="password" name="pswrd"/>
<input type="button" onclick="check(this.form)" value="Login"/>
<input type="reset" value="Cancel"/>
</form>
</body>
</html>
that is just a pretty simple login form with no css to it, but I would just go to bootstrap and use their login form at http://getbootstrap.com/examples/signin/
I want href will work on type="button"in IE8.
<input type="button" value="Submit" class="button" />
Other browser working fine but on IE8 the code above not working. How to fix it?
Update
<form action="submit.php" method="post"">
<input type="submit" value="Submit" class="button" />
</form>
I know this way can be done. But I want to know other ways how to make it work on IE8 without to have the <form></form>
onclick="window.location=this.parentNode.href;"/>
this.parentNode can refer to a tag so... it should work or test getAttribute even
why not use
<form action="submit.php" method="get">
<input type="button" value="Submit" class="button" />
</form>
?
I used to be all happy that IE8 was not IE6. But seriously.
I'm using jQuery to patch up any button tag within an <a> link tag, inside conditional tags so it's just for old IEs.
<!--[if lt IE 9]>
<script type="text/javascript">
// IE8 is the new IE6. Patch up http://stackoverflow.com/questions/2949910/how-to-make-href-will-work-on-button-in-ie8
$('button').click(function(){
document.location = $(this).parents('a').first().prop('href');
});
</script>
<![endif]-->