INPUT TAG All Attributes Detail

| January 10, 2022 | HTML | No Comments
  1. List of Attribute of Input Tag
    • Common For All Input Types
      • type
        • String Fields (text, email, url, search, password, tel)
        • Number Fields (number)
        • Buttons (button, submit, reset)
        • Selection (checkbox, radio)
        • Date Time (date, time, datetime-local, week, month)
        • Other (file, color, range)
      • name
      • id
      • autofocus
      • disabled
      • title
    • Other
      • value
      • readonly
      • list
      • placeholder
      • size
    • Validation Related
      • form
      • required
      • maxlength, minlength
      • pattern
      • max, min, step
    • For Input type=”Image” (alt, height, width, src)
    • For input type = “submit” or “Image” (formaction, formenctype, formmethod, formtarget, formnovalidate)
    • For input type=”checkbox” or “radio” (checked)
    • For input type=”file” (multiple)
  2. Bootstrap Class for Input Tag
    • form-control
    • form-check-input
    • form-control-color
  3. Operation on Input Tag Using JavaScript
    • How to Get Attribute Using JavaScript
    • How to Set Attribute Using JavaScript
  4. Operation on Input Tag Using jQuery
    • How to Get Attribute Using jQuery
    • How to Set Attribute Using jQuery
  5. Form Submission
    • How to Submit Value Using Form
    • How to Set Attribute Using PHP
  6. Dynamic Creation of Input Tag
    • How to Dynamic Create Element Using PHP
    • How to Dynamic DOM Creation Using JavaScript

1. List of Attribute

किसी भी tag की बहुत से Attribute और Properties होती हैं, निम्न Image मे जो Red Colour से दिखाई दे रही हैं वह सभी Input tag के attribute हैं । type attribute के अनुसार attribute बदलते रहते हैं , यदि की जैसे जैसे हम input type बदलते हैं attribute भी उसके अनुसार बदलने होते हैं

Input Attributes

TYPE Attribute

type के अनुसार किसी भी Input का Look बदल जाता हैं और उससे संबंधित icon आदि दिखाई देने लगते हैं साथ मे validation के समय भी हमे ज्यादा Coding नहीं करनी होती हैं । आइए हम एक एक कर सभी प्रकार के Input type को समझते हैं ।

1. Text : जब भी हमे कोई भी text जिसमे Alphanumeric Type करना हो तब हम Text का उपयोग करते हैं ।

input type text

2. Email : यदि हमे किसी Field मे email Address Type करवाना हैं तो आप email का उपयोग करे । यह एक तरह से Text ही हैं लेकिन जब हम Form को Submit करेंगे तो आपको अलग से Email Validation नहीं लगाना होगा , यदि आप PHP Validation के बारे मे जानना चाहते हैं यहाँ क्लिक करे

input type email

3. URL : जब भी हमे किसी भी Text मे Address या Web Path Input लेना हो तो हम URL का उपयोग करते हैं । यह भी Text ही हैं इसमे भी Submit करने पर अलग से Validation नहीं लगाना होता हैं ।

input type url


4. Search : यदि आप चाहते हैं की आपको Text के Right मे एक Close Button भी Show होने लगे तो आप Search Type का उपयोग कर सकते हैं ।

input type search


5. Password : यदि हम चाहते हैं की हम जो भी Type कर रहे हैं वह दिखाई न दे तब हमे उसे Password करना होता हैं ऐसा करने पर हम जब भी Type करते हैं तो Character के स्थान पर Bullet Show होने लगती हैं , ओर जो हम Type करते हैं वह किसी को भी दिखाई नहीं देता ।

input type password


6. Tel : यदि हम Telephone और Mobile Number टाइप करने के लिए Input लेना चाहते हैं तो आपको tel का उपयोग करना चाहिए

input type tel


7. Number : जब हमे केवल Number ही Input करवाने हो तब हम type number का उपयोग करते हैं । इसमे हमे Right Side मे Up Down Arrow दिखाई देने लगते हैं उनको Click कर हम Value को बड़ा घटा सकते है ।

input type number

8. Button : जब हमे कोई Button बनाना हो तब हम Button का उपयोग करते हैं ।

input type button


