Как добавить ссылку в текстовое поле с помощью jquery или любых других методов. У меня есть форма для входа в систему, в котором имя пользователя и пароль имеют забытую ссылку, как добавить ссылку внутри текстового поля.Как разместить ссылку на забытый пароль внутри текстового поля пароля
похож как PAYPAL страница входа: https://www.paypal.com/ca/webapps/mpp/home
Это то, что он выглядит следующим образом:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css"></style>
<style type="text/css">
.div-0-mbi { border-color: rgb(102, 102, 102); color: rgb(102, 102, 102); font-family: Arial, Helvetica, sans-serif; font-size: 13px; height: 25px; margin-top: 9px; outline-color: rgb(102, 102, 102); text-align: right; text-decoration: none; width: 510px; -webkit-column-rule-color: rgb(102, 102, 102); -webkit-font-smoothing: antialiased; -webkit-perspective-origin-x: 255px; -webkit-perspective-origin-y: 12.5px; -webkit-text-emphasis-color: rgb(102, 102, 102); -webkit-text-fill-color: rgb(102, 102, 102); -webkit-text-stroke-color: rgb(102, 102, 102); -webkit-transform-origin: 255px 12.5px; }
.div-1-mbi { float: left; height: 26px; margin-right: 8px; position: relative; width: 180px; -webkit-perspective-origin-x: 90px; -webkit-perspective-origin-y: 13px; -webkit-transform-origin: 90px 13px; }
.label-2-mbi { border-color: rgb(145, 145, 145); color: rgb(145, 145, 145); cursor: text; display: block; font-family: 'lucida grande', 'lucida sans unicode', arial, sans-serif; font-size: 11px; height: 15px; left: 12px; outline-color: rgb(145, 145, 145); position: absolute; text-decoration: none; text-shadow: rgba(255, 255, 255, 0.701961) 0px 1px 0px; top: 6px; width: 29px; z-index: 2; -webkit-column-rule-color: rgb(145, 145, 145); -webkit-perspective-origin-x: 14.5px; -webkit-perspective-origin-y: 7.5px; -webkit-text-emphasis-color: rgb(145, 145, 145); -webkit-text-fill-color: rgb(145, 145, 145); -webkit-text-stroke-color: rgb(145, 145, 145); -webkit-transform-origin: 14.5px 7.5px; }
.input-3-mbi { background-clip: padding-box; background-color: rgb(222, 222, 222); border: 1px solid rgb(87, 169, 217); border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; box-shadow: rgba(255, 255, 255, 0.14902) 0px 1px 0px 0px, rgba(58, 144, 194, 0.6) 0px 0px 5px 0px, rgba(0, 0, 0, 0.2) 0px 2px 2px 0px inset; box-sizing: border-box; color: rgb(51, 51, 51); font-family: 'lucida grande', 'lucida sans unicode', arial, sans-serif; font-size: 11px; height: 26px; margin: 0px; outline-color: rgb(51, 51, 51); padding: 0px 55px 0px 10px; text-decoration: none; text-shadow: rgb(214, 214, 214) 0px 1px 0px; text-overflow: ellipsis; width: 180px; -webkit-appearance: none; -webkit-background-clip: padding-box; -webkit-box-shadow: rgba(255, 255, 255, 0.14902) 0px 1px 0px 0px, rgba(58, 144, 194, 0.6) 0px 0px 5px 0px, rgba(0, 0, 0, 0.2) 0px 2px 2px 0px inset; -webkit-column-rule-color: rgb(51, 51, 51); -webkit-perspective-origin-x: 90px; -webkit-perspective-origin-y: 13px; -webkit-text-emphasis-color: rgb(51, 51, 51); -webkit-text-fill-color: rgb(51, 51, 51); -webkit-text-stroke-color: rgb(51, 51, 51); -webkit-transform-origin: 90px 13px; -webkit-transition: border 0.2s ease-in-out 0s, background-color 0.2s ease-in-out 0s; transition: border 0.2s ease-in-out 0s, background-color 0.2s ease-in-out 0s; }
.span-4-mbi { }
.a-5-mbi { background-color: rgb(118, 118, 118); border-color: rgb(255, 255, 255); border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; box-sizing: border-box; color: rgb(255, 255, 255); display: block; font-size: 10px; font-weight: 600; height: 18px; line-height: 18px; outline-color: rgb(255, 255, 255); padding-left: 6px; padding-right: 6px; position: absolute; right: 4px; text-decoration: none; text-shadow: rgba(0, 0, 0, 0.247059) 0px -1px 0px; top: 4px; width: 45px; -webkit-column-rule-color: rgb(255, 255, 255); -webkit-perspective-origin-x: 22.5px; -webkit-perspective-origin-y: 9px; -webkit-text-decorations-in-effect: none; -webkit-text-emphasis-color: rgb(255, 255, 255); -webkit-text-fill-color: rgb(255, 255, 255); -webkit-text-stroke-color: rgb(255, 255, 255); -webkit-transform-origin: 22.5px 9px; }
.div-6-mbi { display: none; height: auto; width: auto; -webkit-perspective-origin-x: 50%; -webkit-perspective-origin-y: 50%; -webkit-transform-origin: 50% 50%; }
.p-9-mbi { line-height: 19px; margin-bottom: 8px; margin-top: 8px; }
.a-12-mbi { background-image: -webkit-linear-gradient(bottom, rgb(191, 191, 191) 0%, rgb(191, 191, 191) 20%, rgb(224, 224, 224) 100%); border-color: rgb(86, 86, 86) rgb(77, 77, 77) rgb(62, 62, 62); border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-style: solid; border-width: 1px; border-top-left-radius: 5px; border-top-right-radius: 5px; box-shadow: rgb(236, 236, 236) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.2) 0px 1px 0px 0px; color: rgb(51, 51, 51); cursor: pointer; display: inline-block; font-size: 11px; font-weight: bold; height: 15.998481750488281px; line-height: 15.998481750488281px; margin-left: 2px; margin-right: 4px; min-width: 44px; outline-color: rgb(51, 51, 51); padding: 4px 8px; position: relative; text-align: center; text-decoration: none; text-shadow: rgb(224, 224, 224) 0px 1px 0px; -webkit-box-shadow: rgb(236, 236, 236) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.2) 0px 1px 0px 0px; -webkit-column-rule-color: rgb(51, 51, 51); -webkit-text-decorations-in-effect: none; -webkit-text-emphasis-color: rgb(51, 51, 51); -webkit-text-fill-color: rgb(51, 51, 51); -webkit-text-stroke-color: rgb(51, 51, 51); }
.label-14-mbi { border-color: rgb(62, 62, 62); color: rgb(62, 62, 62); cursor: text; display: block; font-family: 'lucida grande', 'lucida sans unicode', arial, sans-serif; font-size: 11px; height: 15px; left: 12px; outline-color: rgb(62, 62, 62); position: absolute; text-decoration: none; text-shadow: rgba(255, 255, 255, 0.701961) 0px 1px 0px; top: 6px; width: 51px; z-index: 2; -webkit-column-rule-color: rgb(62, 62, 62); -webkit-perspective-origin-x: 25.5px; -webkit-perspective-origin-y: 7.5px; -webkit-text-emphasis-color: rgb(62, 62, 62); -webkit-text-fill-color: rgb(62, 62, 62); -webkit-text-stroke-color: rgb(62, 62, 62); -webkit-transform-origin: 25.5px 7.5px; }
.input-15-mbi { background-clip: padding-box; background-color: rgb(204, 204, 204); border: 1px solid rgb(92, 92, 94); border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; box-shadow: rgba(255, 255, 255, 0.14902) 0px 1px 0px 0px, rgba(0, 0, 0, 0.2) 0px 2px 2px 0px inset; box-sizing: border-box; color: rgb(51, 51, 51); font-family: verdana, arial, sans-serif; font-size: 11px; height: 26px; margin: 0px; outline-color: rgb(51, 51, 51); padding: 0px 55px 0px 10px; text-decoration: none; text-shadow: rgb(214, 214, 214) 0px 1px 0px; text-overflow: ellipsis; width: 180px; -webkit-appearance: none; -webkit-background-clip: padding-box; -webkit-box-shadow: rgba(255, 255, 255, 0.14902) 0px 1px 0px 0px, rgba(0, 0, 0, 0.2) 0px 2px 2px 0px inset; -webkit-column-rule-color: rgb(51, 51, 51); -webkit-perspective-origin-x: 90px; -webkit-perspective-origin-y: 13px; -webkit-text-emphasis-color: rgb(51, 51, 51); -webkit-text-fill-color: rgb(51, 51, 51); -webkit-text-stroke-color: rgb(51, 51, 51); -webkit-transform-origin: 90px 13px; -webkit-transition: border 0.2s ease-in-out 0s, background-color 0.2s ease-in-out 0s; transition: border 0.2s ease-in-out 0s, background-color 0.2s ease-in-out 0s; }
.span-18-mbi { clip: rect(1px 1px 1px 1px); display: block; height: 1px; overflow: hidden; position: absolute; width: 1px; -webkit-perspective-origin-x: 0.5px; -webkit-perspective-origin-y: 0.5px; -webkit-transform-origin: 0.5px 0.5px; }
.p-21-mbi { height: 57px; line-height: 19px; margin-bottom: 8px; margin-top: 8px; -webkit-perspective-origin-x: 0.5px; -webkit-perspective-origin-y: 28.5px; -webkit-transform-origin: 0.5px 28.5px; }
.p-22-mbi { height: 209px; line-height: 19px; margin-bottom: 8px; margin-top: 8px; -webkit-perspective-origin-x: 0.5px; -webkit-perspective-origin-y: 104.5px; -webkit-transform-origin: 0.5px 104.5px; }
.input-31-mbi { background-color: rgba(0, 0, 0, 0); background-image: -webkit-linear-gradient(bottom, rgb(191, 191, 191) 0%, rgb(191, 191, 191) 20%, rgb(224, 224, 224) 100%); border-color: rgb(86, 86, 86) rgb(77, 77, 77) rgb(62, 62, 62); border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-style: solid; border-width: 1px; border-top-left-radius: 5px; border-top-right-radius: 5px; box-shadow: rgb(236, 236, 236) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.2) 0px 1px 0px 0px; box-sizing: content-box; color: rgb(51, 51, 51); cursor: pointer; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; height: 15.984375px; line-height: 15.998481750488281px; margin: 0px 4px 0px 2px; min-width: 44px; outline-color: rgb(51, 51, 51); padding: 4px 8px; position: relative; text-decoration: none; text-shadow: rgb(224, 224, 224) 0px 1px 0px; width: 44px; -webkit-appearance: none; -webkit-box-shadow: rgb(236, 236, 236) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.2) 0px 1px 0px 0px; -webkit-column-rule-color: rgb(51, 51, 51); -webkit-font-smoothing: antialiased; -webkit-perspective-origin-x: 31px; -webkit-perspective-origin-y: 12.984375px; -webkit-text-emphasis-color: rgb(51, 51, 51); -webkit-text-fill-color: rgb(51, 51, 51); -webkit-text-stroke-color: rgb(51, 51, 51); -webkit-transform-origin: 31px 12.984375px; }
.a-32-mbi { background-image: -webkit-linear-gradient(bottom, rgb(0, 121, 193) 0%, rgb(0, 121, 193) 20%, rgb(0, 161, 255) 100%); border-color: rgb(86, 86, 86) rgb(77, 77, 77) rgb(62, 62, 62); border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-style: solid; border-width: 1px; border-top-left-radius: 5px; border-top-right-radius: 5px; box-shadow: rgba(255, 255, 255, 0.2) 0px 1px 0px 0px, rgb(77, 190, 255) 0px 1px 0px 0px inset; color: rgb(255, 255, 255); cursor: pointer; display: inline-block; font-size: 11px; font-weight: bold; height: 15.984375px; line-height: 15.998481750488281px; min-width: 44px; outline-color: rgb(255, 255, 255); padding: 4px 8px; text-align: center; text-decoration: none; text-shadow: rgb(0, 105, 44) 0px -1px 0px; width: 44px; -webkit-box-shadow: rgba(255, 255, 255, 0.2) 0px 1px 0px 0px, rgb(77, 190, 255) 0px 1px 0px 0px inset; -webkit-column-rule-color: rgb(255, 255, 255); -webkit-perspective-origin-x: 31px; -webkit-perspective-origin-y: 12.984375px; -webkit-text-decorations-in-effect: none; -webkit-text-emphasis-color: rgb(255, 255, 255); -webkit-text-fill-color: rgb(255, 255, 255); -webkit-text-stroke-color: rgb(255, 255, 255); -webkit-transform-origin: 31px 12.984375px; }
</style>
</head>
<body>
<div class="div-0-mbi">
<div id="login_emaildiv" class="div-1-mbi">
<label for="login_email" class="label-2-mbi">Email</label>
<input type="text" id="login_email" name="login_email" value="" class="input-3-mbi">
<span class="span-4-mbi">
<a aria-expanded="false" data-shorttext="?" data-longtext="forgot?" aria-controls="passwordRecovery1Desc" id="passwordRecovery1" href="#" role="button" class="a-5-mbi">forgot?</a>
<div aria-hidden="true" aria-labelledby="passwordRecovery1" id="passwordRecovery1Desc" class="div-6-mbi">
<div class="span-4-mbi"><span id="calloutCloseBtn" class="span-4-mbi">Close</span></div>
<p class="p-9-mbi">Forgot your email address?</p>
<p class="p-9-mbi">Enter up to 3 of your email addresses and we'll help you find your account.</p>
<span class="span-4-mbi">
<a href="#" class="a-12-mbi">Get started</a>
</span>
</div>
</span>
</div>
<div id="login_passworddiv" class="div-1-mbi">
<label for="login_password" class="label-14-mbi">Password</label>
<input type="password" id="login_password" name="login_password" autocomplete="off" class="input-15-mbi">
<span class="span-4-mbi">
<a aria-expanded="false" data-shorttext="?" data-longtext="forgot?" id="passwordRecovery2" aria-controls="passwordRecovery2Desc" href="#" role="button" class="a-5-mbi">
forgot?
<span class="span-18-mbi">
<div class="span-4-mbi">
<span id="calloutCloseBtn" class="span-4-mbi">Close</span>
</div>
<p class="p-21-mbi">Forgot your password?</p>
<p class="p-22-mbi">Enter your email address and we'll help you reset your password.</p>
<span class="span-4-mbi">
Get started
</span>
</span>
</a>
<div aria-hidden="true" aria-labelledby="passwordRecovery2" id="passwordRecovery2Desc" class="div-6-mbi">
<div class="span-4-mbi">
<span id="calloutCloseBtn" class="span-4-mbi">Close</span>
</div>
<p class="p-9-mbi">Forgot your password?</p>
<p class="p-9-mbi">Enter your email address and we'll help you reset your password.</p>
<span class="span-4-mbi">
<a href="#" class="a-12-mbi">Get started</a>
</span>
</div>
</span>
</div>
<input type="submit" name="submit.x" value="Log In" class="input-31-mbi">
<a href="#" name="SignUp_header" class="a-32-mbi">Sign Up</a>
</div>
</body>
</html>
Поместите ссылку и ввод в другом элементе.
Стиль, который должен выглядеть как вход.
Стиль фактического ввода не должен быть невидимым (т. Е. Не иметь границ или фона).
Без кода, как правило, трудно догадаться, что точная проблема, и угадывание ответов, как правило, только вещь кто может. Если вы предоставите фрагмент кода ваших предыдущих попыток, будет намного легче понять, какая именно проблема у вас есть. Этот фрагмент кода может даже быть кодом, который не работает вообще, потому что он все равно даст лучшее представление о том, что вы пытаетесь сделать точно. – Joeytje50
Вы не можете размещать ссылки в текстовых вводах. Вы имеете в виду текст заполнителя? – j08691
Якорные теги не могут быть помещены в теги ввода. Что вы на самом деле пытаетесь выполнить и что вы пробовали? – David