How do I add a link inside my placeholder

Question

0.00/5 (No votes)

See more:

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">
                        			 Facebook
	                        	</a>
	                        	<a class="btn btn-link-2" href="#">
	                        		^__i class="fa fa-twitter"> Twitter
	                        	</a>
	                        	<a class="btn btn-link-2" href="#">
	                        		^__i class="fa fa-google-plus"> 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;
}

Posted 20-Sep-16 22:30pm

Member 12751456

Updated 21-Sep-16 19:30pm

v3

Add a Solution

Comments

jgakenhe 22-Sep-16 1:38am

The first tag I see is a link tag and it's before the Document type; which will lead to problems. I also don't see a beginning or ending body tag. If you clean that stuff up, I imagine your markup will begin to act correctly.

Member 12751456 22-Sep-16 1:41am

actually when i put my code inside that coding box automatically my code changes
this is my exact coding

<!DOCTYPE html>













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

Member 12751456 22-Sep-16 1:43am

again here also my coding is not displayed

1 solution

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)

David_Wimbley · Answer 1 · 2016-09-21T03:14:00

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

html><br

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