HTML表單添加要求圖像

我想在我的輸入字段後添加圖像。一旦滿足表單要求，該圖像將消失。我找到了一種方法來使用css和input將圖像添加到字段本身：required：無效，但該項目的要求是使用html img標籤將其放在字段外。HTML表單添加要求圖像

代碼我到目前爲止（片段）

<label for="FIRST">Name: 
<input required type="text" name="FIRST" placeholder="First" size="35" id="FIRST"><span id = "sadFace"><img src="sad.png" id="sad"></span></label> 
<label for="LAST"></label>

這使圖像在我想要的地方，但我不知道如何使它消失，一旦該領域已經正確填寫。

我嘗試添加到CSS：＃sad.required {/ *一些設計元素* /}

但這並沒有在所有

來源

2016-10-26 Kenny Hammerlund

你必須使用「：valid」僞類來完成你的任務。這是你的情況的工作代碼：

<!-- CSS --> 
    <style> 
     /* select the #sadFace preceded by a valid input */ 
     input:valid ~ #sadFace { 
      display: none; 
     } 
    </style> 

    <!-- html --> 
    <label for="FIRST"> 
     Name: 
     <input required type="text" name="FIRST" placeholder="First" size="35" id="FIRST"> 
     <span id = "sadFace"> 
      <img src="img/imgA.png" id="sad"> 
     </span> 
    </label>

來源

2016-10-26 06:00:30

這樣做的工作，謝謝。當臉部被移除時，它也會移動我的姓氏輸入框。有沒有辦法來取代差距？或者我應該只使用表單元素上的靜態定位？ –

你是什麼意思移動姓氏。你在第一個和最後一個名字之間放置圖像嗎？ –

是的，他們是在同一行，他的形象是在他們之間 –

的選擇你使用修改圖像（#sad.required）指具有id='sad'和class='required'的元素。我假設你的意思是指每個input所需的子元素img;如果是這種情況，您應該使用input[required] #sad作爲選擇器。

您應該注意，將required屬性設置爲false不會從選擇器中排除img，因爲尚未指定值，並且選擇器只需要存在匹配的屬性。。

來源

2016-10-26 03:58:22 Callam

$（ '＃通'）KEYUP（函數（）{

if($(this).val()!='') 
     $('#show').hide() //or may be with an effect 
    else 
     $('#show').show()

}）;

來源

2016-10-26 05:33:22 sandeep

HTML表單添加要求圖像

回答

相關問題