آموزش خصوصیات ورودی در HTML

آموزش خصوصیات ورودی در HTML

با جلسه بیست و ششم که جلسه آخر آموزش متنی طراحی وب سایت با Html است در خدمت شما هستیم. در این جلسه آموزش خصوصیات ورودی در HTML رو به شما آموزش میدیم.

آموزش خصوصیات ورودی در HTML

وجود فرم‌ها در صفحات سایت، یکی از ویژگی‌های مهم در جلب مخاطب و همچنین دریافت اطلاعات اختصاصی از کاربران است. بعضی از سایت‌ها فقط به فرم ثبت‌نام کاربر بسنده می‌کنند، اما بعضی دیگر با استفاده هوشمندانه از فرم‌ها، اطلاعات مفیدی از کاربران دریافت کرده و محتوای مورد نیاز آن‌ها را به طور اختصاصی نمایش می‌دهند.

فرم‌ها انواع مختلف ورودی مثل عدد، متن، تاریخ، زمان و غیره را دریافت می‌کنند. هر یک از این ورودی‌ها دارای یک نوع خصوصیت یا attribute هستند. در ادامه با انواع خصوصیات ورودی در HTML آشنا می‌شویم.

خصوصیت value در HTML

خصوصیت مقدار (value)، مقدار اولیه برای یک فیلد ورودی را مشخص می‌کند:

<form action="">
First name:<br>
<input type="text" name="firstname" value="John">
</form>

خصوصیت readonly در HTML

خصوصیت readonly مشخص می‌کند که فیلد ورودی فقط خواندنی (غیر قابل تغییر) باشد:

<form action="">
First name:<br>
<input type="text" name="firstname" value="John" readonly>
</form>

خصوصیت disabled در Html

خصوصیت disabled مشخص می‌کند که فیلد ورودی به حالت غیرفعال باشد. فیلد ورودی غیرفعال نه قابل استفاده و نه قابل کلیک شدن است و مقدار آن در هنگام فرستادن فرم، ارسال نخواهد شد:

<form action="">
First name:<br>
<input type="text" name="firstname" value="John" disabled>
</form

خصوصیت size در HTML

خصوصیت size اندازه بر حسب کاراکتر را برای فیلد ورودی مشخص می‌کند:

<form action="">
First name:<br>
<input type="text" name="firstname" value="John" size="40">
</form>

خصوصیت maxlength در HTML

خصوصیت maxlength حداکثر طول مجاز برای فیلد ورودی را مشخص می‌کند:

<form action="">
First name:<br>
<input type="text" name="firstname" maxlength="10">
</form>

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

انواع مختلف خصوصیات در HTML5

نسخه HTML5 خصوصیات زیر را برای <input> اضافه کرده است:

1. autocomplete
2. autofocus
3. form
4. formaction
5. formenctype
6. formmethod
7. formmethod
8. formnovalidate
9. formtarget
10. height and width
11. list
12. min and max
13. multiple
14. pattern (regexp)
15. placeholder
16. required
17. step

همچنین خصوصیات زیر برای <form> توسط HTML5 افزوده شده است:

1. autocomplete
2. novalidate

حتما بخوانید 1 : فیلم آموزش رایگان Html مهندس رحمانی

حتما بخوانید 1 : فیلم آموزش رایگان CSS مهندس رحمانی

خصوصیت autocomplete در HTML

خصوصیت autocomplete مشخص می‌کند که تکمیل خودکار یک فرم یا یک فیلد ورودی فعال یا غیرفعال باشد. وقتی این خصوصیت در حالت فعال باشد مرورگر به صورت خودکار مقادیر ورودی را بر اساس ورودی‌هایی که کاربر قبلا وارد کرده است، کامل می‌کند. می‌توان خصوصیت autocomplete را برای فرم به صورت فعال و برای برخی از فیلدهای ورودی به صورت غیرفعال تنظیم کرد یا بالعکس. این خصوصیت با <form> و انواع ورودی شامل متن، جستجو، url، شماره تلفن، ایمیل، کلمه عبور، datepicker، دامنه و رنگ قابل اجرا است. در مثال زیر خصوصیت autocomplete برای فرم در حالت فعال و برای یک فیلد ورودی در حالت غیر فعال قرار دارد:

<form action="/action_page.php" autocomplete="on">
  First name:<input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  E-mail: <input type="email" name="email" autocomplete="off"><br>
  <input type="submit">
