如何在占位符中添加链接 [英] How do I add a link inside my placeholder

查看：108
本文介绍了如何在占位符中添加链接的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

在这个我需要添加一个忘记？在占位符内链接，但问题是在placeholer内标签不起作用。我将能够实现任何帮助将不胜感激。



我尝试过： 



< a><！DOCTYPE html> 
 
 
 
 
 
 
 
 
 
<！ -  CSS  - > 
 
 
 
 
 
 
<！ -  HTML5 Shim和Respond.js IE8支持HTML5元素和媒体查询 - > ; 
<！ - 警告：如果您通过file：//  - >查看页面，则Respond.js不起作用
<！ -  [if lt IE 9]> 
 
 
<！[endif]  - > 
 
 
 
 
 
 
 
<！ - 热门内容 - > 
< / a>< div class =top-content>< a> 
 
< / a>< div class =inner-bg>< a> 
< / a>< div class =container>< a> 
< / a>< div class =row>< a> 
< / a>< div class =col-sm-6 col-sm-offset-3 form-b​​ox>< a> 
< div class =form-top> 
< div class =form-top-left> 
< h3>登录DigiCash< / h3> 
< p>输入您的用户名和密码登录：< / p> 
< / div> 
< div class =form-top-right> 
   
< / div> 
< / div> 
< / a>< div class =form-b​​ottom>< a> 
< / a>< / div>< a> 
< / a>< / div>< a> 
< / a>< / div>< a> 
< / a>< div class =row>< a> 
< / a>< div class =col-sm-6 col-sm-offset-3 social-login>< a> 
< h3> ...或登录：< / h3> 
< / a>< div class =social-login-buttons>< a> 
< / a>< a class =btn btn-link-2href =＃> 
   Facebook 
< / a> 
< a class =btn btn-link-2href =＃> 
   Twitter 
< / a> 
< a class =btn btn-link-2href =＃> 
   Google Plus 
< / a> 
< / div> 
< / div> 
< / div> 
< / div> 
< / div> 
 
< / div> 
 
 
<！ -  Javascript  - > 
 
 
 
 
 
<！ -  [如果是IE 10]> 
 
<！[endif]  - > 





 body {
 font-family：'Roboto'，sans-serif; 
字体大小：16px; 
 font-weight：300; 
颜色：＃888; 
 line-height：20px; 
 text-align：center; 
} 
 
 strong {font-weight：500; } 
 
 a，a：悬停，a：焦点{
颜色：＃de615e; 
 text-decoration：none; 
 -o-transition：全部.3s; -moz-transition：全部.3s; -webkit-transition：全.3s; -ms-transition：全部.3s;过渡：全部.3s; 
} 
 
 h1，h2 {
 margin-top：10px; 
字体大小：38px; 
 font-weight：100; 
颜色：＃555; 
 line-height：50px; 
} 
 
 h3 {
 font-size：22px; 
 font-weight：300; 
颜色：＃555; 
行高：30px; 
} 
 
 img {max-width：100％; } 
 
 ::  -  moz-selection {background：＃de615e;颜色：＃191919; text-shadow：none; } 
 :: selection {background：＃de615e;颜色：＃191919; text-shadow：none; } 
 
 
 .btn-link-1 {
 display：inline-block; 
身高：50px; 
保证金：5px; 
填充：16px 20px 0 20px; 
背景：＃de615e; 
字体大小：16px; 
 font-weight：300; 
 line-height：16px; 
颜色：＃191919; 
 -moz-border-radius：4px; -webkit-border-radius：4px; border-radius：4px; 
} 
 .btn-link-1：hover，.btn-link-1：focus，.btn-link-1：active {outline：0;不透明度：0.6;颜色：＃191919; } 
 
 .btn-link-1.btn-link-1-facebook {background：＃4862a3; } 
 .btn-link-1.btn-link-1-twitter {background：＃55acee; } 
 .btn-link-1.btn-link-1-google-plus {background：＃dd4b39; } 
 
 .btn-link-1 i {
 padding-right：5px; 
 vertical-align：middle; 
字体大小：20px; 
 line-height：20px; 
} 
 
 .btn-link-2 {
 display：inline-block; 
身高：50px; 
保证金：5px; 
填充：15px 20px 0 20px; 
背景：rgba（0,0,0,0.3）; 
 border：1px solid＃191919; 
字体大小：16px; 
 font-weight：300; 
 line-height：16px; 
颜色：＃191919; 
 -moz-border-radius：4px; -webkit-border-radius：4px; border-radius：4px; 
} 
 .btn-link-2：hover，.btn-link-2：focus，
 .btn-link-2：active，.btn-link-2：active：focus {outline：0;不透明度：0.6; background：rgba（0,0,0,0.3）;颜色：＃191919; } 
 
 
 / *****顶级内容***** / 
 
 .inner-bg {
填充：100px 0 170px 0 ; 
} 
 
 .top-content .text {
 color：＃191919; 
} 
 
 .top-content .text h1 {color：＃191919; } 
 
 .top-content .description {
 margin：20px 0 10px 0; 
} 
 
 .top-content .description p {opacity：0.8; } 
 
 .top-content .description a {
 color：＃191919; 
} 
 .top-content .description a：hover，
 .top-content .description a：focus {border-bottom：1px dotted＃191919; } 
 
 .form-b​​ox {
 margin-top：35px; 
} 
 
 .form-top {
溢出：隐藏; 
填充：0 25px 15px 25px; 
背景：＃444; 
背景：rgba（0,0,0,0.35）; 
 -moz-border-radius：4px 4px 0 0; -webkit-border-radius：4px 4px 0 0; border-radius：4px 4px 0 0; 
 text-align：left; 
} 
 
 .form-top-left {
 float：left; 
宽度：75％; 
 padding-top：25px; 
} 
 
 .form-top-left h3 {margin-top：0;颜色：＃191919; } 
 .form-top-left p {opacity：0.8;颜色：＃191919; } 
 
 .form-top-right {
 float：left; 
宽度：25％; 
 padding-top：5px; 
字体大小：66px; 
颜色：＃191919; 
 line-height：100px; 
 text-align：right; 
不透明度：0.3; 
} 
 
 .form-b​​ottom {
 padding：25px 25px 30px 25px; 
背景：＃444; 
背景：rgba（0,0,0,0.3）; 
 -moz-border-radius：0 0 4px 4px; -webkit-border-radius：0 0 4px 4px; border-radius：0 0 4px 4px; 
 text-align：left; 
} 
 
 .form-b​​ottom form textarea {
 height：100px; 
} 
 
 .form-b​​ottom form button.btn {
 width：100％; 
} 
 
 .form-b​​ottom form .input-error {
 border-color：＃de615e; 
} 
 
 .social-login {
 margin-top：35px; 
} 
 
 .social-login h3 {
 color：＃191919; 
} 
 
 .social-login-buttons {
 margin-top：25px; 
} 
 
 
 / *****媒体查询***** / 
 
 @media（最小宽度：992px）和（ max-width：1199px）{} 
 
 @media（min-width：768px）和（max-width：991px）{} 
 
 @media（max-width： 767px）{
 
 .inner-bg {padding：60px 0 110px 0; } 
 
} 
 
 @media（最大宽度：415px）{
 
 h1，h2 {font-size：32px; } 
 
} 
 