9. Submit : जब हमे ऐसा button बनाना हो जिसको Press करने से Form पर दिया गया Data अन्य Page पर Submit हो तब हम type submit का उपयोग करते हैं ।

input type submit


10. Reset : Screen के सभी Input को एक साथ Blank करने के लिए हम Reset का उपयोग करते हैं ।

input type reset

11. Checkbox : यदि हम Tick Box बनाना चाहते हैं तो हम Checkbox का उपयोग करते हैं ।

input type checkbox


12. Radio : यदि हम Option Box बनाना चाहते हैं तो हम Radio का उपयोग करते हैं ।

input type radio

13. Date : यदि हमे Date Select करवाना हैं तो हम type Date का उपयोग करते हैं ।

input type date


14. Time : यदि हमे Time Input लेना हैं तो हम Time का उपयोग करते हैं ।

input type time


15. DateTime-Local : यदि हमे Date के साथ Time भी Input लेना है तो हम Datetime-Local का उपयोग करते है ।

input type datetime-local


16. Week : Week Selection के लिए हम Week का उपयोग करते हैं ।

input type week


17. Month : Month Selection के लिए Month का उपयोग करते हैं ।

input type month

18. File : यदि हमे कोई File Upload करवाना हो तो हम type file का उपयोग करते हैं , File Upload का पूरा Code देखने के लिए यह क्लिक करे


19. Color : यदि हमे Screen से Color selection करवाना हैं तो हम type color उपयोग कर सकते हैं ।

input type color


20. Range : यदि हमे Number की कोई Specific Range के बीच का ही data Input करवाना हैं तो हम Range का उपयोग करते है ।

input type range

आपके समझने के लिए यहाँ पर एक एक साथ सभी के Code लिखे हैं ताकि आप खुद इसका उपयोग कर देख ले । 

<table>
<tr><td>1.</td> <td>Text  </td> <td>:</td> <td><input  type="text"></td></tr>
<tr><td>2.</td> <td>Email </td> <td>:</td> <td> <input  type="email"></td></tr>	
<tr><td>3.</td> <td>URL </td> <td>:</td> <td> <input  type="url"></td></tr>
<tr><td>4.</td> <td>Search</td> <td>:</td> <td>  <input  type="search"></td></tr>
<tr><td>5.</td> <td>Password </td> <td>:</td> <td> <input  type="password"></td></tr>
<tr><td>6.</td> <td> Tel </td> <td>:</td> <td> <input  type="tel"></td></tr>
<tr><td>7.</td> <td>Number </td> <td>:</td> <td> <input  type="number"></td></tr>

<tr><td>8.</td> <td>Button</td> <td>:</td> <td> <input  type="button"></td></tr>
<tr><td>9.</td> <td>Submit </td> <td>:</td> <td> <input  type="submit"></td></tr>
<tr><td>10.</td> <td>Reset </td> <td>:</td> <td> <input  type="reset"></td></tr>
	
<tr><td>11.</td> <td>Checkbox </td> <td>:</td> <td> <input  type="checkbox"></td></tr>
<tr><td>12.</td> <td>Radio </td> <td>:</td> <td> <input  type="radio"></td></tr>
	
<tr><td>13.</td> <td>Date </td> <td>:</td> <td> <input  type="date"></td></tr>
<tr><td>14.</td> <td>Time </td> <td>:</td> <td> <input  type="time"></td></tr>
<tr><td>15.</td> <td>DateTime-Local </td> <td>:</td> <td> <input  type="datetime-local"></td></tr>
<tr><td>16.</td> <td>Week </td> <td>:</td> <td> <input  type="week"></td></tr>
<tr><td>17.</td> <td>Month </td> <td>:</td> <td> <input  type="month"></td></tr>

<tr><td>18.</td> <td>File </td> <td>:</td> <td> <input  type="file"></td></tr>
<tr><td>19.</td> <td>Color </td> <td>:</td> <td> <input  type="color"></td></tr>
<tr><td>20.</td> <td>Range </td> <td>:</td> <td> <input  type="range"></td></tr>
</table>

सभी का Preview एक साथ यहाँ पर दिखाया गया हैं ।

input types detail

हमारे अन्य आर्टिकल

name=”Name of Input”

