شما می توانید با عضویت در انجمن پرسش و پاسخ درسمن هرگونه سوالی دارید را مطرح کنید


ساخت فرم در html


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

ساخت فرم در html

برای ساخت فرم‌ها از تگ <form></form> استفاده می کنیم. و برای ساخت اجراع فرم از تگ <table></table> که قبلا با آن آشنا شدیم استفاده می کنیم. ابتدا یک جدول 2سطونه می‌‌سازیم و سطون های اول را با عنوان(نام، آدرس، ایمیل و …) و ستون دوم را با جعبه هایی برا دریافت ورودی از کاربر پر می‌‌کنیم.
ابتدا برای ساخت سطر اول جدول، مانند گذشته اولین تگ <tr></tr> را با یک تگ <th></th> پر می‌کنیم و به تگ <th></th> صفت “”=colspan می دهیم و مقدار آن را 2 می‌‌دهیم تا سطر اولمان به اندازه 2 سطر جا بگیرد.

 

<DOCTYPE html!>

< Html>

< head>

<title>آموزش وب</title>

</ head>

< body>

<form>

<“table   border=”1>

<tr>

</tr>

<tr>

</tr>

</table>

</form>

</ body>

</ Html>

 

برای ساخت جعبه ورودی برای دریافت متن از کاربر، از تگ کوتاه <input/> استفاده می‌کنیم. و صفت “”=type آن را با مقدار text پر می‌کنیم.

 

<DOCTYPE html!>

< Html>

< head>

<title>آموزش وب</title>

</ head>

< body>

<form>

<“table   border=”1>

<tr>

نام

</tr>

<tr>

</ “input   type=”text>

</tr>

</table>

</form>

</ body>

</ Html>

 

برای ساخت جعبه ورودی برای دریافت ایمیل از کاربر، از تگ کوتاه <input/> استفاده می‌کنیم. و صفت “”=type آن را با مقدار email پر می‌کنیم. جعبه‌ای که ایمیل را دریافت می‌کند در ظاهر مانند جعبه‌ای است که متن را دریافت می‌کند اما اگر ورودی ما ساختار ایمیل نداشته باشد به ما خطا می‌دهد.

 

<DOCTYPE html!>

< Html>

< head>

<title>آموزش وب</title>

</ head>

< body>

<form>

<“table   border=”1>

<tr>

ایمیل

</tr>

<tr>

<“input   type=”email>

</tr>

</table>

</form>

</ body>

</ Html>

 

برای ساخت جعبه ورودی برای دریافت رمز عبور از کاربر، از تگ کوتاه <input/> استفاده می‌کنیم. و صفت “”=type آن را با مقدار password پر می‌کنیم. این جعبه، ورودی کاربر را نشان نمی‌دهد و همه‌ی کاراکترهای ورودی را  به حالت یک نقطه نمایش می‌دهد.

 

<DOCTYPE html!>

< Html>

< head>

<title>آموزش وب</title>

</ head>

< body>

<form>

<“table   border=”1>

<tr>

رمزعبور

</tr>

<tr>

</ “input   type=”password>

</tr>

</table>

</form>

</ body>

</ Html>
برای ساخت جعبه ورودی برای دریافت آدرس از کاربر، از تگ بلند <textarea></textarea> استفاده می‌کنیم. این تگ به ما یک جعبه ورودی می‌دهد، که قابلیت کوچک و بزرگ شدن توسط کاربر را دارد.

 

<DOCTYPE html!>

< Html>

< head>

<title>آموزش وب</title>

</ head>

< body>

<form>

<“table   border=”1>

<tr>

آدرس

</tr>

<tr>

<textarea>

</textarea>

</tr>

</table>

</form>

</ body>

</ Html>
برای ساخت جعبه ورودی برای دریافت تاریخ از کاربر، از تگ کوتاه <input/> استفاده می‌کنیم. و صفت “”=type آن را با مقدار date پر می‌کنیم.

 

