如何在HTML中新增元素的值?
本文將教你如何在HTML中新增元素的值。我們已經對HTML中的value屬性以及使用value屬性的情況有了基本的瞭解。讓我們期待對HTML value屬性有更深入的理解。
在HTML中,value屬性用於描述與其一起使用的元素的值。對於各種HTML元件,它具有不同的含義。用法 - 它可以與<input>,<button>,<meter>,<li>,<option>,<progress>和<param>,<output>元素一起使用。<input> - 當存在value屬性時,它指示輸入元素的預設值。
對於不同型別的輸入,它具有不同的含義
在“button”、“reset”和“submit”中存在時,它指定按鈕上的文字。
在“text”、“password”和“hidden”值中存在時,它指定輸入欄位的初始值。
當存在“checkbox”、“radio”和“picture”時,它表示與輸入關聯的值。
HTML <button>標籤
<button>標籤定義了HTML中的可點選按鈕。<button>標籤用於提交內容。<button>標籤可以包含圖形和文字資訊。不同的瀏覽器使用不同的“button”預設型別。
示例
在下面的示例中,我們為科目建立了兩個<button>標籤,其中一個充當HTML科目按鈕,另一個充當JAVA科目按鈕。
<!DOCTYPE html>
<html>
<body>
<form action="#" method="get">
Choose The Subject:
<button name="subject" type="submit" value="HTML">HTML</button>
<button name="subject" type="submit" value="java">JAVA</button>
</form>
</body>
</html>
HTML <input>標籤
<input>標籤指定使用者可輸入資料的欄位。<input>元素是最重要的表單元素。根據type屬性,<input>元素可以以多種不同的方式呈現。
示例
考慮下面的示例,我們使用帶有<input>標籤和預設值的HTML表單。
<!DOCTYPE html>
<html>
<body>
<form action="#">
<label for="firstname">FIRST NAME:</label>
<input type="text" id="firstname" name="firstname" value="TUTORIALS"><br><br>
<label for="lastname">LAST NAME:</label>
<input type="text" id="lastname" name="lastname" value="POINT"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
執行上述指令碼時,它將生成一個輸出,其中包含一個輸入欄位,使用value屬性顯示名字和姓氏的預設值,以及網頁上的提交按鈕。
<li> HTML元素
<li>標籤定義了一個列表項。<li>標籤用於有序列表、無序列表和選單列表。<ul>和<menu>中的列表項通常顯示為專案符號。<ol>中的列表項通常用數字或字母表示。
示例
考慮下面的示例,我們在有序列表中使用value屬性。
<!DOCTYPE html>
<html>
<body>
<ol>
<li value="100">THAR</li>
<li>BMW</li>
<li>DUCATI</li>
<li>BENZ</li>
<li>TERRANO</li>
<li>CIAZ</li>
</ol>
</body>
</html>
執行上述指令碼後,輸出視窗將彈出,顯示指令碼中使用的不同汽車的有序列表,從數字100開始,因為我們在網頁上寫了value="100"。
使用指令碼
在下面的示例中,我們執行一個指令碼更改文字欄位的值。
示例
<!DOCTYPE html>
<html>
<body>
Name: <input type="text" id="mytutorial" value="THOR">
<p>Click To Change Value </p>
<button onclick="mytutorial1()">Click</button>
<script>
function mytutorial1() {
document.getElementById("mytutorial").value = "BLACK WIDOW";
}
</script>
</body>
</html>
指令碼執行後,它將生成一個輸出,其中包含一個值為"thor"的輸入欄位和一個點選按鈕。當用戶點選按鈕時,事件被觸發,並將輸入值更改為網頁上的"black widow"。
資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP