Jassif Team Institution

HTML உள்ளீட்டு பண்புக்கூறுகள்

இந்த அத்தியாயம் HTML <input> உறுப்புக்கான வெவ்வேறு பண்புக்கூறுகளை விவரிக்கிறது.

value பண்புக்கூறு

உள்ளீட்டு value பண்புக்கூறு ஒரு உள்ளீட்டுப் புலத்திற்கான ஆரம்ப மதிப்பைக் குறிப்பிடுகிறது:

எடுத்துக்காட்டு

ஆரம்ப (இயல்புநிலை) மதிப்புகளைக் கொண்ட உள்ளீட்டுப் புலங்கள்:

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe">
</form>

readonly பண்புக்கூறு

உள்ளீட்டு readonly பண்புக்கூறு ஒரு உள்ளீட்டுப் புலம் படிக்க மட்டுமே என்று குறிப்பிடுகிறது.

படிக்க மட்டுமே உள்ளீட்டுப் புலத்தை மாற்ற முடியாது (இருப்பினும், ஒரு பயனர் அதைத் தாவலாம், முன்னிலைப்படுத்தலாம் மற்றும் உரையை நகலெடுக்கலாம்).

எடுத்துக்காட்டு

படிக்க மட்டுமே உள்ளீட்டுப் புலம்:

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John" readonly><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe">
</form>

disabled பண்புக்கூறு

உள்ளீட்டு disabled பண்புக்கூறு ஒரு உள்ளீட்டுப் புலம் முடக்கப்பட வேண்டும் என்று குறிப்பிடுகிறது.

முடக்கப்பட்ட உள்ளீட்டுப் புலம் பயன்படுத்த முடியாதது மற்றும் கிளிக் செய்ய முடியாதது.

எடுத்துக்காட்டு

முடக்கப்பட்ட உள்ளீட்டுப் புலம்:

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John" disabled><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe">
</form>

size பண்புக்கூறு

உள்ளீட்டு size பண்புக்கூறு ஒரு உள்ளீட்டுப் புலத்தின் தெரியும் அகலத்தை, எழுத்துகளில், குறிப்பிடுகிறது.

size க்கான இயல்புநிலை மதிப்பு 20 ஆகும்.

எடுத்துக்காட்டு

உள்ளீட்டுப் புலத்திற்கு அகலத்தை அமைக்கவும்:

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" size="50"><br>
  <label for="pin">PIN:</label><br>
  <input type="text" id="pin" name="pin" size="4">
</form>

maxlength பண்புக்கூறு

உள்ளீட்டு maxlength பண்புக்கூறு உள்ளீட்டுப் புலத்தில் அனுமதிக்கப்பட்ட அதிகபட்ச எழுத்துகளின் எண்ணிக்கையைக் குறிப்பிடுகிறது.

எடுத்துக்காட்டு

உள்ளீட்டுப் புலத்திற்கு அதிகபட்ச நீளத்தை அமைக்கவும்:

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" size="50"><br>
  <label for="pin">PIN:</label><br>
  <input type="text" id="pin" name="pin" maxlength="4" size="4">
</form>

முக்கியமான பிற பண்புக்கூறுகள்

pattern பண்புக்கூறு

உள்ளீட்டு pattern பண்புக்கூறு உள்ளீட்டுப் புலத்தின் மதிப்பு சரிபார்க்கப்பட வேண்டிய ஒரு வழக்கமான வெளிப்பாட்டைக் குறிப்பிடுகிறது, படிவம் சமர்ப்பிக்கப்படும் போது.

pattern பண்புக்கூறு பின்வரும் உள்ளீட்டு வகைகளுடன் செயல்படுகிறது: text, date, search, url, tel, email மற்றும் password.

எடுத்துக்காட்டு

மூன்று எழுத்துக்களை மட்டுமே கொண்டிருக்கக்கூடிய உள்ளீட்டுப் புலம் (எண்கள் அல்லது சிறப்பு எழுத்துகள் இல்லை):

<form>
  <label for="country_code">Country code:</label>
  <input type="text" id="country_code" name="country_code"
  pattern="[A-Za-z]{3}" title="Three letter country code">
</form>

required பண்புக்கூறு

உள்ளீட்டு required பண்புக்கூறு படிவத்தைச் சமர்ப்பிப்பதற்கு முன் ஒரு உள்ளீட்டுப் புலம் நிரப்பப்பட வேண்டும் என்று குறிப்பிடுகிறது.

required பண்புக்கூறு பின்வரும் உள்ளீட்டு வகைகளுடன் செயல்படுகிறது: text, search, url, tel, email, password, date pickers, number, checkbox, radio மற்றும் file.

எடுத்துக்காட்டு

தேவைப்படும் உள்ளீட்டுப் புலம்:

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required>
</form>

உள்ளீட்டு கட்டுப்பாடுகள் குறிப்பு

உள்ளீட்டு கட்டுப்பாடுகளின் பட்டியல்:

பயிற்சி

HTML படிவ மற்றும் உள்ளீட்டு உறுப்புகள்