怎么獲取HTML中input標簽的value的值

今天就跟大家聊聊有關怎么獲取HTML中input標簽的value的值，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。

首先讓我們看看HTML中的input標簽的用法：

value屬性是input元素規定值。

對于不同類型的input元素，value屬性的用法也不同：

對于"button","reset","submit"類型-定義按鈕上的文本

對于"text","password","hidden"類型-定義輸入字段的初始（默認）值

對于"checkbox", "radio", "image" 類型-定義與input元素相關的值。該值會發送到表單的action URL。

注釋：value屬性對于<input type="checkbox">和<input type="radio">是必需的。

注釋：value屬性不適用于<input type="file">。

說了這么多，來看看實例：

帶有value屬性預定義值的表單：

<form action="demo_form.asp" method="get">
  請輸入用戶名: <input type="text" name="fname" value="Bill" /><br />
  第二次用戶名: <input type="text" name="lname" value="Gates" /><br />
  <input type="submit" value="提交" />
</form>

效果如圖所示：

上圖就是代碼的結果，是定義的表單形式。

現在讓我們來看看相關聯的value值：

以輸入框為例，每個框是不是可以輸入內容？這個內容就是輸入框關聯的值，你給它設置個value屬性，那么你設置的value就是它的值，會顯示在輸入框中。同樣的，單選按鈕也可以設置一個值，但是這個值不像輸入框那樣你設置了會顯示出來，但是設置了就代表它就有了這么一個值，就好比標注它是男是女一樣，是男是女未必看的出來，但是可以標注出來。

有時需要把一個input標簽從一個位置調整到另一個位置，調整后input的值就是input標簽中value屬性的值，如果你修改值的方式并沒有修改到value屬性，那么調整后你設置的值就會丟失。

<form> 
<input id="input" type="input" value='2'></input> 
</form>

所以假如你有上述的操作，請一定確保你修改值的方式修改到了input的value屬性，或者使用其他方式實現上述的操作，如jQuery的clone方法。

再來一個關于input標簽的復選框做法：

<form action="demo-form.php">
  <input type="checkbox" name="vehicle[]" value="Bike">我會PHP<br>
  <input type="checkbox" name="vehicle[]" value="Car">我會html<br>
  <input type="checkbox" name="vehicle[]" value="Boat">我會python<br>
  <input type="submit" value="提交">
</form>

上代碼效果如圖：

好了，現在這篇文章結束了，有問題的小伙伴就在下方留言吧

看完上述內容，你們對怎么獲取HTML中input標簽的value的值有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。