HTML Input 属性

value 属性

value 属性规定输入字的初始值：

实例


 First name:

<input type="text" name="firstname" value="Bill">


 Last name:


</form>

亲自试一试

readonly 属性

readonly 属性规定输入字为只读（不能修改）：

实例


 First name:

<input type="text" name="firstname" value="Bill" readonly>


 Last name:


</form>

亲自试一试

readonly 属性不需要值。它等同于 readonly="readonly"。

disabled 属性

disabled 属性规定输入字是禁用的。

被禁用的元素是不可用和不可点击的。

被禁用的元素不会被提交。

实例


 First name:

<input type="text" name="firstname" value="Bill" disabled>


 Last name:


</form>

亲自试一试

disabled 属性不需要值。它等同于 disabled="disabled"。

size 属性

size 属性规定输入字的尺寸（以字符计）：

实例


 First name:

<input type="text" name="firstname" value="Bill" size="40">


 Last name:


</form>

亲自试一试

maxlength 属性

maxlength 属性规定输入字允许的最大长度：

实例


 First name:




 Last name:


</form>

亲自试一试

如设置 maxlength 属性，则输入控件不会接受超过所允许数的字符。

该属性不会提供任何反馈。如果需要提醒用户，则必须编写 JavaScript 代码。

ਟਿੱਪਣੀ:输入限制并非万无一失。JavaScript 提供了很多方法来增加非法输入。如需安全地限制输入，则接受者（服务器）必须同时对限制进行检查。

HTML5 属性

HTML5 为 增加了如下属性：

  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height 和 width
  • list
  • min 和 max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

并为 增加如需属性：

  • autocomplete
  • novalidate

autocomplete 属性

autocomplete 属性规定表单或输入字是否应该自动完成。

当自动完成开启，浏览器会基于用户之前的输入值自动填写值。

提示：آپ فرم کا autocomplete کو on رکھ سکتے ہیں، در حالیہ خاص ورودی کا نمونہ off رکھ سکتے ہیں، یا واپس وار.

autocomplete کا حوالہ <form> اور درج ذیل <input> کی نوعیتوں کے لئے استعمال کیا جاتا ہے: text، search، url، tel، email، password، datepickers، range اور color。

实例

خودکار تکمیل کریں گا کے ساتھ خودکار تکمیل کریں گا کا HTML فرم (کوئی ورودی کا نمونہ off):

<form action="action_page.php" autocomplete="on">
   نام پہلا: <input type="text" name="fname"><br>
   Last name: <input type="text" name="lname"><br>
   ای-میل: <input type="email" name="email" autocomplete="off"><br>
   <input type="submit">
</form>

亲自试一试

提示：ਕੁਝ ਬਰਾਉਜ਼ਰਾਂ ਵਿੱਚ, ਤੁਸੀਂ ਸਵੈਚਾਲਿਤ ਪੂਰਾ ਕਰਨ ਦੀ ਕੰਮੇਲੀ ਕਰਨੀ ਪਵੇਗੀ।

novalidate ਪ੍ਰਾਪਰਟੀ

novalidate ਪ੍ਰਾਪਰਟੀ <form> ਪ੍ਰਾਪਰਟੀ ਵਿੱਚ ਹੈ。

ਜੇਕਰ ਸੈਟ ਕੀਤਾ ਗਿਆ ਹੈ, ਤਾਂ novalidate ਫਾਰਮ ਨੂੰ ਸੰਭਾਲਣ ਉੱਤੇ ਫਾਰਮ ਡਾਟਾ ਨੂੰ ਨਹੀਂ ਚੈਕ ਕਰਦਾ ਹੈ。

实例

ਫਾਰਮ ਨੂੰ ਸੰਭਾਲਣ ਉੱਤੇ ਫਾਰਮ ਡਾਟਾ ਨੂੰ ਨਹੀਂ ਚੈਕ ਕਰਨਾ ਸੂਚਿਤ ਕਰਦਾ ਹੈ:

<form action="action_page.php" novalidate>
   E-mail: <input type="email" name="user_email">
   <input type="submit">
</form>

亲自试一试

autofocus ਪ੍ਰਾਪਰਟੀ

autofocus ਪ੍ਰਾਪਰਟੀ ਬੁਲੀਨ ਪ੍ਰਾਪਰਟੀ ਹੈ。

