Accept only one or more files in html form - html

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>

Related

Why can't I use "required" and "disabled" at the same time in radio input field?

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

Auto complete in HTML doesn't really work

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>

Building a login page

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/

Setup Spring and Spring-Security to use HTML file

In a web application, we don't want to use JSP files, we want to use only HTML files. Each view is a template.
I'm looking for a way to setup spring, spring security to use directly login.html file and if the user authentificates correctly the generic layout (top level, left level, right level and center level and south level) will be displayed.
What you are looking for is a natural templating solution where the templates are built directly in HTML and CSS with just some special atributes in the tags, but without the need for a set of XML tag libraries.
One solution that allows this is the Thymeleaf templating technology - Comparison of a Thymeleaf template with a JSP in a Spring application
this is how a template looks like:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Spring MVC view layer: Thymeleaf vs. JSP</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" media="all"
href="../../css/thvsjsp.css" th:href="#{/css/thvsjsp.css}"/>
</head>
<body>
<h2>This is a Thymeleaf template</h2>
<form action="#" th:object="${subscription}" th:action="#{/subscribeth}">
<fieldset>
<div>
<label for="email" th:text="#{subscription.email}">Email: </label>
<input type="text" th:field="*{email}" />
</div>
<div>
<label th:text="#{subscription.type}">Type: </label>
<ul>
<li th:each="type : ${allTypes}">
<input type="radio" th:field="*{subscriptionType}" th:value="${type}" />
<label th:for="${#ids.prev('subscriptionType')}"
th:text="#{'subscriptionType.'+${type}}">First type</label>
</li>
<li th:remove="all"><input type="radio" /> <label>Second Type</label></li>
</ul>
</div>
<div class="submit">
<button type="submit" name="save" th:text="#{subscription.submit}">Subscribe me!</button>
</div>
</fieldset>
</form>
</body>
</html>

IE9 form= attribute not working

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.