files.free-learn.ir · Web view2019-12-19 · صفات عناصر ورودی Input Attributes در HTML. Author: Sadegh Asadi Created Date: 12/16/2019 02:08:00 Last modified by:

HTML در Input Attributesصفات عناصر ورودی

می باشد و استفاده از آن برای عموم کامال آزاد می باشد. سایت آموزشی فری لرناین فایل متعلق به 1

[email protected]://free-learn.ir/

HTML در Input Attributes صفات عناصر ورودی یا

آشنا شدیم وعناصر ورودی در فرم هااگر فری لرن رو در بخش های قبلی دنبال کرده باشید میدانید که ما با ه میتوان درون هر یک از این عناصر ورودی استفادهباهاشون کار کردیم، حال در این بخش میخواهیم با صفاتی ک

کرد آشنا شویم.

زیر در عناصر ورودی در فرم ها آشنا شوم :صفاتدر ادامه و تا پایان میخواهیم با

name value readonly disabled size maxlength

:Form اضافه شده اند برای تگ HTML5و صفاتی که در

autocomplete novalidate

https://free-learn.ir/%DA%A9%D8%A7%D8%B1-%D8%A8%D8%A7-%D9%81%D8%B1%D9%85-%D9%87%D8%A7-%DB%8C%D8%A7-forms-%D8%AF%D8%B1-html

https://free-learn.ir/%DA%A9%D8%A7%D8%B1-%D8%A8%D8%A7-%D8%B5%D9%81%D8%A7%D8%AA-%DB%8C%D8%A7-attributes-%D8%AF%D8%B1-html/

https://free-learn.ir/%D8%B9%D9%86%D8%A7%D8%B5%D8%B1-%D9%88%D8%B1%D9%88%D8%AF%DB%8C-%DB%8C%D8%A7-input-elements-%D8%AF%D8%B1-html




اضافه شده اند برای عناصر ورودی :HTML5و صفاتی که در

autofocus form formaction formenctype formmethod formnovalidate formtarget min and max multiple pattern placeholder required step

Name Attribute

همانطور که از نام این صفت مشخصه، با استفاده از این صفت میتوان یک نام را برای یک عنصر مشخص کرد، و البته تا به االن در تمامی فرم هایی که در بخش های قبلی باهاشون کار کردیم نیز ما از این صفت استفاده می

کردیم.

1 <input type="text" name="firstname">

امتحان کنید

https://files.free-learn.ir/Try/html/html_learn/Tryit_html_Input_Attributes_T1.html




Value Attribute

با استفاده از این صفت میتوان یک مقداری را بصورت پیش فرض درون عناصر ورودی قرار داد.

1 <input type="text" value="صادق">


Readonly Attribute

میتوان یک عنصر را فقط خواندنی کرد، یعنی اینکه کاربر نتواند محتویات آنرا تغییر دهد.صفتبا استفاده از این

1 <input type="text" readonly>


Disabled Attribute

همانطور که از اسم این صفت هم مشخصه با استفاده از آن میتوان یک عنصر را بطور کامل غیرفعال کرد.

استفاده کرده باشد معموال رنگش بصورت خاکستری خواهد بود. disabledیک عنصر که از صفت

1 <input type="text" disabled>





https://free-learn.ir/

mailto:[email protected]

https://free-learn.ir/%DA%A9%D8%A7%D8%B1-%D8%A8%D8%A7-%D8%B5%D9%81%D8%AA-style-%D8%AF%D8%B1-html/




Size Attribute

با استفاده از این صفت ما میتوانیم اندازه یک فیلد متنی را به دلخواه مشخص نماییم.

این صفت صرفا اندازه یک فیلد متنی را بصورت عرضی و با استفاده از تعداد کاراکتر مشخص میکند، لذا برای استفادهmaxlengthمشخص کردن تعداد کاراکترهایی که میتواند درون یک فیلد متنی وارد شود باید از صفت

کرد.

1 <input type="text" size="5">


Maxlength Attribute

با استفاده از این صفت میتوان مشخص کرد که چه تعداد کاراکتر میتواند درون یک فیلد متنی وارد شود ، برای کاراکتر نمیتوان درون فیلد مورد نظر وارد کرد.۷مثال در دستورات زیر بیشتر از

1 <input type="text" maxlength="7">







Autocomplete Attribute

، ما میتوانیم قابلیت تکمیل شدن خودکار فیلدهای فرم را فعال یاFormبا استفاده از این صفت درون تگ غیرفعال نماییم.

اگر تا به االن متوجه شده باشید، بعضی از فرم ها هستند که وقتی ما میخواهیم یک مقدار درون یک فیلد متنی وارد نماییم، آن فیلد متنی بطور خودکار لیستی از مقادیر از قبل وارد شده در خودش را نمایش میدهد، خب به

