Member Avatar for sobias

*Note: I edited the title to ("Remember me" checkbox for HTML Forms) but it did not change.

Hi,

I'm trying to implement a Remember me feature for this form below. I'm using my demo website to login to another website. I did a couple of searches here on Dani's and in google but all I found was for php logins.

I understand that it deals with browser cookies and stuff. So, I hope someone could point me out to a simple tutorial.

<form action="http://someOtherwebsite.com/security/login" accept-charset="utf-8" method="post">                      
    <label>Username:</label> 
    <input class="field" maxlength="50" name="username" value="" type="text" id="form_username" />                       
    <label>Password:</label> 
    <input class="field" maxlength="50" name="password" value="" type="password" id="form_password" />                       
    <label><input id="rememberme" name="rememberme" value="remember" type="checkbox" /> &nbsp;Remember me</label>                      
    <input type="submit" name="submit" value="Login" class="bt_login" /> 
</form>
Edited by sobias
  • 3 Contributors
  • 6 Replies
  • 10K Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by sobias

Dani AI

Generated

"Remember me" can mean two different things: (1) remember the username on this page, or (2) keep the user signed in. Because your form posts to another domain, you cannot set or manage that site’s login cookies due to same-origin rules. What you can safely do on your page is remember the username (not the password) using localStorage, then prefill the field when the user returns. Also add autocomplete="username" and autocomplete="current-password" so the browser’s password manager can help.

<script>
document.addEventListener('DOMContentLoaded', function () {
  var u = document.getElementById('form_username');
  var r = document.getElementById('rememberme');
  var s = localStorage.getItem('rememberedUsername');
  if (s) { u.value = s; r.checked = true; }
  u.form.addEventListener('submit', function () {
    if (r.checked) localStorage.setItem('rememberedUsername', u.value.trim());
    else localStorage.removeItem('rememberedUsername');
  });
});
</script>

If your actual goal is to keep users signed in, that must be implemented by the target site: the server issues a long-lived session or refresh token via Set-Cookie with Secure, HttpOnly, and appropriate SameSite and expiration attributes, and rotates or revokes tokens on logout. Never store passwords in cookies or localStorage. For cross-site sign-in, use OAuth 2.0/OpenID Connect rather than posting credentials to another domain. See MDN on Web Storage (https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API), MDN on Set-Cookie (https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie), and OWASP Authentication Cheat Sheet (https://cheatsheetseries.owasp.org/cheatsheets/Authentication_Cheat_Sheet.html).

Recommended Answers

All 6 Replies

Member Avatar for cmps

Dear Sobias, the remember me check box is to create a cookie in the browser so the user stay logged in until he/she kill the cookie by logging out or if the cookie expires in x Days.
To do this from your website to login to another website:
- You have to check if the other website allows one to sign in from another website (example: facebook will not allow you)
- If it allows you, I suggest you to 'view-source' for the login page of the other website and save the form as it is. Of course you may change the style but make sure that if the form uses javascript, copy them as well.

I'm not sure if you want the php code for how to create a cookie since this topic is in the web design section, anyway I'am wondering why you want to let someone login to another website from your website ... If it's for testing it will be fine else, I recommend you to get a permission, because no one can trust logging to a website from another.

Member Avatar for sobias

Thanks for your reply.
Our class is doing a test project so we use this login for some purposes.
Anyway, my concern is the "Remember me" feature not how to implement a login for another website. I have checked many websites which have the "Remember Me" check box , but I couldn't find what's the code to implement this feature. If its a php code then of course I cant see it.
From your response , I can understand that this feature will need PHP to implement it correct ?
If so, I'll go ahead to the web dev section and ask.

Thanks again!

Member Avatar for cmps

yes sure ... html cant do this :) you can try php
good luck

Member Avatar for davidsonbelluso

I hope these comments were able to help you get this implemented onto your forums!

Member Avatar for sobias

Yep! Glad I found Daniweb 2 months ago.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.