जब भी हमे form पर दिए गए Input की value को GET/POST Method के द्वारा किसी अन्य Page पर पहुचाई जाती हैं तब हमे value Read Name के द्वारा ही कर सकते हैं । इसलिए जब भी Form tag का उपयोग करे तो ध्यान रहे की name attribute मे value दी गई हो ।

जब ही हम एक से अधिक tag के name एक जैसे रख देते हैं तो उसे हमे Array के द्वारा Read करना होता हैं, साथ ही मे input type Radio मे हम एक से अधिक Radio के name एक जैसे रखते हैं ताकि उन्मे से किसी एक को ही सिलेक्ट कर पाए ।

id=”id of input”

किसी भी दो tag के id हमे एक जैसे नहीं देना चाहिए , id हमेशा ही Unique रखना चाहिए । Javascript / Jquery और css लिखते समय किस एक element पर कुछ भी Operation करना हो तो हमे id attribute का ही उपयोग करना होता हैं ।


autofocus

इस Attribute को सेट करने जैसे ही Page Load होता हैं जिस पर आपने Autofocus लिखा हैं उस पर Focus चला जाता हैं। यदि भी एक ही Element पर लिखना चाहिए यदि आपने एक से अधिक पर लिखा हैं तो यह जो पहले हैं उस पर Focus कर देगा ।


disabled

यदि हम चाहते हैं की कोई भी Element पर किसी भी प्रकार का चेंज न कर पाए तो हम उसे Disable कर देते हैं , ऐसा करने पर इसका Look भी कुछ अलग दिखाई देने लगता हैं । जब हम Tab button press करते हैं tab इस पर Focus नहीं आता हैं और साथ ही मे यदि page submit किया जाए तो इसकी Value Submit भी नहीं होती हैं ।

input disabled
<input  type="text" disabled value ="Imagination " >

title = “Enter Tooltips /Help Text”

यदि हमे किसी भी element पर उसके बारे मे कोई बड़ी जानकारी या किसी प्रकार की Help देना हो तो हम title attribute का उपयोग करते हैं , इसे tooltip भी कहा जाता हैं ।

input title
<input  type="tel" title="Enter Phone Number with STD Code">


value = “Value of Input”

किसी भी Input पर यदि हमे कोई Default Value या भी Dynamic कोई value Set करना हो तो हम value attribute का उपयोग करते हैं ।

input value
<input  type="url" value ="https://selfimagination.in/tips">

readonly

Read-only Attribute से Element की value को Edit नहीं किया जा सकता हैं । इस पर Focus जाता हैं और साथ मे इसकी वैल्यू Form GET/POST Method से send भी की जा सकती हैं ।


list=”Datalist ID”

जब भी हमे किसी Text पर Auto Suggestion या कोई Predefined List दिखाना हो तो हम इस पर हमारे द्वारा पहले से बनाई गई datalist का id सेट कर देते हैं ऐसा करना से जब भी User इस element पर कुछ भी Type करेगा तो List मे Related Data दिखाई देने लगेगा ।


placeholder=”Text for Help”

यह भी Help Text जैसा कार्य करता हैं, लेकिन यह केवल तब ही दिखाई देता हैं जब Text की value blank होती है जैसे ही हम कोई Value Fill करते हैं वैसे ही यह Hide हो जाता हैं ।

size =”width in Character”

हम जो भी Width रखना कहते हैं वह Value यहा पर लिखते हैं ऐसा करने से element की width Increase हो जाती है ।

form=”Form Name”

यदि हमे किसी Element को form के बाहर रखा हैं तब हम इस Attribute मे उस Form का नाम लिख कर Element को उस Form से Connect कर सकते हैं ।

required

यदि हमने किसी भी element पर required attribute सेट किया हैं तो जब हम form को submit करेंगे तो वह तब तक Submit नहीं होगा जब तक की उस element पर कोई वैल्यू सेट न की हो । हम ऐसा भी कह सकते हैं की यदि किसी element पर यदि required सेट कर दिया तो बिना value के form submit नहीं होगा ।

maxlength = “Enter Max Number Limit”

हम जो भी Max Width यानि की Number of Character enter करने की Permission देना चाहते हैं वह यहाँ से सेट कर सकते हैं, यदि आपने किसी Element की maxlength को 5 set किया हैं तो वह element 5 character value ही accept करेगा । उससे अधिक type ही नहीं होगा ।