ਜੇਕਰ ਸੈਟ ਕੀਤਾ ਗਿਆ ਹੈ, ਤਾਂ ਇਹ ਕਿਹਾ ਜਾਂਦਾ ਹੈ ਕਿ ਪੰਨੇ ਲੋਡ ਹੋਣ ਉੱਤੇ <input> ਐਲੀਮੈਂਟ ਨੂੰ ਸਵੈਚਾਲਿਤ ਰੂਪ ਨਾਲ ਫੋਕਸ ਦੇਣਾ ਚਾਹੀਦਾ ਹੈ。

实例

First name" ਇਨਪੁਟ ਫੀਲਡ ਨੂੰ ਪੰਨੇ ਲੋਡ ਹੋਣ ਉੱਤੇ ਸਵੈਚਾਲਿਤ ਰੂਪ ਨਾਲ ਫੋਕਸ ਦੇਣਾ:

First name:<input type="text" name="fname" autofocus>

亲自试一试

form ਪ੍ਰਾਪਰਟੀ

form ਪ੍ਰਾਪਰਟੀ <input> ਐਲੀਮੈਂਟ ਦੇ ਇੱਕ ਜਾਂ ਕਈ ਫਾਰਮਾਂ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਦੀ ਹੈ。

提示：ਜੇਕਰ ਇੱਕ ਤੋਂ ਵੱਧ ਫਾਰਮਾਂ ਨੂੰ ਸ਼ਾਮਲ ਕਰਨਾ ਹੈ, ਤਾਂ ਫਾਰਮ id ਲਿਸਟ ਨੂੰ ਖਾਲੀ ਜਗ੍ਹਾ ਨਾਲ ਵੰਡੇ ਹੋਏ ਪ੍ਰਯੋਗ ਵਿੱਚ ਵਰਤੋਂ ਕਰੋ。

实例

ਇਨਪੁਟ ਫੀਲਡ HTML ਫਾਰਮ ਬਾਹਰ ਹੈ (ਪਰ ਫਾਰਮ ਦਾ ਹਿੱਸਾ ਹੈ):

<form action="action_page.php" id="form1">
   First name: <input type="text" name="fname"><br>
   <input type="submit" value="Submit">
</form>
 Last name: <input type="text" name="lname" form="form1">

亲自试一试

formaction ਪ੍ਰਾਪਰਟੀ

formaction ਪ੍ਰਾਪਰਟੀ ਨੂੰ ਕਿਹਾ ਜਾਂਦਾ ਹੈ ਕਿ ਜਦੋਂ ਫਾਰਮ ਨੂੰ ਸੰਭਾਲਿਆ ਜਾਵੇ ਤਾਂ ਉਸ ਇਨਪੁਟ ਕੰਟਰੋਲ ਦੇ ਫਾਇਲ ਦੀ URL ਨੂੰ ਸੰਭਾਲਿਆ ਜਾਵੇ。

formaction ਪ੍ਰਾਪਰਟੀ <form> ਐਲੀਮੈਂਟ ਦੇ action ਪ੍ਰਾਪਰਟੀ ਨੂੰ ਕਵਰ ਕਰਦੀ ਹੈ。

formaction ਪ੍ਰਾਪਰਟੀ type="submit" ਅਤੇ type="image" ਲਈ ਪ੍ਰਯੋਗ ਹੁੰਦੀ ਹੈ。

实例

ਦੋ ਦੋ ਸੰਭਾਵਨਾਵਾਂ ਵਾਲੇ ਸੰਭਾਵਨਾਵਾਂ ਵਾਲੇ HTML ਫਾਰਮ:

<form action="action_page.php">
   First name: <input type="text" name="fname"><br>
   Last name: <input type="text" name="lname"><br>
   <input type="submit" value="Submit"><br>
   <input type="submit" formaction="demo_admin.asp"
   value="Submit as admin">
</form>

亲自试一试

formenctype ਪ੍ਰਾਪਰਟੀ

formenctype ਪ੍ਰਾਪਰਟੀ ਨੂੰ ਕਿਹਾ ਜਾਂਦਾ ਹੈ ਕਿ ਕਿਵੇਂ ਫਾਰਮ ਡਾਟਾ (form-data) ਨੂੰ ਸਰਵਰ ਨੂੰ ਸੰਭਾਲਿਆ ਜਾਵੇ (ਸਿਰਫ method="post" ਦੇ ਫਾਰਮ ਲਈ)

