The Magical Magikarp Ответов: 2

Как добавить кнопку "Изменить" справа от поля пароля в HTML?

Привет! У меня есть страница профиля, которую я пытаюсь создать, и мне нужна помощь, чтобы добавить кнопку "Изменить" прямо рядом с полем пароля:
<!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">
					
				</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><br>
   </form>
</div>
</div>
</body>
</html>



В принципе, мне нужна кнопка "Изменить", которая будет помещена прямо рядом с полем пароля. Если кто-то может отредактировать мой код и сделать это, я буду очень признателен :)

Что я уже пробовал:

Я случайно удалил свои попытки..

2 Ответов

Рейтинг:
14

MadMyche

Все, что вам нужно сделать, это добавить ввод типа "кнопка" сразу после вашего поля пароля и перед элементом BReak, чтобы сохранить его на той же строке.

Возможно, вам придется настроить свой CSS для точной настройки местоположения, и вам придется добавить еще немного PHP чтобы на самом деле сделать что-то, когда он нажат

<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>

The Magical Magikarp

Как я перейду к новой ссылке при нажатии кнопки?

Christian Graus

Вы должны прочитать базовый учебник по HTML, вы, очевидно, еще не имеете ни малейшего представления о том, что вы делаете. Кнопка как метод onclick, по которому вы можете перемещаться. Якорный тег имеет атрибут

The Magical Magikarp

Да, я наконец-то узнал все, что должен знать на данный момент (JavaScript, PHP, Html, CSS) - Onclick теперь имеет для меня смысл, и я почти не использую href :) Спасибо!

Рейтинг:
0

Christian Graus

Я бы использовал библиотеку, такую как Bootstrap, создал сетку и поместил кнопку в ячейку, в которую я хочу ее поместить.

Это похоже на PHP, это 2019 год, так что я не могу помочь пройти мимо HTML

The Magical Magikarp

Не могли бы вы разместить ссылку на HTML-код? У меня было немного PHP в моем коде, чтобы получить имя пользователя, пароль и т. д.

Christian Graus

Вы не знаете, как писать html?

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

The Magical Magikarp

Я так и делаю, просто не могу разобраться в этой проблеме :D

The Magical Magikarp

Что вы имели в виду под "это 2019 год"?

Christian Graus

На самом деле это 2020 год, хороший выбор.