تهران، سیدخندان به سمت رسالت شرق، خیابان کابلی (دبستان)، نبش کوچه آگاهی، پلاک ۴ ، واحد ۱۵
۰۹۱۲۰۱۹۹۳۸۶   ۰۲۱۸۸۴۷۱۵۲۱

آموزش HTML – بخش سیزدهم

آموزش HTML | آموزش HTML5

در آموزش‌های گذشته دیدیم که یک فرم می‌تواند چندین ورودی داشته باشد و نوع ورودی را با اتریبیوت type تعیین می‌شد. در بخش سیزدهم از آموزش گام‌به‌گام HTML در طراحی سایت به بررسی مقادیری که اتریبیوت type می‌تواند بگیرد می‌پردازیم و ورودی‌های مختلف را باهم بررسی می‌کنیم. در این قسمت از آموزش HTML می‌بینیم که چه ورودی‌هایی به یک فرم در HTML5 اضافه‌شده است.

مقدار اتریبیوت type برای ورودی متن

وقتی‌که می‌خواهیم ورودی را در فرم قرار دهیم که آن ورودی با چند کلمه پر شود، مانند ورودی‌های نام، نام خانوادگی، شهر و … مقدار اتری بیوت type را text می‌دهیم. در این صورت فیلدی ایجاد می‌شود که می‌توان درون آن چند کلمه را تایپ کرد.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> عنوان صفحه </title>
</head>
<body>
<form>
: نام <br>
<input type="text" name="firstname">
<br>
: نام خانوادگی <br>
<input type="text" name="lastname">
<br> <br>
<input type="submit" value="ارسال">
</form>
</body>
</html>
آموزش HTML | آموزش HTML5

مقدار اتریبیوت type برای ورودی رمز

برای تعریف ورودی که قرار است در آن رمز وارد شود مقدار اتریبیوت type را password قرار می‌دهیم. فیلدی که ایجاد می‌شود، فیلد رمز است و کاراکترهایی که در آن تایپ می‌شوند، به‌صورت دایره‌های توپر مشکی و یا ستاره نمایش داده می‌شوند.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> عنوان صفحه </title>
</head>
<body>
<form>
: نام <br>
<input type="text" name="firstname">
<br>
: نام خانوادگی <br>
<input type="text" name="lastname">
<br> <br>
<input type="submit" value="ارسال">
</form>
</body>
</html>
آموزش HTML | آموزش HTML5

با کلیک بر روی دکمه ارسال، مقادیر نام کاربری و رمز عبور را که در فرم وارد می‌کنید، در آدرس بار نمایش داده خواهند شد.

مقدار اتریبیوت type برای ایجاد دکمه سابمیت

در مثال‌های قسمت‌های قبل دیدید که برای ایجاد دکمه ارسال درون یک فرم، مقدار اتریبیوت type را submit قرار می‌دهیم و کلمه‌ای را که می‌خواهیم بر روی دکمه نوشته شود را به اتریبیوت value می‌دهیم. همان‌طور که میدانید، با کلیک بر روی دکمه ارسال، فرم برای صفحه‌ای در سرور ارسال می‌شود که در آنجا پردازش می‌شود. این صفحه را form-handler نامیده‌ایم و در آموزش‌های php به بررسی نحوه عملکرد آن می‌پردازیم. در وردی‌هایی که text هستند، مقدار اتریبیوت value عباراتی هستند که درون فیلدها نوشته می‌شوند که باید توسط کاربر حذف شوند و عبارات جدید جایگزین شود.

<!DOCTYPE html>
<html lang="en">
          <head>
                   <meta charset="UTF-8">
                   <title> عنوان صفحه </title>
          </head>
          <body>
                   <form action="">
                            : نام <br>
                             <input type="text" name="userid" value="نام">
                             <br>
                             : نام خانوادگی <br>
                             <input type="text" name="psw" value="نام خانوادگی">
                             <br> <br>
                             <input type="submit" value="ارسال">
                   </form>
          </body>
</html>

 

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

<!DOCTYPE html>
<html lang="en">
         <head>
                   <meta charset="UTF-8">
                   <title> عنوان صفحه </title>
          </head>
          <body>
                  <form action="">
                             : نام <br>
                             <input type="text" name="userid" value="نام">
                             <br>
                            : نام خانوادگی <br>
                             <input type="text" name="psw" value="نام خانوادگی">
                             <br> <br>
                            <input type="submit">
                   </form>
          </body>
</html>

 