formenctype ਪ੍ਰਾਪਰਟੀ <form> ਐਲੀਮੈਂਟ ਦੇ formenctype ਪ੍ਰਾਪਰਟੀ ਨੂੰ ਕਵਰ ਕਰਦੀ ਹੈ。

ویژگی formenctype برای type="submit" و type="image" استفاده می‌شود.

实例

ارسال داده‌های فرم (form-data) با رمزنگاری پیش‌فرض و رمزنگاری "multipart/form-data" (دکمه ی ارسال دوم):

<form action="demo_post_enctype.asp" method="post">
   First name: <input type="text" name="fname"><br>
   <input type="submit" value="Submit">
   <input type="submit" formenctype="multipart/form-data">
   value="Submit as Multipart/form-data">
</form>

亲自试一试

ویژگی formmethod

ویژگی formmethod روش HTTP را تعریف می‌کند که برای ارسال داده‌های فرم (form-data) به URL action استفاده می‌شود.

ویژگی formmethod ویژگی method عناصر <form> را فرا گرفته است.

ویژگی formmethod برای type="submit" و type="image" استفاده می‌شود.

实例

دکمه ی ارسال دوم روش HTTP فرم را تغییر می‌دهد:

<form action="action_page.php" method="get">
   First name: <input type="text" name="fname"><br>
   Last name: <input type="text" name="lname"><br>
   <input type="submit" value="Submit">
   <input type="submit" formmethod="post" formaction="demo_post.asp">
   value="Submit using POST">
</form>

亲自试一试

ویژگی formnovalidate

ویژگی novalidate یک ویژگی بولین است.

اگر تنظیم شده باشد، مشخص می‌کند که در هنگام ارسال فرم، عناصر <input> مورد تایید قرار نمی‌گیرند.

ویژگی formnovalidate ویژگی novalidate عناصر <form> را فرا گرفته است.

ویژگی formnovalidate برای type="submit" استفاده می‌شود.

实例

دو دکمه ی ارسال فرم (مربوط به تایید و بدون تایید):

<form action="action_page.php">
   ای-میل: <input type="email" name="userid"><br>
   <input type="submit" value="Submit"><br>
   <input type="submit" formnovalidate value="Submit without validation">
</form>

亲自试一试

formtarget ਪ੍ਰਤੀਯੋਗਿਤਾ ਸੈੱਟ

formtarget ਪ੍ਰਤੀਯੋਗਿਤਾ ਸੈੱਟ ਦੇ ਨਾਮ ਜਾਂ ਕੀਤੇ ਗਏ ਕੀਵਰਡ ਨੂੰ ਸੰਕੇਤ ਦਿੰਦੇ ਹਨ ਕਿ ਫਾਰਮ ਸੰਭਾਵਨਾ ਦੇ ਬਾਅਦ ਪ੍ਰਤੀਯੋਗਿਤਾ ਸੈੱਟ ਕੀਤੇ ਗਏ ਜਵਾਬ ਨੂੰ ਕਿਉਂਕਿ ਦਰਸਾਇਆ ਜਾਵੇ。

formtarget ਪ੍ਰਤੀਯੋਗਿਤਾ ਸੈੱਟ ਫਾਰਮ ਏਜੈਂਟ ਦੇ target ਪ੍ਰਤੀਯੋਗਿਤਾ ਸੈੱਟ ਨੂੰ ਖਾਰਜ ਕਰਦੀ ਹੈ。

formtarget ਪ੍ਰਤੀਯੋਗਿਤਾ ਸੈੱਟ ਕੀਤੀ ਜਾ ਸਕਦੀ ਹੈ type="submit" ਅਤੇ type="image" ਦੇ ਨਾਲ ਵਰਤੇ ਜਾਂਦੇ ਹਨ。

实例

ਇਹ ਫਾਰਮ ਦੋ ਸੰਭਾਵਨਾ ਬਣਾਉਂਦੇ ਹਨ ਜੋ ਵੱਖ-ਵੱਖ ਟਾਰਗੇਟ ਵਿੰਡੋਜ਼ ਨੂੰ ਦਰਸਾਉਂਦੇ ਹਨ:

<form action="action_page.php">
   First name: <input type="text" name="fname"><br>
   Last name: <input type="text" name="lname"><br>
   <input type="submit" value="Submit as normal">
   <input type="submit" formtarget="_blank"
   value="Submit to a new window">