minlength = “Enter Min Number Limit”

हम जो भी Min Width यानि की Minimum Number of Character enter करवाना चाहते हैं वह यहाँ से सेट कर सकते हैं, यदि आपने किसी Element की minlength को 5 set किया हैं तो वह element कम से कम 5 character value ही accept करेगा । उससे कम वैल्यू देने पर Form Submit नहीं होगा ।

pattern = “regexp”

यदि हम कोई Pattern सेट करना चाहते हैं तो यहाँ पर सेट कर सकते हैं । यह एक तरह से Customize validation होता हैं । इस पर हम Coding कर validation लगा सकते हैं ।

max=”Enter Maximum Value”

किसी भी number ओर date element पर यदि हम max value सेट कर देंगे तो उससे अधिक वैल्यू को accept नहीं करेगा ।

min=”Enter Minimum Value”

किसी भी number ओर date element पर यदि हम min value सेट कर देंगे तो उससे कम वैल्यू को accept नहीं करेगा ।

step=”Increment/Decrement Interval”

number field ओर Date Filed पर Arrow से क्लिक करने पर कितनी Value Increment / Decrement करना चाहते हैं वह इस attribute से सेट की जाती हैं । by default इसकी value 1 होती हैं ।

alt =”Alternate Text”

इमेज पर हमे alt attribute सेट करना होता हैं यह search engine को बताता हैं की अपने जो image लगाई हैं उसका क्या कार्य हैं ताकि वह सर्च मे आ सके ।

height =”Height of Image”

image की Height सेट करने के लिए

width =”Width of Image”

इमेज की Width सेट करने के लिए

src =”Image Path”

Image का path set करने के लिए ।

formaction = “Action Page Path”

form को submit करने पर हमे किस पेज पर value send करना हैं उस page का नाम यहाँ पर लिखा जाता हैं , यदि आप यहाँ पर कुछ भी नहीं लिखेंगे तो by default जिस पेज पर हैं उसी पर submit हो जाएगा।


formenctype = “multipart/form-data”

form का enctype यहाँ से सेट किया जाता हैं , यदि हमे form data भेजना हैं तो हम multipart/form-data लिखते हैं यदि हमे केवल Text ही send करना हैं तो हम plain/text लिखते हैं ।

formmethod = “GET/POST”

form की जिस भी Method से GET/POST करना हो वह Method यहाँ पर लिखी जाती हैं । यदि आप GET/POST को Example से समझना चाहते हैं तो यहाँ पर क्लिक करे ।

formtarget = “_self/_blank/_top/_parent”

जब हम form को submit करेंगे तो जो page हमने action मे लिखा हैं वह जो current पेज हैं इसी पर open हो या नए tab पर ओपन हो उससे संबंधित setting यहाँ से की जाती हैं ।

formnovalidate

यदि हम बिना validation के ही form को submit करना चाहते है तो हम इस attribute का उपयोग करते हैं ।

checked

Checkbox और Radio पर Value set और get करने के लिए हमे checked attribute का उपयोग करना होता हैं ।

multiple

जब हम file input द्वारा एक से अधिक file select करना हो तब हम multiple attribute का उपयोग करते हैं ।

2. Bootstrap Class for Input Tag

जब भी आप किसी भी input पर Bootstrap की Class सेट कर देंगे तो उसके Look मे बदलाव या जाएंगे और वह पहले से और भी अच्छा और एक fix width का दिखाई देने लगेगा , हमने निम्न Image मे बताया हैं की जब ही आप Bootstrap की Class लगा देते हैं तो उसके बाद input type अनुसार उनके Look मे क्या Change आते हैं , वह इस प्रकार हैं ।

Input Tag with or without bootstrap

form-control

Checkbox , Radio को छोड़कर सभी मे form-control class का ही उपयोग किया जाता हैं ।

form-check-input

Checkbox और Radio type मे इस Class का उपयोग किया जाता हैं ।

form-control-color

type Color मे हमे form-control के साथ form-control-color का भी उपयोग करना हैं यदि Height मे कोई इशू आए तो आप हाइट सेट कर सकते हैं ।

btn btn-<color>