که ما میتوانیم آنرا فعال یا غیرفعال نماییم.autocompleteهمین قابلیت میگن

نیزtext, search, url, tel, email, password, datepickers, range, colorاین صفت را میتوان با عناصر ورودی بکار گرفت.

1

2

3

4

<form action="test.php" autocomplete="on">

.

.

</form>






Novalidate Attribute

میتوان اعتبار سنجی را برای تمامی فیلدهای درون فرم غیرفعال>form<با استفاده از این صفت در درون تگ کرد.

برای مثال لطفا بروی دکمه امتحان کنید کلیک و خروجی دستورات زیر را مشاهده نمایید، در خروجی همانطور که وجود نداشت ما باید حتماnovalidateمشاهده مینمایید یک فیلد برای دریافت ایمیل کاربر قرار دارد، اگر صفت

وجود دارد این یعنیnovalidate وارد میکردیم ولی چون صفت [email protected]یک آدرس ایمیل به این شکل دیگه اعتبار سنجی فیلدها مهم نیست و کاربر هر چیزی که بخواهد میتونه وارد کنه.

1

2

3

4

<form action="test.php" novalidate>

.

.

</form>


Autofocus Attribute

با استفاده از این صفت میتوان مشخص کرد که کدام فیلد به محض لود شدن صفحه باید تکمیل شود، در واقع بااستفاده از این صفت یک فیلد را میتوان بطور خودکار پس از لود صفحه برویَش فوکوس کرد.

1 <input type="text" autofocus>







Form Attribute