<DOCTYPE html!>

< Html>

< head>

<title>آموزش وب</title>

</ head>

< body>

<form>

<“table   border=”1>

<tr>

آدرس

</tr>

<tr>

<textarea>

</textarea>

</tr>

</table>

</form>

</ body>

</ Html>

 

برای ساخت جعبه ورودی برای دریافت رنگ از کاربر، از تگ کوتاه <input/> استفاده می‌کنیم. و صفت “”=type آن را با مقدار color پر می‌کنیم.

 

<DOCTYPE html!>

< Html>

< head>

<title>آموزش وب</title>

</ head>

< body>

<form>

<“table   border=”1>

<tr>

آدرس

</tr>

<tr>

<textarea>

</textarea>

</tr>

</table>

</form>

</ body>

</ Html>
برای ساخت جعبه ورودی برای دریافت عدد از کاربر، از تگ کوتاه <input/> استفاده می‌کنیم. و صفت “”=type آن را با مقدار number پر می‌کنیم.

 

<DOCTYPE html!>

< Html>

< head>

<title>آموزش وب</title>

</ head>

< body>

<form>

<“table   border=”1>

<tr>

آدرس

</tr>

<tr>

<textarea>

</textarea>

</tr>

</table>

</form>

</ body>

</ Html>

 

برای ساخت چند گزینه که کاربر بتواند فقط یکی از آن‌ها را انتخاب کند، از تگ کوتاه <input/> استفاده می‌کنیم. و صفت “”=type آن را با مقدار radio پر می‌کنیم. و آن‌را تکرار می‌کنیم تا گزینه‌ها بیشتر شوند.

 

<DOCTYPE html!>

< Html>

< head>

<title>آموزش وب</title>

</ head>

< body>

<form>

<“table   border=”1>

<tr>

آدرس

</tr>

<tr>

<textarea>

</textarea>

</tr>

</table>

</form>

</ body>

</ Html>

 

برای ساخت چند گزینه که کاربر بتواند همه‌ی آن‌ها را انتخاب کند، از تگ کوتاه <input/> استفاده می‌کنیم. و صفت “”=type آن را با مقدار checkbox پر می‌کنیم. و آن‌را تکرار می‌کنیم تا گزینه‌ها بیشتر شوند.
<DOCTYPE html!>

< Html>

            < head>

                        <title>آموزش وب</title>

</ head>

< body>

<form>

                        <“table   border=”1>

                                    <tr>

                                                ورزش مورد علاقه

</tr>

<tr>

            </ “input   type=”checkbox>ووشو

            &emsp;

  </ “input   type=”checkbox>فوتبال

&emsp;

  </ “input   type=”checkbox>جودو

&emsp;

  </ “input   type=”checkbox>شنا

</tr>

</table>

</form>

</ body>

</ Html>

 

برای دریافت تصویر از کاربر، از تگ کوتاه <input/> استفاده می‌کنیم. و صفت “”=type آن را با مقدار file پر می کنیم.
<DOCTYPE html!>
< Html>
< head>
<title>آموزش وب</title>
</ head>
< body>
<form>
<“table   border=”1>
 <tr>
تصویر
</tr>
<tr>
<input   type=”file” />
</tr>
</table>
</form>
</ body>
</ Html>
برای ساخت یک منوی باز شونده یا دراپداون از تگ <select></select> استفاده می‌کنیم و برای ساخت آیتم‎‌ها، درون آن از تگ <option></option> استفاده می‌کنیم.
<DOCTYPE html!>
< Html>
< head>
<title>آموزش وب</title>
</ head>
< body>
<form>
<“table   border=”1>
 <tr>
تصویر
</tr>
<tr>
<input   type=”file” />
</tr>
</table>
</form>
</ body>
</ Html>

 


نظر بدهید