آموزش HTML | آموزش HTML5

مقدار اتریبیوت type برای ایجاد دکمه ریست فرم

وقتی‌که می‌خواهیم تمام فیلدهای فرم را با کلیک بر روی یک دکمه حذف کنیم، ورودی را به فرم اضافه می‌کنیم و مقدار اتریبیوت type را در آن ورودی reset قرار می‌دهیم. در این صورت وقتی‌که فرمی را پرکنید، با کلیک بر روی این دکمه تمام فیلدها حذف خواهد شد. و مقادیر دیفالت درون فیلد ها نمایش داده می‌شود.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> عنوان صفحه </title>
</head>
<body>
<form action="">
: نام <br>
<input type="text" name="userid" value="نام">
<br>
: نام خانوادگی <br>
<input type="text" name="psw" value="نام خانوادگی">
<br> <br>
<input type="submit" value="ارسال">
<input type="reset" value="حذف">
</form>
</body>
</html>

 

آموزش HTML | آموزش HTML5

مقدار اتریبیوت type برای ایجاد دکمه رادیویی

کاربرد دکمه رادیویی زمانی است که میخواهیم کاربر از بین چند گزینه فقط یک گزینه را انتخاب کند. در مثال‌های بخش‌های قبل دیدیم که اتریبیوت name در تمام گزینه‌ها باید یکسان باشد و یک مقدار برای اتریبیوت value که مرتبط با گزینه است را تعیین می‌کنیم.

<!DOCTYPE html>
<html lang="en">
          <head>
                   <meta charset="UTF-8">
                   <title> عنوان صفحه </title>
          </head>
          <body>
                   <form action="">
                             <input type="radio" name="name" value="any"> مورد ۱
                             <input type="radio" name="name" value="any"> مورد ۲
                             <input type="radio" name="name" value="any"> مورد ۳
                             <input type="radio" name="name" value="any"> مورد ۴
                   </form>
          </body>
</html>

 

آموزش HTML | آموزش HTML5

مقدار اتریبیوت type برای ایجاد چک باکس

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

<!DOCTYPE html>
<html lang="en">
          <head>
                  <meta charset="UTF-8">
                   <title> عنوان صفحه </title>
          </head>
          <body>
                   <form action="">
                             <input type="checkbox" name="name1" value="any"> مورد ۱
                             <input type="checkbox" name="name2" value="any"> مورد ۲
                             <input type="checkbox" name="name3" value="any"> مورد ۳
                   </form>
          </body>
</html>

 

آموزش HTML | آموزش HTML5
آموزش HTML | آموزش HTML5

مقدار اتریبیوت type برای ایجاد دکمه

برای ایجاد یک دکمه برای فراخوانی یک تابع جاوا اسکریپت و یا هر تابعی، می‌توانیم هم از تگ <button> استفاده کنیم و هم در یک ورودی به اتریبیوت type مقدار button را می‌دهیم. در هر دو روش یک تابعی را که مقدار اتریبیوت onclick است را درون تگ می‌نویسیم تا با کلیک بر روی دکمه تابع اجرا شود.

<!DOCTYPE html>
<html lang="en">
          <head>
                   <meta charset="UTF-8">
                   <title> عنوان صفحه </title>
          </head>
          <body>
                   <form action=" ">
<input type="button" onclick="alert(' hello friend!!! ' ) " value="کلیک کنید">
</form>
          </body>
</html>

 

در مورد اتریبیوت onclick توضیح اینکه به مرورگر میگوییم با کلیک بر روی دکمه عبارت درون alert را نمایش بده که پنجره‌ای باز می‌شود عبارت نمایش داده می‌شود. در آموزش جاوا اسکریپت به بررسی این توابع خواهیم پرداخت.

مقادیر جدید تعریف‌شده برای اتریبیوت type در HTML5

ورودی‌های مختلفی در HTML5 اضافه‌شده است که در ادامه این بخش به آن می‌پردازیم. در مرورگرهایی که این ورودی‌ها پشتیبانی نمی‌شوند، مرورگر این ورودی‌ها را ورودی text در نظر می‌گیرد.

مقدار number برای اتریبیوت type

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

این ورودی در تمام مرورگرها پشتیبانی می‌شود.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> عنوان صفحه </title>
</head>
<body>
<form action="">
<p> ورودی زیر مقدار از پیش تعیین شده ندارد </p>
<br>
<input type="number" name="name" max="50" min="0">
<br> <br>
<p> در وردی زیر مقدار اولیه ۲۵ تعیین شده است </p>
<input type="number" name="name" max="50" min="0" value="25">
</form>
</body>
</html>

 

