Thuộc tính name của Input Range trong HTML DOM

Thuộc tính name của HTML DOM Input Range được sử dụng để thiết lập hoặc trả về thuộc tính name của trường range. Thuộc tính name giúp xác định dữ liệu form sau khi submit lên server. JavaScript cũng có thể dùng name để tham chiếu phần tử form để thao tác sau này.

Cú pháp

Cú pháp để thiết lập thuộc tính name:

rangeObject.name = name

Ở đây, name dùng để chỉ định tên cho điều khiển thanh trượt range.

Ví dụ

Ví dụ minh họa cho thuộc tính name của Input Range:

<!DOCTYPE html> <html> <body> 
<h1>Thuộc tính name của Input Range</h1> 
<form> 
ÂM LƯỢNG <input type="range" id="RANGE1" name="VOL"> 
</form> 
<p>Thay đổi tên của thanh trượt trên bằng cách nhấn nút dưới đây</p> 
<button type="button" onclick="changeName()">ĐỔI TÊN</button> 
<p id="Sample"></p> 
<script> 
    function changeName() { 
        document.getElementById("RANGE1").name ="VOLUME" ; 
        document.getElementById("Sample").innerHTML = "Tên thanh trượt hiện là VOLUME"; 
    } 
</script> </body> </html>

Kết quả

Đoạn mã trên sẽ tạo ra kết quả như sau:

Khi nhấn nút ĐỔI TÊN:

Trong ví dụ trên:

Chúng ta tạo trường input trong form với type="range", id="RANGE1", name="VOL":

<form> ÂM LƯỢNG <input type="range" id="RANGE1" name="VOL"> </form>

Tạo nút ĐỔI TÊN thực thi phương thức changeName() khi được nhấn:

<button type="button" onclick="changeName()">ĐỔI TÊN</button>

Phương thức changeName() dùng getElementById() lấy trường range và thiết lập name="VOLUME". Thay đổi phản ánh trong đoạn văn id="Sample" qua innerHTML:

function changeName() { 
    document.getElementById("RANGE1").name ="VOLUME" ; 
    document.getElementById("Sample").innerHTML = "Tên thanh trượt hiện là VOLUME"; 
}