Сложность с HTML <label> тег

Я пишу код PHP/CSS/HTML, который выводит веб-страницу с логотипами таких компаний, как Mercedes Benz и Porche. Когда вы нажимаете на эти логотипы, появляется текстовая область, и вы можете писать свои комментарии в них. Моя проблема заключается в том, что независимо от того, что я пытаюсь, логотипы очень далеки друг от друга (по вертикали) друг от друга, и когда вы нажимаете на отдельный логотип, текстовое поле не появляется сразу под или рядом с этим логотипом - оно появляется внизу страницы. То, что я ищу для создания, представляет собой серию логотипов, которые при нажатии на нее появляются текстовое поле справа или рядом с ним, а затем вы нажимаете «Отправить» и данные передаются в базу данных. Кто-то может помочь?Сложность с HTML <label> тег

<!DOCTYPE html> 

    <?php 

    $number_of_days = 30 ; 
    $date_of_expiry = time() + 60 * 60 * 24 * $number_of_days ; 
    setcookie('name', $name, $date_of_expiry); 

    ?> 

    <html> 
    <head> 
    <style> 
    img { width:100%; } 

    label img { 
    transform: scale(0.05); 
    transition-duration: 0.2s; 
    } 

    label img:hover { 
    cursor: pointer; 
    transform: scale(0.1); 
    } 

    input[type='text'] { 
    opacity: 0; 
    font-size: 30px; 
    transition-duration: 0.2s; 
    } 

    input[type='text']:focus { 
    opacity: 1; 
    } 

    </style> 
    </head> 

    <body> 

     <label for="mercedesbenz"> 
     <img src="Daimler Benz logo.png"> 
     </label> 

     <label for="porche"> 
     <img src="Porche logo.png"> 
     </label> 

     <label for="bmw"> 
     <img src="BMW logo.png"> 
     </label> 
     <br /> 

     <form method="post" action="<?php echo 
     htmlspecialchars($_SERVER["PHP_SELF"]);?>"> 

     <input type="text" id="mercedesbenz" alt="HTML5 Icon"  
     style="width:128px;height:128px" placeholder="Merc" />&nbsp &nbsp 

     <input type="text" id="Porche" alt="HTML5 Icon" 
     style="width:128px;height:128px" placeholder="Porc" />&nbsp &nbsp 

     <input type="text" id="bmw" alt="HTML5 Icon" 
     style="width:128px;height:128px" placeholder="Beemer" />&nbsp &nbsp 

     <input type="submit" name="submit" value="Submit"> 
     </form> 

    </body> 
    </html>

источник

2015-01-27 Jason12

Может у создать http://jsFiddle.net –

Вы должны выкладываю отображаемый HTML. Не ваш PHP. Что касается вашего HTML, то ваши входы не находятся рядом с вашими метками, поэтому они не будут отображаться под каждым изображением. –

также входы не имеют атрибутов alt. –

Вот один из подходов, просто нажмите на автомобиль, чтобы добавить комментарий.
Демо: http://jsfiddle.net/f18513hw/

HTML

<div id="form"> 
     <form method="post" action="#"> 

    <div class="car"> 
     <label for="mercedesbenz"> 
      <img src="http://tinyurl.com/on964r9"> 
     </label> 
     <div class="comment"> 
      <input type="text" id="mercedesbenz" placeholder="Merc" /> 
     </div> 
    </div> 
    <div class="car"> 
     <label for="porche"> 
      <img src="http://tinyurl.com/on964r9"> 
     </label> 
     <div class="comment"> 
      <input type="text" id="Porche" placeholder="Porc" /> 
     </div> 
    </div> 
    <div class="car"> 
     <label for="bmw"> 
      <img src="http://tinyurl.com/on964r9"> 
     </label> 
     <div class="comment"> 
      <input type="text" id="bmw" placeholder="Beemer" /> 
     </div> 
    </div> 
    <input id="button" type="submit" name="submit" value="Submit"> 
    </form> 
</div>

CSS

#form { 
    position: absolute; 
    overflow: hidden; 
    top: 50%; 
    left: 50%; 
    margin-right: -50%; 
    transform: translate(-50%, -50%) 
} 
.car { 
    float: left; 
    margin: 2% 2% 5% 2%; 
} 

.car label img { 
    transform: scale(0.8); 
    transition-duration: 0.2s; 
} 

.car label img:hover { 
    cursor: pointer; 
    transform: scale(1); 
} 

.comment { 
    position: absolute; 
    visibility: hidden;  
} 

.comment input { 
    width: 128px; 
    font-size: 1em; 
} 

.car label img { 
    width: 128px; 
    display: block; 
} 

#button { 
    position: relative; 
    left: 66%; 
    margin: 2%; 
    visibility: hidden; 
}

JQuery/JavaScript

$('.car').click(function() { 
    $('.comment').css("visibility", "hidden"); 
    $('#button').css("visibility", "hidden"); 

    var id = $(this).children('label').attr('for'); 
    var buttonOffset; 
    switch(id) { 
     case 'mercedesbenz': 
      buttonOffset = '0'; 
      break; 
     case 'porche': 
      buttonOffset = '33%'; 
      break; 
     case 'bmw': 
      buttonOffset = '66%'; 
      break; 
    } 

    $(this).children('.comment').css("visibility", "visible"); 
    $('#button').css("left", buttonOffset); 
    $('#button').css("visibility", "visible"); 
}); 

$('.comment').mouseleave(function() { 
    setTimeout(function() { 
     $('.comment').css("visibility", "hidden"); 
     $('#button').css("visibility", "hidden"); 
    }, 500); 
});

источник

2015-01-27 05:18:36

Кристиан, я так благодарен за ваш вклад. Спасибо. – Jason12

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

<div> 
    <label></label> 
    <input></input> 
</div> 
<div> 
    <label></label> 
    <input></input> 
</div> 
<div> 
    <label></label> 
    <input></input> 
</div>

источник

2015-01-27 02:56:20

OK, понимает. Спасибо, Д.А. – Jason12

Сложность с HTML <label> тег

ответ

Смежные вопросы