آموزش HTML | آموزش HTML5

در مثال بالا با دکمه های فیلد، اعداد یکی یکی اضافه میشوند. اتریبیوت step اتریبیوتیست که مقدار آن اعداد را با مقدار دلخواهی افزایش یا کاهش میدهد.

<!DOCTYPE html>
<html lang="en">
          <head>
                   <meta charset="UTF-8">
                   <title> عنوان صفحه </title>
          </head>
          <body>
                   <p> در فیلد زیر اعداد ۵ تا ۵ تا کم و یا زیاد میشوند </p>
                   <form action="">
                             <input type="number" name="name" min="0" max="200" step="5" value="100">
                   </form>
          </body>
</html>

 

آموزش HTML | آموزش HTML5

مقدار date برای اتریبیوت type

در HTML5 برای ایجاد فیلد انتخاب تاریخ مقدار اتریبیوت type را date قرار میدهیم و یک نام مثلا bday ( که مخفف birthday است ) را برای آن تعیین میکنیم. توجه کنید که این فیلد در مرورگر فایر فاکس پشتیبانی نمیشود. بسته به پشتیبانی مرورگر، ممکن است یک پنجره برای انتخاب تاریخ باز شود.

<!DOCTYPE html>
<html lang="en">
          <head>
                  <meta charset="UTF-8">
                  <title> عنوان صفحه </title>
          </head>
          <body>
                   <form>
                     Birthday:
                     <input type="date" name="bday">
                     <input type="submit">
                   </form>
          </body>
</html>

 

آموزش HTML | آموزش HTML5

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

<!DOCTYPE html>
<html lang="en">
          <head>
                   <meta charset="UTF-8">
                   <title> عنوان صفحه </title>
          </head>
          <body>
                   <form>
                     Birthday:
                     <input type="date" name="bday" min="2000-01-01" max="2017-12-31">
                     <input type="submit">
                   </form>
          </body>
</html>

 

آموزش HTML | آموزش HTML5

نتیجه را با مرورگری غیر از فایرفاکس مشاهده کنید

ایجاد فیلد انتخاب رنگ

<input type=”color”> فیلد انتخاب رنگ را ایجاد میکند. برای این فیلد نیز باید نامی را با اتریبیوت name انتخاب کرد. نحوه نمایش پنجره انتخاب رنگ به مرورگر بستگی دارد.

<!DOCTYPE html>
<html lang="en">
          <head>
                   <meta charset="UTF-8">
                   <title> عنوان صفحه </title>
          </head>
          <body>
                   <p> با کلیک بر روی دکمه زیر، پنجره انتخاب رنگ باز می‌شود. کدهای هر رنگ نیز در اختیار کاربر قرار می‌گیرد. </p>
                   <br> <br>
                   <form action="">
                             <input type="color" name="favcol" name="favcol">
                   </form>
</html>

 

آموزش HTML | آموزش HTML5

ایجاد ورودی رنج

می‌توان یک اسلایدر کنترل ( slider contlor ) را درون فرم قرارداد. بدین ترتیب که مقدار اتریبیوت typeرا rang می‌دهیم. اسلایدر کنترل دکمه‌ای است که برای انتخاب رنجی خاص به سمت چپ و یا راست جابجا می‌شود. مقدار رنج انتخابی در صفحه‌نمایش داده نمی‌شود و توابعی از جاوا اسکریپت و یا php را می‌توان به این وردی متصل کرد تا کار خاصی را انجام دهد. در اینجا صرفا می‌خواهیم با این ورودی آشنا شویم و توابع را استفاده نمی‌کنیم. همان‌طور که میدانید و تا الان دیده‌ایم، همه‌ی ورودی‌های یک فرم دارای نامی مختص به خود هستند که توسط طراح انتخاب می‌شوند. این ورودی نیز باید نامی داشته باشد.

با اتریبیوت های max ، min ، step و value آشنا شدیم. در این ورودی نیز این اتریبیوت ها به کار می‌روند.

max برای بیشترین عددی را که می‌توان انتخاب کرد.

min برای کمترین عددی که می‌توان انتخاب کرد.

step برای تعیین میزان افزایش یا کاهش با جابجا کردن رنج.

value برای انتخاب عدد دیفالت که وقتی کاربر صفحه را باز می‌کند، عددی از پیش تعیین‌شده را ببیند.