</form>

亲自试一试

height ਅਤੇ width ਪ੍ਰਤੀਯੋਗਿਤਾ ਸੈੱਟ

height ਅਤੇ width ਪ੍ਰਤੀਯੋਗਿਤਾ ਸੈੱਟ ਕਰਦੇ ਹਨ <input> ਏਜੈਂਟ ਦੀ ਉਚਾਈ ਅਤੇ ਚੌਡਾਈ。

height ਅਤੇ width ਪ੍ਰਤੀਯੋਗਿਤਾ ਸੈੱਟ ਕੀਤੇ ਜਾਂਦੇ ਹਨ <input type="image"> ਵਾਂਗ ਹੀ。

ਟਿੱਪਣੀ:ਹਰ ਸਮੇਂ ਚਿੱਤਰ ਦੀ ਅਕਾਰ ਨੂੰ ਨਿਰਧਾਰਤ ਕਰੋ। ਜੇਕਰ ਬਰਾਉਜ਼ਰ ਚਿੱਤਰ ਦੀ ਅਕਾਰ ਨੂੰ ਨਹੀਂ ਜਾਣਦਾ ਤਾਂ ਪੰਨਾ ਚਿੱਤਰ ਲੋਡ ਹੋਣ ਦੇ ਸਮੇਂ ਚਮਕਦਾ ਰਹੇਗਾ。

实例

ਇੱਕ ਚਿੱਤਰ ਨੂੰ ਸੰਭਾਵਨਾ ਬਣਾਓ ਅਤੇ height ਅਤੇ width ਪ੍ਰਤੀਯੋਗਿਤਾ ਸੈੱਟ ਕਰੋ:

<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

亲自试一试

list ਪ੍ਰਤੀਯੋਗਿਤਾ

list ਪ੍ਰਤੀਯੋਗਿਤਾ ਵਾਲੇ <datalist> ਏਜੈਂਟ ਵਿੱਚ <input> ਏਜੈਂਟ ਦੇ ਪ੍ਰਿਮੀਟ ਵਿਕਲਪ ਸ਼ਾਮਲ ਹਨ。

实例

ਇੱਕ <datalist> ਦੀ ਮਦਦ ਨਾਲ <input> ਏਜੈਂਟ ਪ੍ਰਿਮੀਟ ਸੈੱਟ ਕਰੋ:

<input list="browsers">
<datalist id="browsers">
   <option value="Internet Explorer">
   <option value="Firefox">
   <option value="Chrome">
   <option value="Opera">
   <option value="Safari">
</datalist>

亲自试一试

min ਅਤੇ max ਪ੍ਰਤੀਯੋਗੀ

min ਅਤੇ max ਪ੍ਰਤੀਯੋਗੀ ਨੂੰ <input> ਏਲੀਮੈਂਟ ਦਾ ਨਿਮਨਤਮ ਅਤੇ ਉੱਚਤਮ ਮੁੱਲ ਨਿਰਧਾਰਤ ਕਰਦਾ ਹੈ。

min ਅਤੇ max ਪ੍ਰਤੀਯੋਗੀ ਨੂੰ ਹੇਠ ਲਿਖੇ ਇਨਪੁਟ ਟਾਈਪਾਂ ਵਿੱਚ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ: number, range, date, datetime, datetime-local, month, time ਅਤੇ week。

实例

Has minimum and maximum values <input> element:

Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">
 Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">
 Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">

亲自试一试

multiple ਪ੍ਰਤੀਯੋਗੀ

multiple ਪ੍ਰਤੀਯੋਗੀ ਇੱਕ ਬੋਲੀਨਰ ਪ੍ਰਤੀਯੋਗੀ ਹੈ。

ਜੇਕਰ ਸੈਟ ਕੀਤਾ ਗਿਆ ਹੈ ਤਾਂ ਇਹ ਨਿਰਧਾਰਤ ਕਰਦਾ ਹੈ ਕਿ ਯੂਜ਼ਰ <input> ਏਲੀਮੈਂਟ ਵਿੱਚ ਇੱਕ ਤੋਂ ਵੱਧ ਮੁੱਲ ਇਨਪੁਟ ਕਰ ਸਕਦਾ ਹੈ。

