How to add a title to a type text input

elenora rezaie asked on September 20, 2019 00:10

Hi. I have an input which is text type and user can type in it to search something he wants. Now I don't know how to add a title to left of my search bar. I have tried label tag but it doesn't work! Below is what I have tried and doesn't show anything.

<body>
<!-- HTML for SEARCH BAR -->
<div id="tfheader">
    <form id="tfnewsearch" method="get" action="http://www.google.com">   <!--Forms are used to pass user-data to a specified URL.-->
            <label for="tfq1b">Male</label>
            <input type="text" id="tfq1b" class="tftext tftextinput1" name="q" size="21" maxlength="120" value="Search our website"></input>
                <input type="text" id="tfq2b" class="tftext tftextinput2" name="q" size="21" maxlength="120" value="city"></input>
                    <input type="submit" value=">" class="tfbutton2">
            <!--The <input> tag specifies an input field where the user can enter data. <input>-->
    </form>
    <div class="tfclear"></div>
</div>

input tag

Recent Answers

Matúš Ušiak answered on September 20, 2019 09:12

Hi Eleonora, may I know what you mean by 'it doesn't work'? Where are you using this code?

0 votesVote for this answer Mark as a Correct answer

elenora rezaie answered on September 20, 2019 10:02

I want to create two search bars near each other and each one of the should have a title like the website www.yelp.com. My search bars should be the same as in that website.

0 votesVote for this answer Mark as a Correct answer

Matúš Ušiak answered on September 20, 2019 10:36

That code works for me just fine, when used in a file with a .html extension and opened in browser. Could you please elaborate how it is related to Kentico and where within Kentico are you trying this out?

0 votesVote for this answer Mark as a Correct answer

elenora rezaie answered on September 20, 2019 17:44 (last edited on September 20, 2019 17:46)

Here is my complete code which doesn't show the label when I run it.

<!DOCTYPE html>
<html>
<head>
<title>Search Box Example 2 - default placeholder text gets cleared on click</title>
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW" />
<!-- Add jQuery to your website if you don't have it already -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- JAVASCRIPT to clear search text when the field is clicked -->
<script type="text/javascript">
$(function() {
$("#tfq1b").click(function() {
    if ($("#tfq1b").val() == "Search our website"){
        $("#tfq1b").val(""); 
    }
});
$("#tfq2b").click(function() {
    if ($("#tfq2b").val() == "city"){
        $("#tfq2b").val(""); 
    }
});
});
</script>
 <!-- CSS styles for standard search box with placeholder text-->
<style type="text/css">
#tfheader{
    background-color:#c3dfef;
    position: relative;
    top:135px;
}
#tfnewsearch{
    float:right; 
    padding:100px;
}
.tftext{
    margin: 0;
    padding: 10px 65px;
    position: relative;
    font-family: Arial, Helvetica, sans-serif;
    font-size:14px;
    color:#666;
    border:1px solid #0076a3; 
    <!--border-right:0px;-->
}
.tftext.tftextinput1{
    top: 35%;
    left:15%;
    border-top-right-radius: 5px 5px;
    border-bottom-right-radius: 5px 5px;
}

.tftext.tftextinput2{
    down: 10%;
    right: 73%;
    border-top-left-radius: 5px 5px;
    border-bottom-left-radius: 5px 5px;
}
.tfbutton2 {
    margin: 0;
    padding: 7px 30px;
    position: relative;
    top: 35%;
    right: 27%;
    font-family: Arial, Helvetica, sans-serif;
    font-size:14px;
    font-weight:bold;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    color: #ffffff;
    border: solid 1px #0076a3; border-right:0px;
    background: #0095cd;
    background: -webkit-gradient(linear, left top, left bottom, from(#00adee), 
   to(#0078a5));
    background: -moz-linear-gradient(top,  #00adee,  #0078a5);
    border-top-right-radius: 5px 5px;
    border-bottom-right-radius: 5px 5px;
}
.tfbutton2:hover {
    text-decoration: none;
    background: #007ead;
    background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), 
  to(#00678e));
    background: -moz-linear-gradient(top,  #0095cc,  #00678e);
}
/* Fixes submit button height problem in Firefox */
.tfbutton2::-moz-focus-inner {
  border: 0;
}
.tfclear{
    clear:both;
}
 </style>
 </head>
 <body>
<!-- HTML for SEARCH BAR -->
<div id="tfheader">
    <form id="tfnewsearch" method="get" action="http://www.google.com">   
            <label for="tfq1b">Male</label>
            <input type="text" id="tfq1b" class="tftext tftextinput1" name="q" size="21" 
 maxlength="120" value="Search our website"></input>
                <input type="text" id="tfq2b" class="tftext tftextinput2" 
  name="q" size="21" maxlength="120" value="city"></input>
                    <input type="submit" value=">" class="tfbutton2">
    </form>
    <div class="tfclear"></div>
</div>
 </body>
 </html>

0 votesVote for this answer Mark as a Correct answer

Eric Dugre answered on September 20, 2019 22:45

Elenora,

If you inspect the page, it looks like the input is overlapping the label. I added a DIV around the field and it displays fine:

<div>
        <label for="tfq1b">Male</label>
        <input type="text" id="tfq1b" class="tftext tftextinput1" name="q" size="21" maxlength="120" value="Search our website" />
</div>

However, I'm not sure how this relates to Kentico.

1 votesVote for this answer Mark as a Correct answer

elenora rezaie answered on September 21, 2019 14:59

Thank you very much for your answer. When I add div like what you have written, in my console the search bars get disorganized. In Addition I want to put that label on the search bar to the left of it like the label that is shown on the search bar in the site www.yelp.com. Could you please tell me how can I do it? for example should I use bootstrap or JQuery or any other such languages to do that?

0 votesVote for this answer Mark as a Correct answer