The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Username and Password Field
VaBoi25
post Feb 9 2017, 11:35 PM
Post #1





Group: Members
Posts: 8
Joined: 9-February 17
Member No.: 26,307



Hello all,

I am trying to create a login page for my website that requires users to enter a username and password. The password part is where I am getting hung up though. I need the passwords to contain special characters and the use of upper case letters. I am having a hard time finding the HTML code for this setup. Can anyone provide any assistance please? Thanks in advance.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
VaBoi25
post Feb 9 2017, 11:39 PM
Post #2





Group: Members
Posts: 8
Joined: 9-February 17
Member No.: 26,307



QUOTE(VaBoi25 @ Feb 10 2017, 12:35 AM) *

Hello all,

I am trying to create a login page for my website that requires users to enter a username and password. The password part is where I am getting hung up though. I need the passwords to contain special characters and the use of upper case letters. I am having a hard time finding the HTML code for this setup. Can anyone provide any assistance please? Thanks in advance.


*CORRECTION*

The login should not work unless the password is 7-9 characters, 2 numbers and 1 uppercase.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 10 2017, 07:21 AM
Post #3


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,582
Joined: 9-August 06
Member No.: 6



HTML can only create the form controls, the interface. The rest is programming.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Feb 10 2017, 07:25 AM
Post #4


.
********

Group: WDG Moderators
Posts: 7,561
Joined: 10-August 06
Member No.: 7



This can't be done with HTML alone, it requires server-side scripting (e.g. PHP).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
VaBoi25
post Feb 10 2017, 08:55 AM
Post #5





Group: Members
Posts: 8
Joined: 9-February 17
Member No.: 26,307



This is not for an actual "website" but just a learning opportunity. I am running my own code to test out the capabilities of this username and password functionality. Essentially, I am only running this code on a website that only works with the code I have on my computer if that makes any sense. With that being said.... is there still no way to do so?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Feb 10 2017, 09:34 AM
Post #6


.
********

Group: WDG Moderators
Posts: 7,561
Joined: 10-August 06
Member No.: 7



QUOTE(VaBoi25 @ Feb 10 2017, 02:55 PM) *

Essentially, I am only running this code on a website that only works with the code I have on my computer if that makes any sense.

You can run PHP on a local test server, or through e.g. XAMPP. But you can't use that with a web host that doesn't support server-side scripting.

Another option is javascript, but then security is almost non-existent.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
VaBoi25
post Feb 10 2017, 09:45 AM
Post #7





Group: Members
Posts: 8
Joined: 9-February 17
Member No.: 26,307



QUOTE(Christian J @ Feb 10 2017, 10:34 AM) *

QUOTE(VaBoi25 @ Feb 10 2017, 02:55 PM) *

Essentially, I am only running this code on a website that only works with the code I have on my computer if that makes any sense.

You can run PHP on a local test server, or through e.g. XAMPP. But you can't use that with a web host that doesn't support server-side scripting.

Another option is javascript, but then security is almost non-existent.



Ahh.. I see. Is there any way you can help me with understanding how to use either of these? I have never used either of those and wouldn't know the first thing about how to place them in my code.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
VaBoi25
post Feb 10 2017, 09:47 AM
Post #8





Group: Members
Posts: 8
Joined: 9-February 17
Member No.: 26,307



<!DOCTYPE html>
<html>
<head>
<!--

Login

Author: Merika Barnes
Date:

Filename: login.htm
-->
<meta charset="utf-8" />

<title>Login</title>
<link rel="stylesheet" href="styles.css" />
<script src="modernizr.custom.65897.js"></script>

</head>

<body>
<header>
<h1>
Login
</h1>
</header>

<article>
<div id="errorMessage"></div>

<form action="home.htm">
<fieldset id="deliveryinfo"></fieldset>

<label for="userID">UserID</label>
<input type="text" id="usernameID" name="userID" />
<label for="passwordinput">Password</label>
<input type="password" id="passwordinput" name="password" />
<input type="checkbox" id="rememberinput" name="remember" value="remember" />
<label for="rememberinput" id="rememberlabel">Remember me</label>
<fieldset id="submitbutton">
<input type="submit" id="submitBtn" value="Login" />

</fieldset>


</form>
</article>

</body>
</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
VaBoi25
post Feb 10 2017, 09:48 AM
Post #9





