How do I add a "change" button to the right of the password field in HTML?

Question

0.00/5 (No votes)

See more:

Hi! I have a Profile Page, that I am trying to make, and I need some help adding a "Change" button right next to the password field:

<!DOCTYPE html>
<html>
<head>
    <link rel="icon" href="icon.ico">
  <Title>
    Home - Momoro
    </Title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

.topnav-right {
  float: right;
}
.login {
  	width: 400px;
  	background-color: #ffffff;
  	box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
  	margin: 100px auto;
}
.login h1 {
  	text-align: center;
  	color: #5b6574;
  	font-size: 24px;
  	padding: 20px 0 20px 0;
  	border-bottom: 1px solid #dee0e4;
}
.login form {
  	display: flex;
  	flex-wrap: wrap;
  	justify-content: center;
  	padding-top: 20px;
}
.login form label {
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	width: 50px;
  	height: 50px;
  	background-color: #3274d6;
  	color: #ffffff;
}
.login form input[type="password"], .login form input[type="text"] {
  	width: 310px;
  	height: 48px;
  	border: 1px solid #dee0e4;
  	margin-bottom: 20px;
  	padding: 0 15px;
}
.login form input[type="submit"] {
  	width: 100%;
  	padding: 15px;
 	margin-top: 20px;
  	background-color: #3274d6;
  	border: 0;
  	cursor: pointer;
  	font-weight: bold;
  	color: #ffffff;
  	transition: background-color 0.2s;
}
.login form input[type="submit"]:hover {
	background-color: #2868c7;
  	transition: background-color 0.2s;
}
</style>
</head>
<body>

<div class="topnav">
  <a href="/">Home</a>
  <a href="products.php">Products</a>
  <a class="active" href="profile.php">Account</a>
  <a href="contact.php">Contact</a>
      <div class="topnav-right">
        <a href="logout.php">Logout</a>
  </div>
</div>

<div style="padding-left:16px">
  <div class="login">
    <form>
  				<label for="username">
					class="fas fa-user">
				</label>
				<input type="text" name="username" placeholder="<?=$_SESSION['name']?>" id="username" disabled><br>
				<label for="password">
					class="fas fa-lock">
				</label>
				<input type="password" name="password" placeholder="<?=$password?>" id="password" disabled><br>
   </form>
</div>
</div>
</body>
</html>

Basically, I need a 'change' button to be placed right next to the password field. If anyone can edit my code and do that, I'd highly appreciate it :)

What I have tried:

I accidentally deleted my attempts..

Posted 3-Jan-20 12:58pm

The Magical Magikarp

Updated 3-Jan-20 19:13pm

v2

Add a Solution

2 solutions

Solution 1

I would use a library like Bootstrap, create a grid, and put the button in the cell I want it in.

This looks like PHP, it's 2019, so I can't help past the HTML

Posted 3-Jan-20 15:56pm

Christian Graus

Comments

The Magical Magikarp 3-Jan-20 23:31pm

Could you post a link to the HTML? I had some PHP in my code, to get Username, password, etc.

Christian Graus 3-Jan-20 23:42pm

You don't know how to write html?

https://getbootstrap.com/docs/4.0/layout/grid/

The Magical Magikarp 3-Jan-20 23:55pm

I do, I just can't figure this problem out :D

The Magical Magikarp 5-Jan-20 3:30am

What did you mean "it's 2019"?

Christian Graus 5-Jan-20 16:04pm

It's actually 2020, good call.

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

MadMyche · Accepted Answer · 2020-01-03T19:13:00

All you need to do is add an input of a "button" type immediately after your password field, and before the BReak element to keep it on the same line.

You may need to tweak your CSS to fine tune location, and you are going to have to add in some more PHP to actually do something when it is clicked on

HTML

<form>
	<label for="username"></label>
	<input type="text" name="username" placeholder="<?=$_SESSION['name']?>" id="username" disabled>
	<br>
 	<label for="password"></label>
	<input type="password" name="password" placeholder="<?=$password?>" id="password" disabled>

	<!-- Insert this line between your PW field and the BR -->
	<input type="submit" name="ChangePW" value="Change">

	<br>
</form>