HTML में तत्व का मान कैसे जोड़ें?

value एट्रिब्यूट

value एट्रिब्यूट HTML में विभिन्न फॉर्म तत्वों का प्रारंभिक या वर्तमान मान निर्दिष्ट करता है। यह निम्नलिखित तत्वों के साथ काम करता है: <button>, <input>, <li>, <option>, <meter>, <progress>, <param>।

तत्व-वार उपयोग

1. <input> तत्व

<!-- टेक्स्ट इनपुट -->
<input type="text" name="username" value="डिफ़ॉल्ट नाम">

<!-- रेडियो बटन (चयनित मान सबमिट होता है) -->
<input type="radio" name="gender" value="male"> पुरुष
<input type="radio" name="gender" value="female" checked> महिला

<!-- चेकबॉक्स -->
<input type="checkbox" name="subscribe" value="yes" checked> समाचार पत्र

<!-- हिडन फील्ड -->
<input type="hidden" name="csrf_token" value="abc123xyz">

<!-- बटन (लेबल के रूप में कार्य करता है) -->
<input type="button" value="क्लिक करें" onclick="alert('क्लिक किया गया')">
<input type="submit" value="फॉर्म भेजें">
<input type="reset" value="रीसेट">

2. <button> तत्व

<button type="submit" name="action" value="save">सेव करें</button>
<button type="submit" name="action" value="delete">हटाएँ</button>
<!-- सर्वर को action=save या action=delete प्राप्त होगा -->

3. <option> तत्व (ड्रॉपडाउन)

<select name="country">
    <option value="in">भारत</option>
    <option value="us" selected>संयुक्त राज्य</option>
    <option value="uk">यूनाइटेड किंगडम</option>
</select>
<!-- चयनित विकल्प का value सबमिट होता है -->

4. <li> तत्व (क्रमबद्ध सूची)

<ol>
    <li value="10">दसवाँ आइटम</li>
    <li>ग्यारहवाँ आइटम</li> <!-- स्वचालित रूप से 11 -->
    <li value="20">बीसवाँ आइटम</li>
    <li>इक्कीसवाँ आइटम</li> <!-- स्वचालित रूप से 21 -->
</ol>

5. <meter> और <progress> तत्व

<!-- मीटर: ज्ञात सीमा के भीतर मान -->
<label for="disk">डिस्क उपयोग:</label>
<meter id="disk" min="0" max="100" value="75">75%</meter>

<!-- प्रगति: कार्य पूर्णता -->
<label for="upload">अपलोड प्रगति:</label>
<progress id="upload" max="100" value="45">45%</progress>

6. <param> तत्व (ऑब्जेक्ट के लिए)

<object data="movie.swf" type="application/x-shockwave-flash">
    <param name="quality" value="high">
    <param name="autoplay" value="false">
</object>

उदाहरण: रेडियो बटन समूह

<!DOCTYPE html>
<html>
<body>
    <h2>लिंग चुनें</h2>
    <form>
        <input type="radio" id="male" name="gender" value="male">
        <label for="male">पुरुष</label><br>
        
        <input type="radio" id="female" name="gender" value="female" checked>
        <label for="female">महिला</label><br>
        
        <input type="radio" id="other" name="gender" value="other">
        <label for="other">अन्य</label><br><br>
        
        <button type="button" onclick="showValue()">चयनित मान दिखाएँ</button>
    </form>
    <p id="result"></p>
    
    <script>
        function showValue() {
            const selected = document.querySelector('input[name="gender"]:checked');
            document.getElementById('result').textContent = 
                selected ? 'चयनित: ' + selected.value : 'कोई चयन नहीं';
        }
    </script>
</body>
</html>

JavaScript से मान प्राप्त करना/सेट करना

// मान प्राप्त करें
const value = document.getElementById('myInput').value;

// मान सेट करें
document.getElementById('myInput').value = 'नया मान';

// चेकबॉक्स/रेडियो के लिए
const isChecked = document.getElementById('myCheckbox').checked;
document.getElementById('myCheckbox').checked = true;