نشانی ایمیل شما منتشر نخواهد شد .
برای ارسال نظر نیاز است وارد سایت شوید. در صورت نداشتن حساب کاربری عضو شوید.
13 جلسه برای دوره آموزش جامع HTML

دوره آموزش جامع HTML


تعداد جلسات 13 جلسه
مدت زمان 408 دقیقه
سطح مهارت مقدماتی تا پیشرفته
زبان فارسی
دانشجو 56 دانشجو
گواهی نامه ندارد
قیمت دوره : 0 تومان
رایگان
مهدی عباسی
مهدی عباسی

درباره مدرس :

مدیر‌ عامل‌ شرکت آریا‌ نرم‌‌ افزار دارنده مدرک کارشناسی‌ ارشد مهندسی کامپیوتر 12‌ سال سابقه تدریس دروس کامپیوتر را در دانشگاههای دولتی، آزاد، پیام‌نور ملایر، شهیدشمسی‌پور تهران و تدریس برنامه‌نویسی در انیستیتو ایزایران، مجتمع فنی و موسسه راه‌آینده تهران دارا میباشد و تا به حال راهنمایی انجمنهای علمی دانشگاه و صدها پروژه دانشجویی را برعهده داشته است. تخصص اصلی: با داشتن گواهی‌نامه‌های معتبر تدریس از انیستیتو‌ ایزایران، راه آینده‌تهران و سازمان‌فنی‌حرفه‌ای، تدریس و آموزش‌ دروس کامپیوتر، ‌برنامه‌نویسی کامپیوتر و کلاسهای کنکور کارشناسی و کارشناسی‌ارشد میباشد.همچنین تجربه داوری و نظارت مسابقات برنامه‌نویسی کشوری‌ACM را در سالهای متعدد داشته و تیم مورد رهبری ایشان در 3سال متوالی مقام اول مسابقات کشوری را از آن خود کرده است.ایشان مقالاتی در زمینه شبکه‌های کامپیوتری، تکنیک‌های وزارت دفاع و ... به ثبت رسانده و مشاور و کارشناس در طراحی و برنامه نویسی بیش از 50‌برنامه کاربردی تحت وب و ویندوز و موبایل میباشد. افتخارات دیگر:کسب مقام دوم ایده‌های برتر در مسابقات استارت‌آپ و بکند کشوری را نام برد.

دوره آموزش جاوا اسکریپت-مقدماتی تا متوسط

دوره آموزش جاوا اسکریپت-مقدماتی تا متوسط

مهدی عباسی


62
رایگان
470 دقیقه
جزئیات دوره
دوره رایگان آموزش جاوا - مقدماتی تا متوسط

دوره رایگان آموزش جاوا - مقدماتی تا متوسط

مهدی عباسی


72
رایگان
685 دقیقه
جزئیات دوره
آموزش مفاهیم Delegate ها در سی شارپ

آموزش مفاهیم Delegate ها در سی شارپ

احمد غیاثوند


11
رایگان
30 دقیقه
جزئیات دوره
آموزش Modular Application در اندروید

آموزش Modular Application در اندروید

احمد غیاثوند


10
رایگان
12 دقیقه
جزئیات دوره
آموزش پیغام Toast سفارشی در اندروید

آموزش پیغام Toast سفارشی در اندروید

احمد غیاثوند


15
رایگان
22 دقیقه
جزئیات دوره
دوره آموزش سی شارپ پیشرفته

دوره آموزش سی شارپ پیشرفته

مهدی عباسی


34
رایگان
100 دقیقه
جزئیات دوره
تحلیل مدارهای الکتریکی پایه 2

تحلیل مدارهای الکتریکی پایه 2

علیرضا نوروزی


18
200,000 تومان
630 دقیقه
جزئیات دوره
دوره حل تمرین سی پلاس پلاس

دوره حل تمرین سی پلاس پلاس

مهدی احمدی


28
25,000 تومان
1550 دقیقه
جزئیات دوره