Button पर Form Control का उपयोग नहीं किया जाता हैं । उस पर आपको Btn क्लाससेस का उपयोग करना होता हैं ।

How to Use Bootstrap Class on Input

निम्न Example मे बताया गया हैं की हम किस तरह से Bootstrap का उपयोग कर सकते हैं । 

<html>
    <head>
        <title>Imagination Bootstrap Example</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    </head> <!-- 1 -->
    <body>
		<div class="container-fluid "> <!-- 2  -->


		<div class="row border m-3 p-2"> <!-- 3 -->


			<div class="col-6"> <!-- 4 -->


				<input  type="text"><br>
				<input  type="email"><br>	
				<input  type="url"><br>
				<input  type="search"><br>
				<input  type="password"><br>
				<input  type="tel"><br>
				<input  type="number"><br>

				<input  type="button"><br>
				<input  type="submit"><br>
				<input  type="reset"><br>
				
				<input  type="checkbox"><br>
				<input  type="radio"><br>
				
				<input  type="date"><br>
				<input  type="time"><br>
				<input  type="datetime-local"><br>
				<input  type="week"><br>
				<input  type="month"><br>

				<input  type="file"><br>
				<input  type="color"><br>
				<input  type="range"><br>
			</div>
			<div class="col-6">
				<input class="form-control" type="text">
				<input class="form-control" type="email">
				<input class="form-control" type="url">
				<input class="form-control" type="search">
				<input class="form-control" type="password">
				<input class="form-control" type="tel">
				<input class="form-control" type="number">

				<input class="btn btn-info" type="button">
				<input class="btn btn-success" type="submit">
				<input class="btn btn-primary" type="reset">
				
				<input class="form-check-input" type="checkbox">
				<input class="form-check-input" type="radio">
				
				<input class="form-control" type="date">
				<input class="form-control" type="time">
				<input class="form-control" type="datetime-local">
				<input class="form-control" type="week">
				<input class="form-control" type="month">

				<input class="form-control " type="file"/>
				<input class="form-control form-control-color " style="height:40px" type="color"/>
				<input class="form-range" type="range"/>
			</div>
		
		</div>
	
		
		</div>
    </body>
</html>

1. Link : यहाँ से हमने बूटस्ट्रैप CDN को लिंक किया हैं । जिससे Bootstrap की Class Execute हो सके ।

2. container-fluid : हमे screen की पूरी width का उपयोग करना था इसलिए हमे container-fluid class का उपयोग किया ।

3. row border m-3 p-2 : यहाँ पर हमने Border show की हैं ओर Margin और Padding दी हैं ताकि एक box अलग ही दिखाई दे ।

4. col-6 : ऐसा कर हमने Screen को 12 Columns मे से 6 Without Bootstrap और 6 को Bootstrap input दिखने के लिए दो भाग मे Distribute किया हैं ।

3.1 How to Get Attribute Using JavaScript

जब भी हम JavaScript के द्वारा Client Side पर कोई Event पर Scripting करेंगे तब हमे JavaScript का उपयोग कर Value Get /Read करने की जरूरत लगेगी , इस Example मे हमने समझाया हैं की किस तरह से हम Value/Attribute को Read कर सकते हैं । 

<html> 
    <head><title>Value Read Using JavaScript </title></head>
    <body>
	<input type="text" value="OK" id="myText"/>
	<input type="button" value="OK" onclick="GetMsg()"/>
	<script>
		function GetMsg()
		{
                        //Method 1
  		        var v1 = document.getElementById("myText").value; 
			alert(v1);


                        //Method 2
			var v2 = document.getElementById("myText").getAttribute("value"); 
			alert(v2);
		}
	</script>
    </body>
</html>
  • जब भी हमे JavaScript का कोई भी Code Execute करना होता हैं तो HTML कोई भी अलग से File को link नहीं करना होता हैं, JavaScript Browser पर ही Enable होती हैं
  • हमने यह पर Button के Click Event से एक Function Call किया हैं और Value को Read कर Use Alert के द्वारा दिखाया गया हैं ।
  • Method 1. जब आप .value का उपयोग करते हैं तो सीधे ही आप value Attribute के data को Read कर सकते हैं
  • Method 2. इस Method मे हमने getAttribute Function का उपयोग किया हैं जिससे आप जिस भी Attribute की Value Read करना चाहते हैं उसका नाम लिख कर उसे Read कर सकते हैं, जब हम Custom Attribute बना लेते हैं तो getAttribute से Read करते हैं ।