Group: Members
Posts: 8
Joined: 9-February 17
Member No.: 26,307



This is part of my code.... like I said.... im just playing around so I can improve my craft. Where and how would I place the PHP or XAMPP code?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Feb 10 2017, 10:22 AM
Post #10


.
********

Group: WDG Moderators
Posts: 7,561
Joined: 10-August 06
Member No.: 7



XAMPP is a program that you download and install: https://www.apachefriends.org/ I have no personal experience with installation, sorry.

For running PHP code, see http://php.net/manual/en/intro-whatis.php
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
VaBoi25
post Feb 10 2017, 11:51 AM
Post #11





Group: Members
Posts: 8
Joined: 9-February 17
Member No.: 26,307



What about using Javascript with REGEX? My question is where would I place the new code in my existing code in either case?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Feb 10 2017, 12:28 PM
Post #12


.
********

Group: WDG Moderators
Posts: 7,561
Joined: 10-August 06
Member No.: 7



QUOTE(VaBoi25 @ Feb 10 2017, 05:51 PM) *

What about using Javascript with REGEX?

That's placed in SCRIPT elements, as usual.

QUOTE
My question is where would I place the new code in my existing code in either case?

With a server-side script (like PHP) the form would submit to "home.htm" as specified by its ACTION attribute, the actual password script would be located in "home.htm".

With javascript, clicking the submit button could fire the script. The script might then display a previously hidden part of the page (that anybody can see by viewing source) or load another "secret" page (that again anybody could find by viewing source).


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
VaBoi25
post Feb 10 2017, 10:39 PM
Post #13





Group: Members
Posts: 8
Joined: 9-February 17
Member No.: 26,307



Hello all,

So, im trying to help a classmate of mine in her Web Design class. It has been a while since I have played with HTML so I was hoping to reach out to you all for some assistance. She is creating her "website" that will not run off of an actual "server". I just wanted to point that out. Her site is only visible to herself and those that she sends the HTML code to. A dummy site if you will. The requirements she needs may be fairly simple to you all. She needs her password field to administer constraints whenever the user enters a string of characters or numbers. More importantly, the password needs to have 7-9 characters, 2 numbers and 1 uppercase letter. In the most simple syntax, how could she accomplish this? I know Javascript is probably the best option, but this is all the help I could give. Any suggestions? I have left the code in the description as well in case anyone needed to see what has been done so far. Thanks in advance.








<!DOCTYPE html>
<html>
<head>
<!--

Login

Author:
Date:

Filename: login.htm
-->
<meta charset="utf-8" />

<title>Login</title>
<link rel="stylesheet" href="styles.css" />
<script src="modernizr.custom.65897.js"></script>

</head>

<body>
<header>
<h1>
Login
</h1>
</header>

<article>
<div id="errorMessage"></div>

<form action="home.htm">
<fieldset id="deliveryinfo"></fieldset>

<label for="userID">UserID</label>
<input type="text" id="usernameID" name="userID" />
<label for="passwordinput">Password</label>
<input type="password" id="passwordinput" name="password" />
<input type="checkbox" id="rememberinput" name="remember" value="remember" />
<label for="rememberinput" id="rememberlabel">Remember me</label>
<fieldset id="submitbutton">
<input type="submit" id="submitBtn" value="Login" />

</fieldset>


</form>
</article>

</body>
</html>



User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 10 2017, 11:35 PM
Post #14


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,582
Joined: 9-August 06
Member No.: 6



Why do you create a new thread about the same problem? That won't change anything.

Threads merged.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Feb 11 2017, 10:41 AM
Post #15


.
********

Group: WDG Moderators
Posts: 7,561
Joined: 10-August 06
Member No.: 7



QUOTE(VaBoi25 @ Feb 11 2017, 04:39 AM) *

im trying to help a classmate of mine in her Web Design class.

If this is a school assignment it should already indicate which scripting language to use. unsure.gif

QUOTE
She needs her password field to administer constraints whenever the user enters a string of characters or numbers. More importantly, the password needs to have 7-9 characters, 2 numbers and 1 uppercase letter. In the most simple syntax, how could she accomplish this?

This requires a relatively advanced javascript, perhaps together with Regex.

Or you might use an INPUT element together with the HTML5 PATTERN attribute and a Regex, but again this is pretty advanced.

In either case it's only use would be for form validation, not actual password protection.




User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 29th May 2017 - 08:33 PM