READ RIFE

Search Posts

HTML Form Input Attributes in Hindi

HTML Form Input Attributes in Hindi - html में form input elements के साथ कई तरह के attributes का उपयोग कर के आप form में अलग अलग तरह के functions डाल सकते हैं और अपने form को यूजर फ्रेंडली बना सकते हैं।

Form के Input Elements के साथ कई ऐसे attributes और Input Restrictions (इनपुट प्रतिबंध) का भी उपयोग कर सकते हैं इनकी मदद से input field में Restrictions लगा सकते हैं ताकि जरुरत के अनुसार यूजर से डाटा enter करा सकें। इनमें से कुछ को सबसे आखिरी में लिखा जाता है। input elements के साथ एक या एक से अधिक attributes का use किया जा सकता है जरुरत के हिसाब से।

HTML Form Input Attributes के प्रकार

List Attribute

Height and width Attributes

Step Attribute - विशेष अन्तराल (number intervals) के नंबर के लिए।

Placeholder Attribute - इसकी help से हम यूजर को बताते हैं कि input field में क्या enter करना है। जब किसी text input element में placeholder का use किया जाता है तो इस से उस field में एक text automatically दिखता है पर उसकी कोई value नहीं होती है जब आप वहां टाइप करते हैं तो cursor ले जाते ही placeholder वाला text गायब हो जाता है।

Pattern Attribute - इसकी मदद से आप ये decide कर सकते हैं कि किसी input field में किस टाइप से डाटा input होगा।

Min and Max Attributes - min - Input field में न्यूनतम range decide करने के लिए।
max - इससे input field में enter होने वाली value की अधिकतम range (in number) दे सकते हैं।

Maxlength Attribute - Input field में अधिकतम कितने अक्षर हो सकते हैं। ये range आप दे सकते हैं।

Size Attribute - इसकी मदद से आप input field की width(चौड़ाई) fix कर सकते हैं।

Value Attribute - इसकी help से आप input field में पहले से एक value रख सकते हैं।

Autocomplete Attribute - Form की field को वेब ब्राउज़र में पहले से save डाटा की मदद से automatically fill कराने के लिए। यह <form> और अन्य <input> types जैसे text, search, url, tel, email, password, datepickers, range, and color के साथ उपयोग किया जा सकता है।

Types of HTML Input attibutes Restrictions in Hindi

disabled - इनपुट फील्ड को disable करने के लिए।

required - ऐसी इनपुट फील्ड को यूजर खाली नहीं छोड़ सकता।

checked - Checkbox और Radio Button में पहले से value select कर के देने के लिए।

Autofocus Attribute - जब यूजर form के webpage को open करता है तो टाइपिंग के लिए cursor, automatically उस input field पर रहता है जिसे autofocus किया गया है।

PHP" method="POST" target="_blank">

Example of HTML Input Element Attributes in Hindi

<!DOCTYPE html>
<html>
<body>

<h1>Input Elements Attributes of Forms</h1>