3.2 How to Set Attribute Using JavaScript

जब भी हमे JavaScript से किसी Input पर Value set करना हो तो हम इस प्रकार से Code लिखते हैं , जैसा की हमने पहले बताया था की JavaScript का उपयोग करने के लिए हमे अलग से कोई CDN जोड़ने की जरूरत नहीं होती हैं । 

<html> 
    <head><title>Value Read Using JavaScript </title></head>
    <body>
	<input type="text" value="OK" id="myText"/>
	<input type="button" value="OK" onclick="GetMsg()"/>
	<script>
	function GetMsg()
	{
		//Method 1
		document.getElementById("myText").value = 500;
				
		//Method 2
		document.getElementById("myText").setAttribute("value", "500"); 
	}
	</script>
    </body>
</html>
  • यहाँ पर हमने Button के द्वारा एक Function call किया हैं । ओर उस function मे Value set करने की Coding की हैं ।
  • Method 1 : जब भी हमे Current Value को Runtime पर Set करना हो तो हमे .value का उपयोग की करना चाहिए
  • Method 2 : जब हम Dynamic DOM Creation करते है या फिर हमे Custom Attribute मे कोई Value set करना हो तो हम SetAttribute का उपयोग करते हैं ।

4.1 How to Get Attribute Using jQuery

jQuery के द्वारा Value Get करने के लिए हमे CDN ऐड करना होती हैं , CDN Proper add होने के बाद ही हम jQuery का उपयोग कर सकते हैं, जिस पर हमने JavaScript मे भी Read करने के लिए दो method देखि थी वैसे ही मेथड jQuery मे भी हैं , हम किसी का भी उपयोग कर सकते हैं । 

<html>
    <head>
	<title>jQuery</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="  crossorigin="anonymous"></script>
	<script>
		function GetValue()
		{
			//Method 1
			var v1 = $("#myText").val(); 
			alert(v1);
			//Method 2
			var v2 = $("#myText").attr("value"); 
			alert(v2);
		}
	</script>
    </head>
    <body>
	<input type="text" value="MyValue" id="myText"/>
	<input type="button" value="OK" onclick="GetValue()"/>
    </body>
</html>
  • Script scr के द्वारा हमने jQuery को ऐड करने के लिए library file को ऐड किया हैं ।
  • यहाँ पर भी हमें एक Function GetValue बनाया हैं ओर उसे Button पर Call किया हैं ।
  • और Alert मे दोनों ही method से Output के एक Message Box के माध्यम से स्क्रीन पर Display किया हैं ।
  • Method 1 : jQuery से Value Get /Read करने के लिए हमे val का ही उपयोग करना चाहिए ।
  • Method 2 : attr का उपयोग आप Value Read करने के लिए कर सकते हैं , इसमे आप braket मे inverted comma मे जो भी नाम लिखेंगे उस attribute की value को आप Get कर सकते हैं ।

4.2 How to Set Attribute Using jQuery

jQuery के द्वारा Value Set करने के लिए भी हमे CDN ऐड करना होती हैं , CDN Proper add होने के बाद ही हम jQuery का उपयोग कर सकते हैं, जिस पर हमने JavaScript मे भी Set करने के लिए दो method देखि थी वैसे ही मेथड jQuery मे भी हैं , हम किसी का भी उपयोग कर सकते हैं । 

<html>
    <head>
	<title>jQuery</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="  crossorigin="anonymous"></script>
	<script>

		function SetValue()
		{
			//Method 1
			$("#myText").val("Using Val"); 
		}
		function SetProp()
		{
			//Method 2 
			$("#myText").prop("value", "Using Prop"); 
		}
		
	</script>
    </head>
    <body>
	<input type="text" value="" maxlength="2" id="myText"/>
	<input type="button" value="Set Value using val"  onclick="SetValue()"/>
	<input type="button" value="Set value using prop" onclick="SetProp()"/>
    </body>