تا به االن در مثال ها حتما مشاهده کرده اید که عناصر ما )عناصر ورودی و..( درون فرم قرار میگیرند و وقتی کاربربروی دکمه ی ثبت یا ارسال اطالعات کلیک میکند این اطالعات به سرور ارسال می شوند.

قرار میگرفت تا میتوانست داده هایی که درونش وارد>form<یعنی تا به االن حتما باید یک عنصر درون تگ >form< میتوانیم یک عنصر که در خارج از تگ formمیشد به سمت سرور ارسال شود ولی ما با استفاده از صفت

قرار دارد نیز داده هایش را به سمت سرور ارسال نماییم.

کار را انجام دهیم :۲باید

صفت تعریف یک آی دی توسط Id درون تگ Form قرار دادن نامid درون صفت Formموجود در عناصر مورد نظر

1

2

3

4

5

<form action="test.php" id="form-1">

...

</form>

<input type="text" form="form-1">



https://free-learn.ir/%D9%86%D8%AD%D9%88%D9%87-%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF-%D8%A2%DB%8C-%D8%AF%DB%8C-%DB%8C%D8%A7-id-%D8%AF%D8%B1-html/




Formaction Attribute

وجودForm اون هم در تگ Actionتا به االن در تمامی فرم هایی که فری لرن ارائه داده است فقط یک اکِشن یا داشت، یعنی محل یا مکان یا صفحه ای در سرور که قرار است داده های وارد شده درون فرم ها را در خودش

ذخیره کند.

میتوانیم یک اکِشن جدید را ایجاد نماییم، یعنی کاربر با کلیک بروی یکformactionحال ما با استفاده از صفت دکمه داده های فرم در یک محل دیگر در سرور ذخیره شوند. لطفا به مثال زیر توجه نمایید.

بکار گرفت.image و submit را میتوان با عناصر ورودی از نوع formactionصفت

1

2

3

4

5

<form action="files/test.php">

.

.

<input type="submit" formaction="test2.php">

</form>






Formenctype Attribute

با استفاده از این صفت میتوان نحوه ی کد گذاری داده ها را در هنگام ارسال به سرور مشخص کرد.

کار خواهد کرد.post آنها برابر است با methodاین صفت فقط بروی فرم هایی که متد یا

بکار گرفت.image و submit را میتوان با عناصر ورودی از نوع formenctypeصفت

1

2

3

<form action="test.php" method="post">

<input type="submit" formenctype="multipart/form-data">

</form>

Formmethod Attribute

با استفاده از این صفت نیز میتوان متد ارسالی داده ها را در فرم مشخص کرد، همانطور که در بخش کار با فرم ها میتوانیمformmethod می باشد ، ولی ما با استفاده از صفت Getیاد گرفتیم متد یک فرم بصورت پیش فرض

این متد را در هنگام ارسال داده ها به سرور تغییر دهیم.

بکار گرفت.image و submit را میتوان با عناصر ورودی از نوع formmethodصفت

1

2

3

4

<form action="test.php" method="get">

.

<input type="submit" formmethod="post">

</form>






Formnovalidate Attribute

با استفاده از این صفت میتوان نحوه اعتبار سنجی فیلدهای یک فرم را مشخص کرد ، برای مثال در حالت پیش فرض وقتی ما یک فیلد از نوع ایمیل داشته باشیم باید حتما یک آدرس ایمیل وارد نماییم تا داده ها ارسال شوند ولی ما با استفاده از

میتوانیم اعتبار سنجی فیلدها را غیرفعال نماییم.formnovalidateصفت

بکار گرفت.submit را میتوان با عناصر ورودی از نوع formnovalidateصفت

1

2

3

4

<form action="test.php">

.

<input type="submit" formnovalidate>

</form>


Formtarget Attribute

با استفاده از این صفت میتوان نحوه ی باز شدن صفحه ی مقصد را پس از ارسال داده ها در فرم مشخص کرد، یعنی وقتیکاربر بروی دکمه ثبت یا ارسال کلیک کرد صفحه ای که به کاربر نمایش داده می شود در تب جدید باز شود یا خیر؟!

بکار گرفت.image و submit را میتوان با عناصر ورودی از نوع formtargetصفت

1

2

3

5

<form action="test.php">

.

<input type="submit" formtarget="_blank">

</form>







Min And Max Attributes

میتوان یک مقدار کمترین و بیشترین را برای یک عنصر ورودی مشخص کرد.max و minبا استفاده از صفات

,number, range, date, datetime-local, month, time را میتوان با عناصر ورودی از نوع max و minصفت week .بکار گرفت

1 <input type="number" min="1" max="10">


Multiple Attribute

میتوان قابلیت انتخاب چندین فایل / گزینه را به کاربر داد.multipleبا استفاده از صفت

بکار گرفت. File و Email را میتوان با عناصر ورودی از نوع multipleصفت

را از روی صفحه کلید نگه دارید و سپس با ماوس گزینه های موردCtrlبرای انتخاب بیش از یک گزینه دکمه نظرتان را انتخاب نمایید.

1 <input type="file" multiple>







Pattern Attribute

ما با استفاده از این صفت میتوانیم یک الگوی مشخص شده ای را برای مقادیر وارد شده در یک فیلد تنظیم حرف و فقط از حروف کوچک۶نماییم، برای مثال میتوانیم مشخص نماییم که در یک فیلد فقط یک نام با حداکثر

انگلیسی وارد شود و غیره.

بکار گرفت. text, search, url, tel, email, password را میتوان با عناصر ورودی از نوع patternصفت

1 <input type="text" pattern="[a-z]{6}">


لطفا برای مشاهده خروجی مثال باال بروی دکمه امتحان کنید کلیک نمایید، همانطور که در خروجی مشاهده کاراکتر و فقط با حروف کوچک۶ مشخص کردم که نام با تعداد patternمینمایید بنده با استفاده از صفت

انگلیسی وارد شود در غیراینصورت اجازه ارسال داده ها را نده.

Placeholder Attribute

مطمعئنم خیلی جاها این صفت رو دیده اید، با استفاده از این صفت میتوان یک مقدار را از قبل و بصورت پس زمینه ای درون یک فیلد قرار دارد تا کاربر با مشاهده آن بداند که باید بفرض مثال چه مقداری را درون آن فیلد

وارد نماید.

. بکار گرفتtext, search, url, tel, email, password را میتوان با عناصر ورودی از نوع placeholderصفت

1 <input type="text" placeholder="نام تان را وارد نمایید">


Required Attribute






حتما تا االن برای یکبارم که شده برای شما پیش اومده مثال در حال تکمیل یک فرم هستید و وقتی بروی دکمهارسال اطالعات کلیک میکنید یک پیغام میده که مثال فالن فیلد باید حتما تکمیل شود.

به راحتی میتوانیم مشخص نماییم که آیا یک فیلد تکمیل کردنش ضروریrequiredخب ما با استفاده از صفت باشد یا خیر.

,text, search, url, tel, email, password, date pickers را میتوان با عناصر ورودی از نوع requiredصفت number, checkbox, radio, file .بکار گرفت

1 <input type="text" required>


Step Attribute

با استفاده از این صفت ما میتوانیم تعداد گام های پرش یا جابه جایی را در یک عنصر ورودی مشخص نماییم. برای مثال میتوانیم مشخص نماییم که یک عدد از فالن مقدار تا فالن مقدار میتواند وارد شود و همچنین تعداد

عدد باشد.۵جابه جایی بین این اعداد بفرض مثال

بکارnumber, range, date, datetime-local, month, time, week را میتوان با عناصر ورودی از نوع stepصفت گرفت.

1 <input type="number" step="5">




Documents

files.free-learn.ir · Web view2019-12-19 · صفات عناصر ورودی Input Attributes در HTML. Author: Sadegh Asadi Created Date: 12/16/2019 02:08:00 Last modified by: