淺談input中的name，value以及label中的for

 本文給大家淺談一下input中的name，value以及label中的for，有一定的參考價值，有需要的朋友可以參考一下，希望對你們有所幫助。

input有很多屬性，比較常用的有type，value，name，placeholder，multiple，checked等。對於其中的name、value、label相關以及標籤外的文字，我一直是懵懵懂懂，今天總算弄了個清楚。

1）name屬性　

　　定義：name 屬性規定 input 元素的名稱。

　　用法：name 屬性用於對提交到伺服器後的表單資料進行標識，或在客戶端透過 JavaScript 引用表單資料。

　　註解：只有設定了 name 屬性的表單元素才能在提交表單時傳遞它們的值。

也就是說，name對於頁面顯示是沒啥用的（加不加都不影響頁面顯示），而是用於和伺服器互動或編寫js時方便引用。

2）value屬性

# 定義：value 屬性為 input 元素設定值。

用法：對於不同的輸入類型，value 屬性的用法也不同：

• type="button", "reset", " submit" - 定義按鈕上的顯示的文字

<input>按钮文字

      

• type="text", "password", "hidden" - 定義輸入欄位的初始值

<input>标签外

        

• #type= "checkbox", "radio", "image" - 定義與輸入相關聯的值

<input>按钮文字

        

#注意：此時顯示在頁面上的是「按鈕文字」（標籤外的文字），而此時的value的作用主要是用於js中的交互操作，所以此時的value一般會設定為與輸入相關的值。例如：

<input>男

註解： 和 中必須設定 value 屬性。

3）label

標籤為 input 元素定義標註（標記）。例如：

<label>请输入邮箱地址：</label>      
    <input type="text" name="email" value="这是一个文本输入框"/>

请输入邮箱地址：     
     <input type="text" name="email" value="这是一个文本输入框"/>

以上兩種方式顯示結果相同，皆為下圖所示：

所以：label 元素不會向使用者呈現任何特殊效果。不過，它為滑鼠使用者改進了可用性。如果您在 label 元素內點擊文本，就會觸發此控制項。是說，當使用者選擇該標籤時，瀏覽器就會自動將焦點轉到和標籤相關的表單控制項。 標籤的 for 屬性應與相關元素的 id 屬性相同。

上面這句話是什麼意思呢？是說，若如下寫法，當滑鼠點選「請輸入信箱位址」時，效果和點選輸入方塊是一樣的（即會focus到輸入方塊），也就是將label與對應的input綁定在一起了。

<label>请输入邮箱地址：</label>
<input>

總結：以上就是這篇文章的全部內容，希望能對大家的學習有所幫助。更多相關教學請造訪 HTML影片教學！

相關推薦：

php公益培訓影片教學

#

以上是淺談input中的name，value以及label中的for的詳細內容。更多資訊請關注PHP中文網其他相關文章！