این آموزش در تاریخ ۱۴۰۲/۰۶/۱۹ آپدیت شده است.
صفات عناصر ورودی Input Attributes در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با صفات عناصر ورودی Input Attributes در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
- 1 صفات عناصر ورودی یا Input Attributes در HTML
- 2 Name Attribute
- 3 Value Attribute
- 4 Readonly Attribute
- 5 Disabled Attribute
- 6 Size Attribute
- 7 Maxlength Attribute
- 8 Autofocus Attribute
- 9 Form Attribute
- 10 Formaction Attribute
- 11 Formenctype Attribute
- 12 Formmethod Attribute
- 13 Formnovalidate Attribute
- 14 Formtarget Attribute
- 15 Min , Max , Step Attributes
- 16 Multiple Attribute
- 17 Pattern Attribute
- 18 Placeholder Attribute
- 19 Required Attribute
- 20 Action Attribute
- 21 Method Attribute
- 22 Autocomplete Attribute
- 23 Novalidate Attribute
صفات عناصر ورودی یا Input Attributes در HTML
ما در جلسه قبلی با انواع Input ها آشنا شدیم و باهاشون کار کردیم، حال در این بخش میخواهیم با صفاتی که میتوان درون هر یک از این Input ها استفاده کرد آشنا شویم.
صفاتی که میتوان در تگ Input استفاده کرد :
- name
- value
- readonly
- disabled
- size
- maxlength
- autofocus
- form
- formaction
- formenctype
- formmethod
- formnovalidate
- formtarget
- Min و Max و Step
- multiple
- pattern
- placeholder
- required
صفاتی که میتوان در تگ Form استفاده کرد :
Free-Learn
Name Attribute
با استفاده از این صفت میتونیم یک نام برای اینپوت مون مشخص کنیم، بعدش با استفاده از همین نام میتونیم داده هارو در سمت سرور دریافت کنیم.
- اگه قرار باشه مقدار یک Input بسمت سرور ارسال بشه باید حتما name داشته باشه.
- نامی که مشخص میشه باید برای هر Input بصورت مجزا باشه ( یعنی نباید نام ها شبیه هم باشن )
|
1 |
<input type="text" name="myname"> |
Free-Learn
Value Attribute
با استفاده از این صفت میتونیم یک مقدار بصورت پیش فرض درون اینپوت ها قرار بدیم.
|
1 |
<input type="text" value="Sadegh"> |
Free-Learn
Readonly Attribute
با استفاده از این صفت میتوان یک عنصر را فقط خواندنی کرد، یعنی کاربر نمیتونه محتویاتشو تغییر بده.
- وقتی یک اینپوت readonly باشه مقدارش بسمت سرور ارسال میشه ولی اگه disabled باشد مقدارش بسمت سرور ارسال نمیشه.
|
1 |
<input type="text" readonly> |
Free-Learn
Disabled Attribute
همانطور که از اسم این صفت هم مشخصه با استفاده از آن میتوان یک عنصر را بطور کامل غیرفعال کرد.
- وقتی یک اینپوت readonly باشه مقدارش بسمت سرور ارسال میشه ولی اگه disabled باشد مقدارش بسمت سرور ارسال نمیشه.
- یک عنصر که از صفت disabled استفاده کرده باشد معمولا رنگش بصورت خاکستری خواهد بود، این یعنی اون عنصر غیرفعال می باشد.
|
1 |
<input type="text" disabled> |
Free-Learn
Size Attribute
با استفاده از این صفت ما میتوانیم اندازه یک فیلد متنی رو بصورت عرضی و به نسبت تعداد کاراکتر مشخص نماییم.
این صفت صرفا اندازه یک فیلد متنی را بصورت عرضی و با استفاده از تعداد کاراکتر مشخص میکند، لذا برای مشخص کردن تعداد کاراکترهایی که میتواند درون یک فیلد متنی وارد شود باید از صفت maxlength استفاده کرد.
|
1 |
<input type="text" size="5"> |
Free-Learn
Maxlength Attribute
با استفاده از این صفت میتوان مشخص کرد که چه تعداد کاراکتر میتواند درون یک فیلد متنی وارد شود ، مثلا در مثال زیر کاربر بیشتر از ۵ کاراکتر / حرف نمیتواند وارد کند.
|
1 |
<input type="text" maxlength="5"> |
Free-Learn
Autofocus Attribute
با استفاده از این صفت میتونیم مشخص کنیم که کدوم فیلد به محض لود شدن صفحه، روش فوکوس بشه. ( یعنی وقتی صفحه میاد بالا درجا روی اون اینپوت فوکوس میشه و آماده اینه که داخلش مقدار وارد بشه )
|
1 |
<input type="text" autofocus> |
Free-Learn
Form Attribute
در ادامه ی آموزش صفات عناصر ورودی Input Attributes در HTML میخوایم با صفت Form آشنا شیم.
خب بصورت عادی خودتونم میدونید یک تگ Input باید حتما داخل تگ Form باشه تا بشه مقدارشو بسمت سرور ارسال کرد، حال ما با استفاده از این صفت میتونیم مقدار یه Input رو که خارج از تگ Form هستش به سمت سرور ارسال کنیم.
باید ۲ کارو انجام بدیم :
- تعریف یک آی دی توسط صفت Id درون تگ Form
- قرار دادن نام همون id درون صفت Form موجود در Input مورد نظرمون
|
1 2 3 4 5 |
<form action="get.php" id="MyForm"> ... </form> <input type="text" form="MyForm"> |
Free-Learn
Formaction Attribute
تا به الان در تمامی مثال ها اگه توجه کرده باشید ، فقط یک اکشِن یا Action اون هم در تگ Form وجود داشت، که داده هارو بسمت سرور ارسال میکرد.
حال ما با استفاده از صفت formaction میتونیم در یک Input بصورت مجزا از یک اکشِن مجزا استفاده نماییم.
صفت formaction را میتوان با اینپوت های از نوع submit و image بکار گرفت.
|
1 2 3 4 5 |
<form action="get-1.php"> .. .. <input type="submit" formaction="get-2.php"> </form> |
Free-Learn
Formenctype Attribute
با استفاده از این صفت میتوان نحوه ی کد گذاری داده ها رو در هنگام ارسال به سرور مشخص کرد.
این صفت فقط بروی فرم هایی که متد یا method آنها برابر است با POST کار خواهد کرد.
صفت formenctype را میتوان با اینپوت ها از نوع submit و image بکار گرفت.
|
1 2 3 |
<form action="get.php" method="POST"> <input type="submit" formenctype="multipart/form-data"> </form> |
Free-Learn
Formmethod Attribute
با استفاده از این صفت نیز میتوان متد ارسالی داده هارو در فرم مشخص کرد، همانطور که در بخش کار با فرم ها یاد گرفتیم متد یک فرم بصورت پیش فرض Get می باشد ، ولی ما با استفاده از صفت formmethod میتوانیم این متد را در هنگام ارسال داده ها به سرور تغییر دهیم.
صفت formmethod را میتوان با اینپوت ها از نوع submit و image بکار گرفت.
|
1 2 3 4 5 |
<form action="get.php" method="GET"> . . <input type="submit" formmethod="POST"> </form> |
Free-Learn
Formnovalidate Attribute
با استفاده از این صفت میتوان اعتبار سنجی Input هارو فعال یا غیرفعال کرد ، برای مثال در حالت پیش فرض وقتی ما یک فیلد از نوع ایمیل داشته باشیم باید حتما یک آدرس ایمیل وارد نماییم تا داده ها ارسال شوند ولی ما با استفاده از صفت formnovalidate میتوانیم اعتبار سنجی فیلدها را غیرفعال نماییم.
صفت formnovalidate را میتوان با اینپوت ها از نوع submit بکار گرفت.
|
1 2 3 4 5 |
<form action="get.php"> . . <input type="submit" formnovalidate> </form> |
Free-Learn
Formtarget Attribute
با استفاده از این صفت میتوان نحوه ی باز شدن صفحه ی مقصد را پس از ارسال داده ها در فرم مشخص کرد، یعنی مثلا میتونیم کاری کنیم که وقتی کاربر بروی دکمه ارسال کلیک کرد، خروجی فرم در تب جدید باز بشه.
صفت formtarget را میتوان با اینپوت ها از نوع submit و image بکار گرفت.
|
1 2 3 4 5 |
<form action="get.php"> . . <input type="submit" formtarget="_blank"> </form> |
Free-Learn
Min , Max , Step Attributes
با استفاده از صفات min و max میتوان یک مقدار کمترین و بیشترین را برای یک Input مشخص کرد و با استفاده از صفت Step میتوان میزان پرش بین اعداد را مشخص کرد.
صفت min و max و Step رو میتوان با اینپوت ها از نوع number, range, date, datetime-local, month, time, week بکار گرفت.
|
1 |
<input type="number" min="1" max="10" step="1"> |
Free-Learn
Multiple Attribute
دوستان محترم در ادامه آموزش صفات عناصر ورودی Input Attributes در HTML همچنان با من همراه باشید، ما با استفاده از صفت multiple میتونیم قابلیت انتخاب چندین فایل / گزینه را به کاربر بدهیم.
صفت multiple را میتوان با اینپوت ها از نوع Email و File بکار گرفت.
برای انتخاب بیش از یک گزینه دکمه Ctrl را از روی صفحه کلید نگه دارید و سپس با ماوس گزینه های مورد نظرتان را انتخاب نمایید.
|
1 |
<input type="file" multiple> |
Free-Learn
Pattern Attribute
ما با استفاده از این صفت میتوانیم یک الگوی مشخص شده ای را برای مقادیر وارد شده در یک فیلد تنظیم نماییم، برای مثال میتوانیم مشخص نماییم که در یک فیلد فقط یک نام با حداکثر ۶ حرف و فقط از حروف کوچک انگلیسی وارد شود و غیره.
صفت pattern را میتوان با اینپوت ها از نوع text, search, url, tel, email, password بکار گرفت.
آموزش صفت pattern را بصورت مجزا مطالعه نمایید.
|
1 |
<input type="tel" name="TelNumber" pattern="[0-9]{4}-[0-9]{3}-[0-9]{4}"> |
Free-Learn
Placeholder Attribute
مطمعئنم خیلی جاها این صفت رو دیده اید، با استفاده از این صفت میتوان یک مقدار را از قبل و بصورت پس زمینه ای درون یک فیلد قرار دارد تا کاربر با مشاهده آن بداند که باید بفرض مثال چه مقداری را درون آن فیلد وارد نماید.
صفت placeholder را میتوان با اینپوت ها از نوع text, search, url, tel, email, password بکار گرفت.
|
1 |
<input type="text" placeholder="نام تان را وارد کنید"> |
Free-Learn
Required Attribute
حتما تا الان برای یکبارم که شده برای شما پیش اومده مثلا در حال تکمیل یک فرم هستید و وقتی بروی دکمه ارسال اطلاعات کلیک میکنید یک پیغام میده که مثلا فلان فیلد باید حتما تکمیل شود.
خب ما با استفاده از صفت required به راحتی میتوانیم مشخص نماییم که آیا یک فیلد تکمیل کردنش ضروری باشد یا خیر.
صفت required را میتوان با اینپوت ها از نوع text, search, url, tel, email, password, number, checkbox, radio, file بکار گرفت.
|
1 |
<input type="text" required> |
Free-Learn
Action Attribute
فرم ها در صفحات وب دارای یک صفت بنام action می باشند، که وظیفه این صفت ارسال اطلاعات وارد شده در فرم به سمت سرور می باشد، یعنی کاربر اطلاعاتش رو وارد میکنه و سپس با زدن دکمه ارسال این اطلاعات به سرور سایت مورد نظر ارسال میشه.
|
1 2 3 4 5 6 7 8 |
<body> <form action="files/get_data.php" method="POST"> نام: <input type="text" name="myname"> <br><br> <input type="submit" value="ارسال"> </form> </body> |
Free-Learn
Method Attribute
این صفت یکی از صفت های ضروری و پراستفاده در فرم ها می باشد، با استفاده از این صفت میتونیم نحوه ارسال داده ها بسمت سرور رو مشخص کنیم، در واقع مشخص کننده نوع متد HTTP ارسالی ( GET یا POST ) در هنگام ارسال اطلاعات به سرور می باشد.
این صفت بطور کلی ۲ مقدار میتونه داشته باشه :
- GET ( فرم ها بصورت پیش فرض اینو دارن )
- POST
|
1 2 3 4 5 6 7 |
<body> <form action=".." method="POST"> ..... </form> </body> |
Free-Learn
Autocomplete Attribute
با استفاده از این صفت درون تگ Form ، ما میتوانیم قابلیت تکمیل شدن خودکار فیلدهای فرم را فعال یا غیرفعال نماییم.
اگر تا به الان متوجه شده باشید، وقتی بروی مثلا اینپوت کلیک میکنیم که بخوایم یه چیزی داخلش وارد کنیم، بطور خودکار لیستی از مقادیر از قبل وارد شده رو نشون میده ( همون چیزایی که قبلا خودمون وارد کردیم )، خب به همین قابلیت میگن autocomplete که ما میتونیم اون رو فعال یا غیرفعال کنیم.
این صفت را میتوان با اینپوت ها از نوع text, search, url, tel, email, password, range, color نیز بکار گرفت.
بصورت پیش فرض این قابلیت در حالت on می باشد، یعنی پیش فرض خودش فعاله، ولی اگه بخوایم غیرفعالش کنیم باید off بدیم بهش.
|
1 2 3 4 |
<form action="get.php" autocomplete="off"> . . </form> |
Free-Learn
Novalidate Attribute
با استفاده از این صفت در درون تگ <form> میتوان اعتبار سنجی را برای تمامی فیلدهای درون فرم غیرفعال کرد.
در مثال زیر اگه خروجی رو ببینید، یک فیلد برای دریافت ایمیل کاربر قرار دارد، اگر صفت novalidate وجود نداشت ما باید حتما یک آدرس ایمیل به این شکل test@test.com وارد میکردیم ولی چون صفت novalidate وجود دارد این یعنی دیگه اعتبار سنجی فیلدها مهم نیست و کاربر هر چیزی که بخواهد میتونه وارد کنه.
|
1 2 3 4 |
<form action="get.php" novalidate> . . </form> |