输入[type = text]：focus {
 border：3px solid＃33ccff; 
} 
输入[type =密码]：焦点{
 border：3px solid＃33ccff; 
} 
 .social-login-buttons a 
 {
 hover：＃de615e; 
}

解决方案

我假设忘记页面你的意思是忘了密码？你的问题说你要做的就是添加一个到占位符的链接，但我没有看到任何占位符。你问的是非常基本的，一个简单的谷歌搜索锚标签或链接会产生数百万的结果



要简单地添加一个链接到你的页面你做什么喜欢



< a href =   / your / url / to / forgot / password.html  class  =   link-class>忘记密码< /   a  >





添加指向HTML的链接 [ ^ ]



鉴于此是一个措辞不好的问题，如果这不是您所寻求的，请随时更新您的问题并明确解释您的问题，不要牛逼假设我们知道您的项目什么。

In this i need to add a forgot? link inside the placeholder but the problem is inside placeholer tag is not working .how will i able to achieve that any help would be appreciated.

What I have tried:

<a><!DOCTYPE html>


    

        
        
        
    

        <!-- CSS -->
        
        
        
		
        

        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
            
            
        <![endif]-->

       

    

    

        <!-- Top content -->
        </a><div class="top-content"><a>
        	
            </a><div class="inner-bg"><a>
                </a><div class="container"><a>
                                        </a><div class="row"><a>
                        </a><div class="col-sm-6 col-sm-offset-3 form-box"><a>
                        	<div class="form-top">
                        		<div class="form-top-left">
                        			<h3>Login to DigiCash</h3>
                            		<p>Enter your username and password to log on:</p>
                        		</div>
                        		<div class="form-top-right">
                        			
                        		</div>
                            </div>
                            </a><div class="form-bottom"><a>
			                    </a></div><a>
                        </a></div><a>
                    </a></div><a>
                    </a><div class="row"><a>
                        </a><div class="col-sm-6 col-sm-offset-3 social-login"><a>
                        	<h3>...or login with:</h3>
                        	</a><div class="social-login-buttons"><a>
	                        	</a><a class="btn btn-link-2" href="#">
	                        		 Facebook
	                        	</a>
	                        	<a class="btn btn-link-2" href="#">
	                        		 Twitter
	                        	</a>
	                        	<a class="btn btn-link-2" href="#">
	                        		 Google Plus
	                        	</a>
                        	</div>
                        </div>
                    </div>
                </div>
            </div>
            
        </div>


        <!-- Javascript -->
        
        
        
        
        
        <!--[if lt IE 10]>
            
        <![endif]-->



