HTML input attributes के बारे में हिंदी में जाने!

Post Views : 198

HTML input attributes

The type attribute

type attribute value <input>element का निश्चित type specified करता है| अगर type attribute value निश्चित नहीं करते है तो वह by default “text” value होती है|

syntax:

<input type="value">

यह HTML form में दो input field है एक text field है और दूसरा radio button है|

<form>
  <input type="text" name="">
  <input type="radio" name="">
</form>

The value attribute

value attribute <input>element की शरुआती (intial) value define करता है| value attribute का इस्तेमाल सभी input types में अलग-अलग है जैसे की “reset” , “submit” , “button” में button का text(label) define करने के लिए जब की “text” , “radio” , “checkbox” में ये सभी input field की value define करता है |

syntax:

<input value="text">

Example :

<form>
   <input type="text" value="dev">
   <input type="text" value="test">
   <input type="submit" value="submit button">
   <input type="reset" value="Reset">
</form>

output

The readonly attribute

Readonly attribute एक boolean attribute है| readonly attribute <input> element और <textarea> field की value just read कर सकते है इस input field की value को modify या changes नहीं कर सकते|

<label>User First Name :</label>
<input type="text" name="name" value="dev test" readonly>
<textarea readonly>
   this value for the readonly text here we can not change this text.
</textarea>

output

The placeholder attribute

placeholder attribute input field के अनुसार sort में hint बताता है|| यह sort hint input field में display होता है input field की values enter करने से पहले.

<input type="text" name="name" placeholder="Here show placeholder">
<input type="text" name="first-name" placeholder="Enter first name here">

output

The required attribute

required attribute एक boolean attribute है| ये required attribute यह check करता है की form submit के दौरान input filed की value filled out है की नहीं| मतलब की वह input field का validation करता है|

<input type="text" name="name" placeholder="Enter name" required>

output

The class attribute

class attribute HTML element में एक से ज्यादा class name रख सकते है class name का इस्तेमाल css,jquery के निश्चित task perform करने के लिए होता है||

<input type="text" name="name" class="here put class name">

The id attribute

Id attribute HTML element को uniquelly identifies करता है| एक webpage के element में id एक बार ही define किया जाता है| उसका बी इस्तेमाल css और jquery के निश्चित task perform करने के लिए किया जाता है||

<input type="text" name="name" id="here define unique id">

The src attribute

src attribute <img> element में defined किया जाता है वह images का path यानि की location URL define करता है||

<img src="/wp-content/uploads/2021/02/trees-image.jpg">

output

The size attribute

size attribute input element की निश्चित visible width (size) specifies करता है||

<input type="text" name="name" class="names"> 
<input type="text" name="named" class="names" size="8" placeholder="here use size attribute">

output

The max attribute

max attribute input element के लिए maximum values specifies करता है| अगर हम input element में maximum value 8 सेट करते है तो input element की value 8 तक ही सिमित रहेगी उससे ज्यादा हम value को enter नहीं कर सकते है| max and min attribute को input element में साथ ही लिखा जाता है||

<input type="number" min="1" max="8" class="name">

output

The maxlength attribute

maxlength attribute यह specifies करता है के user input element में maximum कितने character eneter कर सकता है||

<input type="text" name="name" maxlength="10">

output

The min attribute

min attribute input element के लिए minimum values specifies करता है| max and min attribute को input element में साथ ही लिखा जाता है||

<input type="number" min="1" max="8" class="name">

output

The minlength attribute

minlength attribute यह specifies करता है के user input element में minimum कितने character eneter कर सकता है||

<input type="text" name="name" minlength="5">

output

The multiple attribute

multiple attribute एक boolean attribute है यह attribute user को multiple value enter और select करने की अनुमति देता है| यह <input>,<select> element specifies में किया जाता है||

<input type="file" name="file" multiple>
OR
<select name="name" multiple>
  <option>One</option>
  <option>Two</option>
  <option>Thres</option>
  <option>Four</option>
</select>

output

The pattern attribute

pattern attribute एक निश्चित reguler expression specifies करता है और वह form submission के दौरान input element की value इस pattern के अनुसार है या नहीं ये check करता है||

<input type="text" name="fname" pattern="[a-z]{2,6}">

The accept attribute

accept attribute <input type=”file”> element में इस्तेमाल होता है वह attribute specifies करता है की user किस type की file select कर सकता है| यानि की user-specific file type को select कर सकता है file types जैसे की “png” “jpg” “jpeg” “gif” etc..

<input type="file" name="img" accept="image/jpg,image/png">

output

The alt attribute

alt attribute <img> element में defines किया जाता है वह image के लिए alternative information दिखता है| जब किसी कारन के चलते image show (display ) नहीं होती है तो वह alternative information दिखता है||

<img src="/wp-content/uploads/2020/08/trees-image.jpg" width="100" height="100" name="img" alt="aternative information for image">

output

The autocomplete attribute

autocomplete attribute यह specifies करता है की input field value को autocomplete करता है मतलब की user जब input field value fill करता है तब user को auto suggetion text value provided होते है|| input field में autocomplete की by default value “on” ही होता है||

<input type="text" name="name" autocomplete="on">

The autofocus attribute

autofocus attribute page load के बाद input field को automattacally focus करता है||

<input type="text" name="name" palceholder="enter firstname"autofocus>
<input type="text" name="name" palceholder="enter lastname">

The checked attribute

checked attribute <input type=”checkbox”>,<input type=”radio”> element में इस्तेमाल किया जाता है यह attribute यह specifies करता है की page load के बाद <input type=”checkbox”>,<input type=”radio”> element की value checked (pre-selected) है की नहीं||

for the checkbox
<input type="checkbox" value="php">PHP
<input type="checkbox" value="html" checked>HTML
<input type="checkbox" value="css">css
OR
For the radio button
<input type="radio" value="male">Male
<input type="radio" value="female" checked>Female
<input type="radio" value="other">Other

output

The disabled attribute

disabled attribute input element को disable करता है और इस disable input element unusable and unclickable होता है||

<input type="text" name="txt" disabled>

output

The step attribute

step attribute input element में specific numbers के बीच का interval specifies करता है||

<input type="number" name="num" step="4">

output