multiple ਪ੍ਰਤੀਯੋਗੀ ਨੂੰ ਹੇਠ ਲਿਖੇ ਇਨਪੁਟ ਟਾਈਪਾਂ ਵਿੱਚ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ: email ਅਤੇ file。

实例

ਬਹੁਤ ਸਾਰੇ ਮੁੱਲਾਂ ਨੂੰ ਸਵੀਕਾਰ ਕਰਨ ਵਾਲਾ ਫਾਈਲ ਅੱਪਲੋਡ ਖੇਤਰ:

ਇੱਕ ਚਿੱਤਰ ਚੁਣੋ: <input type="file" name="img" multiple>

亲自试一试

pattern ਪ੍ਰਤੀਯੋਗੀ

pattern ਪ੍ਰਤੀਯੋਗੀ ਨੂੰ <input> ਏਲੀਮੈਂਟ ਦੇ ਮੁੱਲ ਦੀ ਚੇਕ ਕਰਨ ਵਾਲੇ ਪੈਟਰਨ ਨੂੰ ਨਿਰਧਾਰਤ ਕਰਦਾ ਹੈ。

pattern ਪ੍ਰਤੀਯੋਗੀ ਨੂੰ ਹੇਠ ਲਿਖੇ ਇਨਪੁਟ ਟਾਈਪਾਂ ਵਿੱਚ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ: text, search, url, tel, email ਅਤੇ password。

提示：ਯੂਜ਼ਰ ਦੀ ਮਦਦ ਕਰਨ ਲਈ ਪੈਟਰਨ ਦੀ ਵਿਆਖਿਆ ਕਰਨ ਲਈ ਸਰਬਵਿਆਪੀ title ਪ੍ਰਤੀਯੋਗੀ ਵਰਤੋਂ ਕਰੋ。

提示：ਇਸ ਸਾਲ ਦੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਸਿੱਖਿਆ ਵਿੱਚ ਮੋਡਲ ਐਕਸਪ੍ਰੈਸ਼ਨ ਬਾਰੇ ਹੋਰ ਜਾਣਕਾਰੀ ਮੁਹੱਈਆ ਕਰਾਏਗਾ。

实例

ਇਸ ਵਿੱਚ ਕੇਵਲ ਤਿੰਨ ਅੱਖਰ ਹੀ ਹੋ ਸਕਦੇ ਹਨ (ਅੰਕ ਜਾਂ ਵਿਸ਼ੇਸ਼ ਚਿੱਨ੍ਹ ਨਹੀਂ):

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

亲自试一试

placeholder ਪ੍ਰਤੀਯੋਗੀ

placeholder ਪ੍ਰਤੀਯੋਗੀ ਇਨਪੁਟ ਖੇਤਰ ਦੀ ਉਮੀਦਵਾਰ ਮੁੱਲ ਦੇ ਵਿਆਖਿਆ (ਨਮੂਨਾ ਮੁੱਲ ਜਾਂ ਫਾਰਮੈਟ ਦੀ ਘੱਟ ਵਿਆਖਿਆ) ਨੂੰ ਨਿਰਧਾਰਤ ਕਰਦਾ ਹੈ。

ਇਹ ਸੂਚਨਾ ਯੂਜ਼ਰ ਦੇ ਇਨਪੁਟ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਇਨਪੁਟ ਖੇਤਰ ਵਿੱਚ ਦਿਖਾਈ ਦੇਵੇਗੀ。

placeholder 属性适用于以下输入类型：text、search、url、tel、email 以及 password。

实例

拥有占位符文本的输入字：

<input type="text" name="fname" placeholder="First name">

亲自试一试

required 属性

required 属性是布尔属性。

如果设置，则规定在提交表单之前必须填写输入字。

required 属性适用于以下输入类型：text、search、url、tel、email、password、date pickers、number、checkbox、radio、and file.

实例

必填的输入字：

Username: <input type="text" name="usrname" required>

亲自试一试

step 属性

step 属性规定 <input> 元素的合法数字间隔。

示例：如果 step="3"，则合法数字应该是 -3、0、3、6、等等。

提示：step 属性可与 max 以及 min 属性一同使用，来创建合法值的范围。

step 属性适用于以下输入类型：number、range、date、datetime、datetime-local、month、time 以及 week。

示例

拥有具体的合法数字间隔的输入字：

<input type="number" name="points" step="3">

亲自试一试