body {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 300;
    color: #888;
    line-height: 20px;
    text-align: center;
}

strong { font-weight: 500; }

a, a:hover, a:focus {
	color: #de615e;
	text-decoration: none;
    -o-transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -ms-transition: all .3s; transition: all .3s;
}

h1, h2 {
	margin-top: 10px;
	font-size: 38px;
    font-weight: 100;
    color: #555;
    line-height: 50px;
}

h3 {
	font-size: 22px;
    font-weight: 300;
    color: #555;
    line-height: 30px;
}

img { max-width: 100%; }

::-moz-selection { background: #de615e; color: #191919; text-shadow: none; }
::selection { background: #de615e; color: #191919; text-shadow: none; }


.btn-link-1 {
	display: inline-block;
	height: 50px;
	margin: 5px;
	padding: 16px 20px 0 20px;
	background: #de615e;
	font-size: 16px;
    font-weight: 300;
    line-height: 16px;
    color: #191919;
    -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
}
.btn-link-1:hover, .btn-link-1:focus, .btn-link-1:active { outline: 0; opacity: 0.6; color: #191919; }

.btn-link-1.btn-link-1-facebook { background: #4862a3; }
.btn-link-1.btn-link-1-twitter { background: #55acee; }
.btn-link-1.btn-link-1-google-plus { background: #dd4b39; }

.btn-link-1 i {
	padding-right: 5px;
	vertical-align: middle;
	font-size: 20px;
	line-height: 20px;
}

.btn-link-2 {
	display: inline-block;
	height: 50px;
	margin: 5px;
	padding: 15px 20px 0 20px;
	background: rgba(0, 0, 0, 0.3);
	border: 1px solid #191919;
	font-size: 16px;
    font-weight: 300;
    line-height: 16px;
    color: #191919;
    -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
}
.btn-link-2:hover, .btn-link-2:focus, 
.btn-link-2:active, .btn-link-2:active:focus { outline: 0; opacity: 0.6; background: rgba(0, 0, 0, 0.3); color: #191919; }


/***** Top content *****/

.inner-bg {
    padding: 100px 0 170px 0;
}

.top-content .text {
	color: #191919;
}

.top-content .text h1 { color: #191919; }

.top-content .description {
	margin: 20px 0 10px 0;
}

.top-content .description p { opacity: 0.8; }

.top-content .description a {
	color: #191919;
}
.top-content .description a:hover, 
.top-content .description a:focus { border-bottom: 1px dotted #191919; }

.form-box {
	margin-top: 35px;
}

.form-top {
	overflow: hidden;
	padding: 0 25px 15px 25px;
	background: #444;
	background: rgba(0, 0, 0, 0.35);
	-moz-border-radius: 4px 4px 0 0; -webkit-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0;
	text-align: left;
}

.form-top-left {
	float: left;
	width: 75%;
	padding-top: 25px;
}

.form-top-left h3 { margin-top: 0; color: #191919; }
.form-top-left p { opacity: 0.8; color: #191919; }

.form-top-right {
	float: left;
	width: 25%;
	padding-top: 5px;
	font-size: 66px;
	color: #191919;
	line-height: 100px;
	text-align: right;
	opacity: 0.3;
}

.form-bottom {
	padding: 25px 25px 30px 25px;
	background: #444;
	background: rgba(0, 0, 0, 0.3);
	-moz-border-radius: 0 0 4px 4px; -webkit-border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px;
	text-align: left;
}

.form-bottom form textarea {
	height: 100px;
}

.form-bottom form button.btn {
	width: 100%;
}

.form-bottom form .input-error {
	border-color: #de615e;
}

.social-login {
	margin-top: 35px;
}

.social-login h3 {
	color: #191919;
}

.social-login-buttons {
	margin-top: 25px;
}


/***** Media queries *****/

@media (min-width: 992px) and (max-width: 1199px) {}

@media (min-width: 768px) and (max-width: 991px) {}

@media (max-width: 767px) {
	
	.inner-bg { padding: 60px 0 110px 0; }

}

@media (max-width: 415px) {
	
	h1, h2 { font-size: 32px; }

}

input[type=text]:focus {
    border:3px solid  #33ccff;
}
input[type=password]:focus {
    border:3px solid  #33ccff;
}
.social-login-buttons a
{
hover:#de615e;
}

解决方案

I assume by forgot page you mean forgot password? Your question says all you want to do is add a link to the placeholder but i don't see any placeholder. What you are asking is very basic and a simple google search of anchor tag or links comes up with millions of results

To simply add a link to your page you do something like

<a href="/your/url/to/forgot/password.html" class="link-class">Forgot Password</a>



add link to html[^]

Given this is a poorly worded question, if this is not what you were seeking, feel free to update your question with a clear explanation of your issue, don't assume we know anything about your project.


这篇关于如何在占位符中添加链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发语言最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