گفتیم که رنج انتخاب‌شده در صفحه‌نمایش داده نمی‌شود. در مثال زیر با کلیک بر روی سابمیت مقدار point که همان رنج انتخابی است در آدرس بار مرورگر نمایش داده می‌شود.

<!DOCTYPE html>
<html lang="en">
         <head>
                   <meta charset="UTF-8">
                   <title> عنوان صفحه </title>
          </head>
          <body>
                   <p> این ورودی به صورتی رنجی است که در زیر می‌بینید رنج انتخابی در صفحه‌نمایش داده نمی‌شود. با کلیک بر روی دکمه، رنج در آدرس بار نمایش داده می‌شود. </p>
                   <br> <br>
                   <form action="">
                             <input type="range" name="point" max="50" min="1" value="25" step="3"> <br>
                             <input type="submit" value="ارسال">
                   </form>
          </body>
</html>

 

آموزش HTML | آموزش HTML5

ورودی انتخاب ماه

مقدار month برای اتریبیوت type ورودی را ایجاد می‌کند که با آن می‌توان فقط ماه و سال را انتخاب کرد. در این ورودی روز را نمی‌توان انتخاب کرد.

این ورودی در مرورگر فایرفاکس و ورژنهای قدیمی‌تر از ورژن ۱۱ اینترنت اکسپلورر پشتیبانی نمی‌شود.

<!DOCTYPE html>
<html lang="en">
          <head>
                   <meta charset="UTF-8">
                   <title> عنوان صفحه </title>
          </head>
          <body>
                   <p> با کلیک در ورودی زیر، منویی باز می‌شود که می‌توان ماه و سال را انتخاب کرد. دکمه‌های کوچک درون کادر برای عقب و یا جلو کردن ماه و یا سال است. همچنین می‌توان با کلیک بر روی دکمه مثلثی شکل بزرگ درون کادر، منو را باز کرد و تاریخ موردنظر را انتخاب کرد. </p>
                   <br> <br>
                   <form action="">
                             <input type="month" name="bdmonth" > <br>
                             <input type="submit" value="ارسال">
                   </form>
          </body>
</html>
آموزش HTML | آموزش HTML5

ایجاد وردی برای انتخاب هفته و سال

ورودی با اتریبیوت type=”week” به کاربر این امکان را می‌دهد که شماره هفته و سال را انتخاب کند. مثلا هفته ۲۵ سال ۲۰۱۵٫ نحوه نمایش منو انتخاب تاریخ به مرورگر بستگی دارد.

این فیلد ورودی نیز در فایرفاکس و اینترنتت اکسپلورر ورژن ۱۱ و قدیمی‌تر پشتیبانی نمی‌شود.

<!DOCTYPE html>
<html lang="en">
          <head>
                   <meta charset="UTF-8">
                   <title> عنوان صفحه </title>
          </head>
          <body>
                   <p> با کلیک در ورودی زیر، منویی باز می‌شود که می‌توان هفته و سال را انتخاب کرد. دکمه‌های کوچک درون کادر برای عقب و یا جلو کردن هفته و یا سال است. همچنین می‌توان با کلیک بر روی دکمه مثلثی شکل بزرگ درون کادر، منو را باز کرد و تاریخ موردنظر را انتخاب کرد. </p>
                   <br> <br>
                   <form action="">
                             <input type="week" name="week_year" > <br>
                             <input type="submit" value="ارسال">
                   </form>
          </body>
</html>
آموزش HTML | آموزش HTML5

ایجاد ورودی زمان

مقدار time ورودی زمان را ایجاد می‌کند که به کاربر این امکان را می‌دهد که ساعت و دقیقه‌ای را بدون توجه به ناحیه زمانی تعیین کند.

در فایرفاکس و اکسپلورر ورژن ۱۲ و قدیمی‌تر این فیلد پشتیبانی نمی‌شود.

<!DOCTYPE html>
<html lang="en">
          <head>
                   <meta charset="UTF-8">
                   <title> عنوان صفحه </title>
          </head>
          <body>
                   <p> در کادر زیر کلیک کنید و ساعت و دقیقه را تغییر داده و بر روی دکمه ارسال کلیک کنید و آدرس بار را مشاهده نمایید. قسمت سوم برای تعیین صبح و یا بعدازظهر است </p>
                   <br> <br>
                   <form action="">
                             <input type="time" name="time" > <br> <br>
                             <input type="submit" value="ارسال">
                   </form>
          </body>
