When I Press Login button one popup is shown.
In that popup I need default autofocus on Login Input field. Can I achieve that with HTML5/CSS only?
jsfiddle
<div class="main">
<div class="panel"> Log In
</div>
</div>
<!-- popup form #1 -->
<div class="popup">
<h2>Welcome Guest!</h2>
<p>Please enter your login and password here</p>
<div>
<label for="login">Login</label>
<input type="text" id="login" value="" autofocus />
</div>
<div>
<label for="password">Password</label>
<input type="password" id="password" value="" />
</div>
<input type="button" value="Log In" /> <a class="close" href="#close"></a>
</div>
autofocus is defined to work reliably only on page load. It is not really suited for situations where you are swapping, or opening, or unhiding DOM elements such as in a single-page application framework. You are likely to have to resort to handling the autofocusing yourself.
The Answer is not really effectively (with certainty).
I would suggest Javascript, as UnskilledFreak mentioned, on every click the focus is set
...
Log In
...
<!-- not javascript library needed -->
<!-- tested on Win7 and Chrome 37+ -->
Here is your fiddle updated: http://jsfiddle.net/6f9ge64f/2/
You should probably also check key-input for people that don't use a mouse.
Update:
it's a bit hacky, but you could try
...
Log In
...
<input type="text" id="login" value="" autofocus />
...
<a class="close" href="PATH-TO-FILE?c=2#close"></a>
...
<!-- tested with on Win7 and Chrome 37+ -->
where the PATH-TO-FILE is for example http://www.test.com/default.html (absolute or relative), and the ?c=1 and ?c=2 is any parameter, just to provoke a reload. like this you could use autofocus.
THIS WONT WORK IN JSFIDDLE since the HTML is embedded, but it works in the "real-world".
Update 2:
...
Log In
<!-- tested with on Win7 and Chrome 37+ -->
...
Here is the fiddle http://jsfiddle.net/6f9ge64f/6/
If you are using jQuery do something like this:
$( "#login-button" ).click(function() {
$( "#input" ).focus();
});
Autofocus attribute moves the focus to the specified input on page load. In this case #input is present in DOM but hidden; on clicking login button, the focus is removed.
Should probably use .focus() on the login click event handler
<input type="text" id="login" value="" />
<input type="text" id="login" value="" autofocus />
<input type="text" id="login" value="" />
http://jsfiddle.net/6f9ge64f/4/
autofocus works only on standard pageload, If you are using javascript/angular/react/jquery to modify elements after page load the active element changes, and autofocus wont work.
What I do is I wait for all the dom elements to load and process then set the active element
<script type="text/javascript">
$(document).ready(function() {
setTimeout(function() {
$("#input-field").focus();
}, 1500);
});
</script>
Related
I have an HTML form, which consists of few divs, and there are label and input inside every div.
So for name and email inputs I want to add "required" property. But when I set it and then submit the form, I instantly start running the form action, even if my inputs were empty. So that's first time I face with such a trouble. It's also the first time when I put divs inside the form, but it seems like it should work anyway.
So you can see my code below:
<section>
<form id="feedback_form" method="POST" action="{% url 'feedback' %}">
<div class="field half first">
<label for="name">Name*</label>
<input type="text" name="name" id="name" required/>
</div>
<div class="field half">
<label for="email">Email*</label>
<input type="email" name="email" id="email" required/>
</div>
<div class="field">
<label for="message">Message</label>
<textarea name="message" id="message" rows="5"></textarea>
</div>
<button class="button submit" type="submit">Send</button>
</form>
</section>
So I solved this. It was an issue with some implicit javascript code on page (I usually work with backend, so haven't made this page by myself before).
So in .js file I found such part of script which disallowed submitting form in a standard way.
$('form').on('click', '.submit', function(event) {
event.stopPropagation();
event.preventDefault();
$(this).parents('form').submit();
});
So my advice: if you work with code written by others, do some more research and check files few times if you can't solve some implicit tasks.
If you write <input type="search"> in HTML5, the keyboard of the input in safari on iOS is as follows.
Submit button is "search".
By the way, I am trying to create a search form in Nuxt.js as well and mark it up in component as below.
<div class="search-form">
<form
#submit.prevent
#keyup="onKey($event)">
<input
v-model="keyword"
:placeholder="search form"
type="search"
#keypress="setCanMessageSubmit($event)">
</form>
</div>
However, the keyboard shows "return" instead of "search" as shown below.
Why is this?
Is there a way to solve it?
Try adding action attribute to your form tag.
<div class="search-form">
<form
action="."
#submit.prevent
#keyup="onKey($event)">
<input
v-model="keyword"
:placeholder="search form"
type="search"
#keypress="setCanMessageSubmit($event)">
</form>
</div>
My fiddle: https://jsfiddle.net/pompopo/2b0yc6oq/7/
I have an <a> link which will only open if I right click it and click on "open in a new tab. If i just click it normally it just puts a "?" after the rest of the link, like this: "http://localhost:8011/login.html?".
Code:
<div class="login-page">
<div class="form">
<form class="login-form">
<input type="text" placeholder="Username" />
<input type="password" placeholder="Password" />
<button class="login">login</button>
<p class="message">Not registered? Create an account</p>
</form>
</div>
</div>
If i put target="_self" it still doesn't work. The two files are definitely in the same folder.
Your HTML is invalid. It is forbidden to put a <button> inside an <a>. Use a validator.
The effect you see is due to error recovery reacting badly and your clicks being handled by different elements.
will only open if I right click it and click on "open in a new tab
This is what happens when you right click on the <a> element.
If i just click it normally it just puts a "?" after the rest of the link
This is what happens when you submit a form using a submit button (and the form has no successful controls in it, which is the case here because none of your controls have names).
If you want a link, then use a link and only a link. Get rid of the <button> element.
If you want something that looks like a button then first think about what message you are sending to the user. Buttons do things. Links go places. Giving the user a visual signal that they are doing something is likely to be wrong.
If you still want a link that looks like a button, then style it with CSS.
That said, having a link marked Login which doesn't submit the form is just confusing. You should probably:
Keep the <button>
Get rid of the <a>
Give your form controls name attributes
Make the form use method="POST"
… and then write server side code to process the data so the login form can be used to login to the site.
You can change your HTML form to be as follows so that the form is submitted when login is clicked:
<div class="form">
<form class="login-form" method="POST" action="index.html">
<!-- user inputs -->
<input type="text" name="username" placeholder="Username" />
<input type="password" name="password" placeholder="Password" />
<!-- your submit button -->
<input type="submit" name="submit" value="login">
<!-- your other link -->
<p class="message">Not registered? Create an account</p>
</form>
</div>
This approach will be better than the current one for creating a login form.
This way you still have your button that will redirect to index.html without having to use a messy approach with <a> and <button>.
It's because you've a button, and it's trying to submit the form.
Try using bootstrap and give the <a> tag some classes, like this:
<div class="login-page">
<div class="form">
<form class="login-form">
<input type="text" placeholder="Username" />
<input type="password" placeholder="Password" />
login
<p class="message">Not registered? Create an account</p>
</form>
</div>
</div>
Or just give style to your <a> by css, but if you use the button, then you're submitting the form instead clicking the link.
EDIT: you could also wrap the <a> inside the button, so the link on the <a> will execute first instead of submitting the form
<button class="login">login</button>
I have a form with the following code:
<form name="form" method="post" action="https://pilot.datatrans.biz/upp/jsp/getCcAliasFormMod.jsp" id="form_payment_cc" name="uppform">
<label for"cvv">CVV</label><br />
<input type="text" size="4" id="cvv" name="cvv" value="" required="required" />
<p></p>
<div class="order">
<div></div> <div><img src="/images/pfeil_orange.png" style="margin-left: 30px;"><strong>Weiter</strong></div>
</div>
<input type="hidden" id="form__token" name="form[_token]" value="LaBK9OAZyhjENzWmCiCokS0kGXgFmbPNm7v1lo1LuRs" />
</form>
The form contains elements with the required="required" attribute. Unfortunately, for design reasons, I cannot use <input type="submit" /> to submit a form. Instead, I use <a onclick="form.submit()"></a>. HTML validation does not work when I try to submit this way.
Any ideas as to why? Are there ways to trigger HTML validation without using a submit button (I know that everything works when I use a regular submit button)?
You can try <a onclick="if(form.checkValidity()) form.submit()"></a>
Though it might be better to use CSS to apply your custom design and use native buttons.
Update:
It seems a regular button is required to trigger native validation. So a possible solution would be to use a hidden button and trigger a click using JS:
<form>
<input name="email" type="email" title="Enter your email" required />
<input id="sumbitBtn" type="submit" style="position: absolute; left: -9999px" />
Submit
</form>
For a CSS based solution (no JS required) using a regular button check this fiddle
If you want to display the native error messages that some browsers have (such as Chrome), unfortunately the only way to do that is by submitting the form, like this:
<form id="myform" action="" method="POST">
submit
</form>
and then:
window.onload = function() {
document.getElementById('mylink').onclick = function() {
document.getElementById('myform').submit();
return false;
};
};
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