خانه / کامپیوتر / اموزش / آموزش برنامه نویسی HTML (قسمت ۱۷)

آموزش برنامه نویسی HTML (قسمت ۱۷)

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

در آموزش قبل با نحوه اجرای فرم آشنا شده و یک قالب خالی فرم را آماده کردیم کمه به شکل زیر بود :

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

تگ <input> و </input> مهمترین جزء هر فرم است زیرا برای دریافت اطلاعات ما از این تگ جهت ساخت یک باکس استفاده میکنیم، به مثال زیر توجه کنید :

 

خب همونطور که میبینید تنها با استفاده از تگ <input> ما میتونیم یک باکس متنی ایجاد کنیم، اما این باکس چیست ؟ اندازه آن چقدر است ؟ نام آن چیست ؟ کاربرد آن چیست ؟ و … ، اینها سوالاتیست که به وجود می آید، ما برای پاسخ دادن به این سوالات باید از شناسه های تگ <input> استفاده کنیم .

 

type : برای اینکه یک کادر متنی ایجاد کنیم باید مقدار این شناسه را text قرار دهیم.

 

name : این شناسه برای اختصاص یک نام برای ورودی مربوطه استفاده می شود که برای گرفتن خروجی و پردازش اطلاعات فرم از این نام به عنوان مشخصه ی فیلد استفاده می شود.

 

maxlength : این شناسه برای مشخص کردن حداکثر تعداد کاراکترهای ورودی استفاده می شود. این شناسه در مورد ورودی متنی یک سطری استفاده می شود و مقدار آن باید عددی مثبت باشد.

 

size : این شناسه در مورد این نوع ورودی طول کادر را بر حسب تعداد کاراکتر مشخص می کند. البته مرورگرهای مختلف ممکن است بر حسب نوع فونت مورد استفاده اندازه این کادر را مانند هم نشان ندهند. مقدار این شناسه باید عددی مثبت باشد. مقدار پیش فرض این شناسه ۲۰ است یعنی اگر از این شناسه استفاده نکنید مرورگر فیلد و باکس را به اندازه بیست کاراکتر نمایش میدهد، البته این به معنای محدود بودن کاراکتر ها نیست بلکه اندازه نمایش کادر هست.

 

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

 

readonly : این شناسه فقط برای کادرهای متنی مورد استفاده قرار می گیرد و باعث می شود تا کاربر نتواند تغییری در متن نوشته شده در این کادر ایجاد کند اما کاربر می تواند متن را مشاهده کند و آنرا انتخاب کند. مقادیر مربوط به فیلدهایی که به صورت readonly هستند اگرچه توسط کاربر تغییر نمی کنند ولی با ارسال فرم به سرور ارسال می شوند. شاید در حال حاضر بی مصرف باشد اما در آینده با کاربرد های Readonly آشنا خواهیم شد.

 

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

 

توجه : به طور کلی علاوه بر شناسه های بالا ما از شناسه های دیگری هم میتوانیم برای بهتر شدن کارمون استفاده کنیم ، فرض کنید که میخواید یک فیلد عددی یا انگلیسی درست کنید ، برای این کار باید از سمت چپ متن شروع بشه ، برای این کار از شناسه Dir=”ltr” استفاده میکنیم و همچنین برای ایجاد فاصله و رفتن به خط بعد می توانیم از <br> استفاده کنیم .

خب در حال حاضر با شناسه های اصلی آشنا شدیم حالا میخواهیم فرم خود را کامل کنیم، به طور مثال ما میخواهیم دو فیلد یکی اسم و دیگری شماره موبایل را از شخص دریافت کنید بنابراین باید از تابع Size و Maxlength استفاده کنیم زیرا شماره موبایل ۱۱ رقم می باشد و ما نمیخواهیم کاربر عدد بیشتری بتواند وارد کند و همچنین اینکه شماره موبایل از سمت چپ شروع شود، بنابراین به این شکل فرم را می نویسیم :

خب در بالا ما یک فیلد با مشخصه نام و با اندازه ۲۵ ساختیم و یک فیلد با مشخصه موبایل با اندازه ۱۱ و تعداد کاراکتر محدود شده به ۱۱ کاراکتر و مقدار پیشفرض ۰۹ که ابتدای شماره موبایل است ساخته ایم و همچنین چون باکس شماره موبایل باید از سمت چپ شروع شود از Dir استفاده کردیم، خروجی ما به شکل زیر به نمایش در می آید :

نام و نام خانوادگی :

شماره موبایل :

 

خب به این شکل شما میتونید فرم مورد نظر خودتون رو بسازید، لطفاً فرم رو نگه دارید و ذخیره کنید چون در آموزش های بعد با اجزاء دیگر فرم آشنا میشیم و میخوایم فرم خودمون رو کامل تر کنیم ، با ما همراه باشید …

 

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


موفق باشید.

 

دانلود سورس آموزش این جلسه (حجم : ۱ کیلوبایت)

درباره ی nasimazadi

همچنین ببینید

واحد پردازش مركزي CPU 

واحد پردازش مركزي CPU مدت زمان انجام يك كار بوسيله كامپيوتر، به عوامل متعددي بستگي …

پاسخ دهید

%u0637%u0631%u0627%u062D%u06CC %u0633%u0627%u06CC%u062A
طراحی سایتسئوفروش ویلا و اجاره ویلاسرویس و تعمیر کولر گازیاجاره ویلافروش ویلا