</form>

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

خصوصیت novalidate در HTML

خصوصیت novalidate یک خصوصیت <form> است. این خصوصیت مشخص می‌کند که داده‌های فرم نباید هنگام ارسال تایید اعتبار شوند. مثال زیر نشان می‌دهد که فرم ارسال شده معتبر شناخته نمی‌شود:

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

خصوصیت autofocus در HTML

خصوصیت autofocus مشخص می‌کند که فیلد ورودی باید در زمان بارگذاری سایت به صورت خودکار در حالت فوکوس قرار داشته باشد. در مثال زیر به صورت خودکار در زمان بارگذاری صفحه تمرکز روی فیلد ورودی “First name” است:

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

خصوصیت form در HTML

خصوصیت 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 در HTML

این خصوصیت مشخص‌کننده url فایلی است که کنترل ورودی را در زمان ارسال فایل پردازش می‌کند. خصوصیت formaction خصوصیت action مربوط به عنصر <form> را لغو می‌کند. خصوصیت formaction با “type=”submit و “type=”image به کار می‌رود. مثال زیر مربوط به یک فرم HTML با دو دکمه submit و action های متفاوت است:

<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="/action_page2.php"
  value="Submit as admin">
</form>

خصوصیت formenctype در HTML

خصوصیت formenctype مشخص می‌کند که داده‌های فرم در زمان ارسال چگونه رمزگذاری شوند (فقط برای فرم‌هایی با method=”post”). این خصوصیت بر خصوصیت enctype مربوط به عنصر <form> برتری داشته و با “type=”submit و “type=”image به کار می‌رود. در مثال زیر دکمه submit اول داده‌های فرم که به صورت پیش‌فرض رمزگذاری شده‌اند را ارسال کرده و به صورت “multipart/form-data” رمزگذاری می‌شوند (دکمه submit دوم):

<form action="/action_page_binary.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 در HTML

خصوصیت formmethod روش http برای ارسال داده‌های فرم به action url را تعریف می‌کند. این خصوصیت بر خصوصیت method متعلق به عنصر <form> برتری دارد. این خصوصیت را می‌توان با “type=”submit و “type=”image به کار برد. در مثال زیر، دکمه submit دوم روش 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" value="Submit using POST">
</form>

خصوصیت formnovalidate در HTML

خصوصیت formnovalidate بر خصوصیت novalidate مربوط به عنصر <form> برتری داشته و می‌توان آن را با “type=”submit به کار برد. در مثال زیر، یک فرم با دو دکمه submit (با اعتبارسنجی و بدون اعتبارسنجی) وجود دارد:

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

خصوصیت formtarget در HTML

خصوصیت formtarget یک نام یا یک کلمه عبور را مشخص می‌کند که نشان می‌دهد پاسخ دریافت‌شده پس از ارسل فرم در کجا نمایش یابد. این خصوصیت بر خصوصیت target عنصر <form> برتری دارد و از آن می‌توان با “type=”submit و “type=”image استفاده کرد. در مثال زیر دو دکمه submit با پنجره‌های هدف متفاوت وجود دارد:

<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 در HTML

این خصوصیات طول و عرض یک عنصر <“input type=”image> را مشخص می‌کنند. همیشه باید اندازه تصویر را مشخص کنید. اگر مرورگر اندازه تصویر را نداند، صفحه شما در زمان بارگذاری عکس می‌لرزد. در مثال زیر یک تصویر به عنوان دکمه submit تعریف می‌شود که دارای خصوصیت‌های height و width است:

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

خصوصیت list در HTML

خصوصیت list به یک عنصر <datalist> اشاره می‌کند که حاوی گزینه‌های از پیش تعریف شده برای یک عنصر <input> است. مثال زیر یک عنصر <input> با مقادیر از پیش تعریف شده در یک <datalist> است:

<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 در HTML

این خصوصیات مقادیر حداقل و حداکثر را برای عنصر <input> مشخص کرده و با انواع ورودی شامل عدد، دامنه، تاریخ، datetime-local، ماه، زمان و هفته اجرا می‌شود. مثال زیر عنصرهای <input> با مقادیر min و max را نشان می‌دهد:

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 در HTML

این خصوصیت مشخص می‌کند که کاربر اجازه وارد کردن بیش از یک مقدار را در عنصر <input> دارد. خصوصیت multiple با انواع داده‌های ورودی شامل ایمیل و فایل کار می‌کند. مثال زیر یک فیلد آپلود فایل را نشان می‌دهد که چندین مقدار را می‌پذیرد:

Select images: <input type="file" name="img" multiple>

خصوصیت pattern در HTML

خصوصیت pattern یک عبارت با قاعده تعریف می‌کند که مقدار عنصر <input> با آن مقایسه و بررسی می‌شود. این خصوصیت با ورودی‌های متن، جستجو، url، تلفن، ایمیل و کلمه عبور کار می‌کند. می‌توانید برای کمک به کاربر از خصوصیت جهانی title برای توصیف الگو استفاده کنید. در مثال زیر یک فیلد ورودی وجود دارد که تنها حاوی سه حرف است (بدون عدد یا کاراکتر خاص):

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

خصوصیت placeholder در HTML

این خصوصیت یک نکته (یک مقدار نمونه یا یک توصیف کوتاه از فرمت) ایجاد می‌کند که مقدار پیش‌بینی شده یک فیلد ورودی را توصیف می‌کند. این نکته قبل از آنکه کاربر مقداری را در فیلد ورودی وارد کند در فیلد نمایش داده می‌شود. خصوصیت placeholder با انواع ورودی شامل متن، جستجو، url، تلفن، ایمیل و کلمه عبور به کار می‌رود. مثال زیر یک فیلد ورودی که دارای متن placeholder است را نشان می‌دهد:

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

خصوصیت required در HTML

این خصوصیت مشخص می‌کند که یک فیلد ورودی حتما باید قبل از ارسال فرم پر شود. معمولا این فیلدهای برای اطلاعات مهم کاربر هستند. این خصوصیت با ورودی‌های متن، جستجو، url، تلفن، ایمیل، کلمه عبور، انتخاب‌کننده تاریخ، عدد، چک باکس، رادیو باتن و فایل استفاده می‌شود. مثال زیر یک فیلد ورودی با خصوصیت required را نشان می‌دهد:

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

خصوصیت step در HTML

این خصوصیت تعداد مجاز مراحل را برای یک عنصر <input> مشخص می‌کند. به عنوان مثال، اگر “step=”3 باشند، اعداد مجاز می‌تواند 3-، 0، 3، 6 و غیره باشند. به یاد داشته باشید که خصوصیت step می‌تواند همراه با خصوصیات max و min برای تولید یک دامنه از مقادیر مجاز به کار رود. این خصوصیت با ورودی‌های عدد، دامنه، تاریخ، datetime-local، ماه، زمان و هفته مورد استفاده قرار می‌‌گیرد. مثال زیر یک فیلد ورودی با وقفه‌های عددی مجاز را نشان می‌دهد:

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

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

منبع

لیست جلسات قبل آموزش Html

1. آموزش اصول اولیه و عناصر HTML
2. آموزش کار با خصوصیات(Attribute) و عناوین(Heading) در Html
3. آموزش کار با پاراگراف و استایل در Html
4. آموزش کار با قالب بندی متن در Html
5. آموزش کار با کامنت در HTML
6. آموزش کار با کامنت در HTML
7. آموزش کار با رنگ ها در HTML
8. آموزش کار با تصاویر در HTML
9. آموزش کار با لینک در HTML
10. آموزش کار با جدول در HTML
11. آموزش کار با لیست ها در HTML
12. آموزش کار با عناصر Block و Inline در HTML
13. آموزش کار با عنصر Class در HTML
14. آموزش Html؛ آموزش iframe در HTML
15. آموزش Html؛ آموزش جاوا اسکریپت در HTML
16. آموزش کار با عنصر Head در HTML
17. آموزش Layout در HTML
18. آموزش طراحی سایت ریسپانسیو در HTML
19. آموزش عناصر کد کامپیوتر در HTML
20. آموزش موجودیت (Entities) در HTML
21. آموزش نمادها (Symbols) در HTML
22. آموزش کار با Character (کاراکترهای رزرو شده) در HTML
23. آموزش رمزگذاری URL در HTML
24. آموزش کامل کار با فرم ها در HTML
25. آموزش انواع ورودی (Input) در HTML
26. آموزش خصوصیات ورودی در HTML

حتما بخوانید 1 : فیلم آموزش رایگان Html مهندس رحمانی

حتما بخوانید 1 : فیلم آموزش رایگان CSS مهندس رحمانی

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.