</html>

 

آموزش HTML | آموزش HTML5

وردی زمان و تاریخ هم‌زمان در یک فیلد

وردی دیگری با مقدار datetime-local برای اتریبیوت type وجود دارد که فیلدی را ایجاد می‌کند که در آن هم‌زمان تاریخ و ساعت انتخاب می‌شوند.

این ورودی در اینترنت اکسپلورر ۱۲ و قدیمی‌تر و همچنین فایرفاکس پشتیبانی نمی‌شود.

<!DOCTYPE html>
<html lang="en">
          <head>
                   <meta charset="UTF-8">
                   <title> عنوان صفحه </title>
          </head>
          <body>
                   <p> در فیلد زیر می‌توانید هم‌زمان و هم تاریخ را انتخاب و هم‌زمان برای سرور ارسال کنید.  </p>
                   <br> <br>
                   <form action="">
                             <input type="datetime-local" name="datetime" > <br> <br>
                             <input type="submit" value="ارسال">
                   </form>
          </body>
</html>
آموزش HTML | آموزش HTML5

ایجاد فیلد ورودی ایمیل

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

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

این ورودی در مرورگر سافاری پشتیبانی نمی‌شود.

<!DOCTYPE html>
<html lang="en">
          <head>
                   <meta charset="UTF-8">
                   <title> عنوان صفحه </title>
          </head>
          <body>
                   <p> در فیلد زیر آدرس ای میل را وارد کنید. یک‌بار هم به آدرس ایمیل را بدون دامنه و اتساین وارد کنید و دکمه ارسال را کلیک کنید.  </p>
                   <br> <br>
                   <form action="">
                             <input type="email" name="email" > <br> <br>
                             <input type="submit" value="ارسال">
                   </form>
          </body>
</html>
آموزش HTML | آموزش HTML5

ایجاد ورودی جستجو

در سایت‌های مختلف دیده اید که یک فیلد برای جستجوی عبارتی قرار داده‌شده است. با نحوه جستجو کاری نداریم. در اینجا ( در آینده نحوه جستجو آموزش داده می‌شود. ) فقط می‌خواهیم فیلد جستجو را ایجاد کنیم. این فیلد دارای مقدار search برای اتریبیوت type است که فیلدی همانند ورودی text ایجاد می‌کند.

<!DOCTYPE html>
<html lang="en">
          <head>
                   <meta charset="UTF-8">
                   <title> عنوان صفحه </title>
          </head>
          <body>
                   <p> در فیلد زیر عبارتی برای جستجو در سایتی نوشته می‌شود. عبارتی را در کادر نوشته و بر روی دکمه جستجو کلیک کنید و آدرس بار را مشاهده نمایید. عبارت سایت سازان را در کادر زیر وارد کرده‌ایم و بعد از جستجو این عبارت در آدرس بار نمایش داده‌شده است. </p>
                   <br> <br>
                   <form action="">
                             <input type="search" name="searched" > <br> <br>
                             <input type="submit" value="جستجو">
                   </form>
          </body>
</html>

 

آموزش HTML | آموزش HTML5

ایجاد وردی برای دریافت یک URL

Type=”url” اتریبیوتیست که ورودی را برای دریافت یک آدرس URL از کاربر ایجاد می‌کند. همانند ورودی‌ای میل، مرورگرها صحیح و یا غلط بودن آدرس را بررسی کنند. اگر آدرس URL را مطابق الگوی آن وارد نکنید، مرورگر پیغام خطا می‌دهد.

یادآوری: یک آدرس URL بدین‌صورت است : http://www.yourdomine . در آموزش‌های گذشته اجزای یک آدرس URL را توضیح دادیم. در فیلد url آدرس باید همراه با http:// نوشته شود.

این فیلد در مرورگر سافاری پشتیبانی نمی‌شود

<!DOCTYPE html>
<html lang="en">
          <head>
                   <meta charset="UTF-8">
                  <title> عنوان صفحه </title>
          </head>
          <body>
                   <p> در فیلد زیر یک آدرس کامل را وارد کنید و دکمه ارسال را کلیک کنید و آدرس بار را مشاهده نمایید </p>
                   <br> <br>
                   <form action="">
                             <input type="url" name="homepage"> <br> <br>
                             <input type="submit" value="ارسال">                   </form>
          </body>
</html>
آموزش HTML | آموزش HTML5

نوشته های مرتبط

دیدگاه ‏خود را بنویسید