</html>
  • Script scr के द्वारा हमने jQuery को ऐड करने के लिए library file को ऐड किया हैं ।
  • यहाँ पर हमने दो function बनाया है जिसमे से एक Function से हमने .val method का उपयोग किया है ओर दूसरे function से हमने । prop का उपयोग कर value को सेट किया हैं ।
  • दो अलग अलग button बना कर दोनों ही function को call किया हैं ।
  • .val method का उपयोग करने से हम केवल value attribute को ही Set कर सकते हैं
  • .prop method का उपयोग कर हम जिस भी attribute का नाम पहले parameter लिखेंगे उसकी वैल्यू को Set कर सकते हैं ।

5.1 How to Submit Value Using Form

यदि हम php के द्वारा किसी भी Input की वैल्यू Read करना चाहते हैं तो हमे Form Submit का उपयोग करना होता हैं क्युकी php Server Side Scripting Language हैं इसलिए हमे Form को Server पर Submit करना होता हैं Submit के लिए आप जिस तरह से हमने बताया हैं ऐसे भी कर सकते हैं और यदि आप Ajax के द्वारा Submit करना चाहते हैं तो यह Article Read करे । 

<html> 
    <head><title>Imagination Send Value Using PHP</title></head>
    <body>
	<form  action="MyPage.php" method="post">
		<input type="text"    name="MyText"/>
		<input type="submit" value="Submit" />
		
    </body>
</html>
  • PHP पर किसी भी Data को ले जाने के लिए हमे Form tag का उपयोग करना होता हैं ।
  • Action : Form tag के action attribute पर हम उस page का path लिख देते हैं जहा पर हमे Value भेजना हैं ।
  • Method : आप GET/POST मे से कोई भी Select कर सकते हैं , GET / POST के बारे मे जानने के लिए यहाँ Click करे ।
  • Input Attribute Name : जब भी आप Form को Submit करे तो name Attribute को जरूर सेट करे ।
  • Input type Submit : form सबमिट जब ही होगा तब जिस बटन से आप Submit कर रहे उसका type submit हो या फिर आप Ajax का उपयोग कर रहे हैं तो फिर submit होना आवश्यक नहीं हैं । 

<?php

$p_MyText="";
if (isset($_POST['MyText']))
{	
	$p_MyText = $_POST['MyText'];
}

echo $p_MyText;

?>
  • जैसे ही आप input text मे वैल्यू देने के बाद Submit button को press करेंगे Form उपरोक्त page पर आएगा ।
  • हमने post method से डाटा Send किया हैं इसलिए हमने यहाँ पर भी $_POST का उपयोग किया हैं
  • $_POST मे Square Braces मे हम Inverted Comma मे input type name मे जो हमने लिखा हैं वही लिखते हैं ।
  • Isset का उपयोग चेक करने के लिए किया जाता हैं की Page Direct open हुआ हैं या Method द्वारा ओपन किया गया हैं ।
  • echo से हमने जो भी input की वैल्यू होगी उसी स्क्रीन पर Display किया हैं ।

5.2 How to Set Attribute Using PHP

जो भी data हम POST से Receive करते हैं यदि उसे Input tag मे सेट करना हो तो हम PHP का उपयोग कर बहुत ही आसानी से display कर सकते हैं । इस Example मे एक ही Page पर Action दे कर उस पर ही PHP की Value को फिर से Set किया हैं । 

<?php
	$p_MyText="";
	$NewVal="";
	if (isset($_POST['MyText']))
	{	
		$p_MyText = $_POST['MyText'];
		$NewVal = "Hello " . $p_MyText;
	}
?>
<html> 
    <head><title>Imagination Send Value Using PHP</title></head>
    <body>
	<form  action="YourPage.php" method="post">
		<input type="text"    name="MyText" placeholder="Enter your Name" value="<?php echo $NewVal;?>"/>
		
		<input type="submit" value="Submit" />
	</form>
    </body>
</html>
  • जब आप इस page को Load करेंगे तब isset वाली Condition का Code Execute नहीं होगा , जब हम form को Button द्वारा Submit करेंगे तब वह Code run होगा ।
  • Form की Action Same Page पर ही हैं इसलिए post पर फिर से यही Page open होगा ।
  • जब भी Post से page open होगा तब $NewVal Variable मे आपने जो Type किया है उसके पहले Hello जुड़कर फिर से Input की Value मे Set हो जाएगा ।
  • इस तरह से आप कोई भी Attribute को भी Set कर सकते है ।