<form action="HTML/HTML_Form_in_hindi" method="get" target="_blank">

    <hr/>
    <h4 style="color:chocolate;">List Attribute (pre-defined list)</h4>
    <label for="pet">Select Pet Animal:</label>
    <input list="animals">
    <datalist id="animals">
        <option value="Cow">
        <option value="Dog">
        <option value="Cat">
        <option value="Rat">
    </datalist> 

    <hr/>
    <h4 style="color:chocolate;">Autofocus Attribute(cursor automatically here)</h4>
    <label for="title">Site Title:</label><br>
    <input type="text" name="title" autofocus/>

    <hr/>
    <h4 style="color:chocolate;">Width & Height Attributes (with input type image)  </h4>
    <label for="img">Click:</label>
    <input type="image" src="https://picsum.photos/id/237/200/300" alt="Submit" width="40" height="40">

    <hr/>
    <h4 style="color:chocolate;">Input Type password (display in star)</h4>
    <label for="step">Step Number:</label>
    <input type="number" id="num" name="num" step="5">
    
    
    <hr/>
    <h4 style="color:chocolate;">Placeholder attribute (with पासवर्ड text field)</h4>
    <label for="pass">Enter Password:</label>
    <input type="password" name="pass" placeholder="Enter Your password"/>

    <hr/>
    <h4 style="color:chocolate;">Pattern attribute (with text field)</h4>
    <label for="pin_code">Enter PIN code:</label>
    <input type="text" id="pin_code" name="pin_code" pattern="[0-9]{6}" title="only Six Number of area PIN code">

    <hr/>
    <h4 style="color:chocolate;">min and max attributes</h4>
    <label for="maxdate">Enter a date before 2000-01-01:</label>
    <input type="date" id="maxdate" name="maxdate" max="1999-12-31"><br><br>
    <label for="mindate">Enter a date after 2023-01-01:</label>
    <input type="date" id="mindate" name="mindate" min="2023-01-02"><br><br>
    <label for="pcs">Pieces (between 10 and 50):</label>
    <input type="number" id="pcs" name="pcs" min="10" max="50">

    <hr/>
    <h4 style="color:chocolate;">maxlength and size attributes</h4>
    <label for="name">Your Name:</label><br>
    <input type="text" id="name" name="name" size="20"><br>
    <label for="pin">PIN:</label><br>
    <input type="text" id="areapin" name="areapin" maxlength="6" size="6">

    <hr/>
    <h4 style="color:chocolate;">Value Attribute</h4>
    <label for="title">Site Title:</label><br>
    <input type="text" name="title" value="Read Rife"/>
    
    <hr/>
    <h4 style="color:chocolate;">Autocomplete Attribute (yes or no)</h4>
    <label for="title">Site Title:</label><br>
    <input type="text" name="title" value="Read Rife" autocomplete="yes"/>

    <hr/>
    <h4 style="color:chocolate;">disabled Attribute</h4>
    <label for="title">Site Title:</label><br>
    <input type="text" name="title" value="Read Rife" disabled/>

    <hr/>
    <h4 style="color:chocolate;">required Attribute</h4>
    <label for="title">Site Title:</label><br>
    <input type="text" name="title" required/>
    
    <hr/>
    <h4 style="color:chocolate;">checked attribute (with checkbox)</h4>
    <input type="checkbox" name="sport1"/> 
    <label for="sports">Cricket:</label>
    <input type="checkbox" name="sport2" checked/> 
    <label for="sports">Hockey:</label>
    <input type="checkbox" name="sport3" checked/> 
    <label for="sports">Football:</label>

    <hr/>
    <h4 style="color:chocolate;">checked attribute (with radio)</h4>
    <input type="radio" name="sport"/> 
    <label for="sports">Cricket:</label>
    <input type="radio" name="sport"/> 
    <label for="sports">Hockey:</label>
    <input type="radio" name="sport" checked/> 
    <label for="sports">Football:</label>
    
    <hr/>
    <h4 style="color:chocolate;">Input Type submit(for submit form data)</h4>
    <input type="submit">
</form>

<p>जो डाटा आप enter करोगे वो submit करने पर आपको web page के url में data display होगा। क्यों कि यहाँ GET method का उपयोग किया गया है और target blank है इसलिए ये new वेब पेज को वेब ब्राउज़र के new tab में open करेगा।</p>
</body>
</html>

इनको अच्छे से समझने के लिए editor पर इनमे changes कर के practice जरूर करें।

Author : Read Rife

Comments

Important Notice: The information on this page is compiled from various online sources. We make our best effort to curate and present precise information, but we cannot guarantee its absolute accuracy or completeness. It's recommended that you consult official sources and conduct further research to verify the information and ensure it's current.

महत्वपूर्ण सूचना: इस पृष्ठ पर दी गई जानकारी विभिन्न ऑनलाइन स्रोतों से संकलित की गई है। हम सटीक जानकारी को व्यवस्थित और प्रस्तुत करने का पूरा प्रयास करते हैं, लेकिन हम इसकी पूर्ण शुद्धता या पूर्णता की गारंटी नहीं दे सकते। यह अनुशंसा की जाती है कि आप आधिकारिक स्रोतों से सलाह लें और जानकारी सत्यापित करने के लिए और शोध करें ताकि यह सुनिश्चित हो सके कि यह नवीनतम है।

HTML Form Input Attributes in Hindi

Search Posts

HTML Form Input Attributes in Hindi

HTML Form Input Attributes के प्रकार

Example of HTML Input Element Attributes in Hindi

Author : Read Rife

You May Also Like

HTML Form Input Attributes in Hindi

Bhagya Rekha ke Gun-Dosh in Palmistry

HTML List in Hindi

Mixed Hands and Bad Hands in Palmistry

Leave a Comment

Comments

Popular Posts

Related Posts

Courses with certificate

Exam with Certificate

Exams & Courses Creater

Practice Sets

Blog & Article Writing

Exams for Knowledge

HTML Form Input Attributes in Hindi

Search Posts

HTML Form Input Attributes in Hindi

HTML Form Input Attributes के प्रकार

Example of HTML Input Element Attributes in Hindi

Author : Read Rife

You May Also Like

Related Posts

Leave a Comment

Comments

Popular Posts

Related Posts