6.1 How to Dynamic Create Element Using PHP

जब भी PHP Execute होती हैं आप उसके द्वारा कोई भी HTML Element Draw कर सकते हैं । इस Example मे हमने जो value हमने इसके पहले वाले Example मे केवल Value पर Set की थी उसे अब पूरे Input tag को ही Create किया हैं। 

<?php
	$p_MyText="";
	$NewVal="";
	if (isset($_POST['MyText']))
	{	
		$p_MyText = $_POST['MyText'];
		$NewVal = "Hello " . $p_MyText;
	}
?>
<html> 
    <head><title>Imagination Send Value Using PHP</title></head>
    <body>
	<form  action="YourPage.php" method="post">
		<input type="text"    name="MyText" placeholder="Enter your Name" />

		<?php
			echo '<input type="text" value="'.$NewVal.'"/>';		
		?>
		<input type="submit" value="Submit" />
	</form>
    </body>
</html>
  • Same Page पर Form को Submit किया हैं ।
  • उसके बाद जो Value को हमने $_POST के द्वारा Receive किया हैं उसके पहले Hello जोड़ कर उसे पुनः Value मे Set कर दिया हैं
  • इस प्रकार आप और भी Attribute set कर सकते हैं ।
  • जिस पेज को आप Load कर रहे हैं सबमिट होने पर उसी पर Action होने के कारण फिर से Open हो रहा हैं ।

6.2 How to Dynamic DOM Creation Using JavaScript

हम JavaScript का उपयोग कर भी Dynamic Object बना सकते हैं । निम्न Example मे हमने एक input बनाया हैं और उसे MyDiv पर Append किया हैं । 

<html> 
    <head>
	<title>Imagination DOM Creation Example</title>
	<script>
		function CreateElement()
		{
			var divp = document.getElementById("MyDiv");
			var t = document.createElement("input");
			t.type = "text";
			t.name = "Name Of Input";
			t.id   = "Input ID";
			t.value= "Set the Value";
			t.className= "form-control";
			t.setAttribute('CustomAttribute', 'CA');
			t.onclick = function() {  };
			t.style = "";
				divp.appendChild(t);
		}
	</script>
    </head>
    <body>
	<input type="button" onclick="CreateElement()" value="Create Element"/>
	<div id="MyDiv"></div>
    </body>
</html>
  • हमने यहाँ पर एक Div बनाया हैं जिसका id MyDiv लिया हैं । इसमे और कोई भी HTML नहीं हैं ।
  • फिर हमने एक input type button बनाया हैं और उसके Click Event पर CreateElement() function को call किया हैं ।
  • document.createElement(“input”); का उपयोग कर input बनाया हैं आप यहाँ पर कोई भी Tag का नाम लिख उसे बना सकते हैं ।
  • उसके बाद जो जो भी Attribute हमे Set करना हैं उनको सेट करते हैं ।
  • जिन्हे नहीं करना हैं उसके लिखें की आवश्यकता नहीं हैं , आपको समझाने के लिए यहाँ पर सभी लिखे हैं ।
  • आखरी मे हमने जो Div बनाया हैं उस पर appendChild का उपयोग कर New Create DOM को Div मे Insert कर देते हैं ।

INPUT TAG SUMMARY

इस HTML INPUT TAG Article मे हमने Input के सभी Attribute , साथ मे Type Attribute मे possible value और उनके दिखाई देने वाले Look या Design को बताया हैं , साथ मे हमने Bootstrap लगने के बाद Look मे जो Changes आएंगे उनके बारे मे भी बताया है , उसके बाद हमने JavaScript , jQuery से कैसे वैल्यू Get /Set करते हैं उसके बारे मे बताया हैं और अंत मे किस तरह से हम Dynamic Object Creation करते हैं उसके बारे मे बताया हैं ।

आशा हैं मुझे आपको समझ आया होगा , यह आर्टिकल कैसा लगा हमे Comment कर जरूर बताए ।

धन्यवाद

Related Posts

Add a Comment

Your email address will not be published. Required fields are marked *