files.free-learn.ir · Web view2019-12-19 · عناصر قابل استفاده در تگ Form...
7
فاده در تگبل است عناصر قاForm درHTML 1 متعلق بهین فایل ا فری لرنت آموزشی سای می باشد. آزاد کامومده از آن برای عمستفاشد و ا می با[email protected] https://free-learn.ir / فاده در تگبل است عناصر قاForm درHTML ای قدم به قدم زبان آموزش هجموعه در این بخش از مHTML ستفاده دربل اا تگ های قام با عناصر ی میخواهی فرم هایHTML ها کار کنیم.ا و با آن آشنم رو در یکده از تگ فرستفا نحوه ایجاد و قبلی آموزش اه در بخش بند صفحه ی وبHTML بطور کامل آموزشم این بخش رو از پیشنهاد میکن دادم کهینجا اید.ده نمای مشاهوانیم در تگ که ما میتی تگ هایامیه باشید تا با تمن همرامه با مل در ادا حاForm م آشنا شوید.یستفاده نمای ا< عنصرinput م ها در فر در> HTML ا تگ های موجود در عناصر یفاده ترینهمترین و پراستکی از م یForm یا همونB ورودی ها ، عناصر< input > ها میهند.نجام دره مشخصی را ای ما کا میتواند برا نوع هاد و هر یک از این مختلفی دارن نوع های باشند، که عنصر مثال یک نوع برایInput یجاد یک هست برای ا دیگهکی ساده و یلد متنیک فییجاد ی هست، برای ا در بخشن شاکس و.. که از نوع چک با ا و یا مث) نماید واردB در آن رمز یا پسوردبر بتواندکه کار( پسورد فیلد خواهید شد. آشناB ورودیامی عناصرل با تم بعدی بطور کام بیش از فرم ها درB ورودی عناصر۱۰ ید.ده نماینید مشاه میتوار بخش بعدی را د ی آنهامه هوع می باشند که ن مثال زیر یک درInput شان میدهد :ده را نوع متنی سا ورودی از ن یا1 >input type="text"< کنیدمتحان ا( B ورودی که گفتم عناصرد، همانطورجاد میکن را ایوع متنی ورودی از ن یک عنصری مثال دستور با براinput ) ر بخش بعدی بای و.. که د نوع رادیویز نوع پسورد یا نوع دکمه یا اشته باشند، مث مختلفی داد نوع هاین میتوان ورودی در های عناصرع حالت ها یا نوع انواHTML خواهید شد. آشنا
Transcript of files.free-learn.ir · Web view2019-12-19 · عناصر قابل استفاده در تگ Form...
HTML در Formعناصر قابل استفاده در تگ
می باشد و استفاده از آن برای عموم کامال آزاد می باشد. سایت آموزشی فری لرناین فایل متعلق به 1
[email protected]://free-learn.ir/
HTML در Form عناصر قابل استفاده در تگ
میخواهیم با عناصر یا تگ های قابل استفاده درHTMLدر این بخش از مجموعه آموزش های قدم به قدم زبان آشنا و با آنها کار کنیم.HTMLفرم های
بطور کامل آموزشHTML صفحه ی وببنده در بخش قبلی آموزش ایجاد و نحوه استفاده از تگ فرم رو در یک مشاهده نمایید.اینجادادم که پیشنهاد میکنم این بخش رو از
استفاده نماییم آشنا شوید.Formحال در ادامه با من همراه باشید تا با تمامی تگ هایی که ما میتوانیم در تگ
HTML< در فرم ها در inputعنصر >
ها می<input> ها ، عناصر ورودی یا همون Formیکی از مهمترین و پراستفاده ترین عناصر یا تگ های موجود در باشند، که نوع های مختلفی دارند و هر یک از این نوع ها میتواند برای ما کاره مشخصی را انجام دهند.
هست، برای ایجاد یک فیلد متنی ساده و یکی دیگه هست برای ایجاد یکInputبرای مثال یک نوع عنصر فیلدپسورد )که کاربر بتواند در آن رمز یا پسورد وارد نماید( و یا مثال از نوع چک باکس و.. که ان شاهللا در بخش
بعدی بطور کامل با تمامی عناصر ورودی آشنا خواهید شد.
نوع می باشند که همه ی آنها را در بخش بعدی میتوانید مشاهده نمایید.۱۰عناصر ورودی در فرم ها بیش از
یا ورودی از نوع متنی ساده را نشان میدهد :Inputدر مثال زیر یک
1 >input type="text"<
امتحان کنید
(inputبرای مثال دستور باال یک عنصر ورودی از نوع متنی را ایجاد میکند، همانطور که گفتم عناصر ورودی ) میتوانند نوع های مختلفی داشته باشند، مثال از نوع پسورد یا نوع دکمه یا نوع رادیویی و.. که در بخش بعدی با
آشنا خواهید شد.HTMLانواع حالت ها یا نوع های عناصر ورودی در
HTML در Formعناصر قابل استفاده در تگ
می باشد و استفاده از آن برای عموم کامال آزاد می باشد. سایت آموزشی فری لرناین فایل متعلق به 2
[email protected]://free-learn.ir/
HTML< در فرم ها در selectعنصر >
را ایجاد نماییم، و بصورت پیش فرض اولینلیست بازشوبا استفاده از این عنصر یا تگ در فرم ها ما میتوانیم یک گزینه در این لیست بصورت انتخاب شده می باشد.
1
2
3
4
5
6
>select name="color"<
>option value="blue"<آبی>/option<
>option value="red"<قرمز>/option<
>option value="green"<سبز>/option<
>option value="yellow"<زرد>/option<
>/select<
امتحان کنید
انتخاب نماییم باید از مقدارپیش فرضدر صورتی که بخواهیم یک گزینه را به دلخواه خودمان از لیست بصورت selected.درون گزینه ی مورد نظرمان استفاده نماییم
1
2
3
>select name="color"<
>option value="yellow" selected<زرد>/option<
>/select<
امتحان کنید
HTML در Formعناصر قابل استفاده در تگ
می باشد و استفاده از آن برای عموم کامال آزاد می باشد. سایت آموزشی فری لرناین فایل متعلق به 3
[email protected]://free-learn.ir/
و مقداری که دریافت میکند میتوانیم مشخص نماییم که چه تعداد از مقادیر موجودsizeما نیز با استفاده از صفت می باشد، ولی ما میتوانیم به دلخواه نیز این۱در لیست نمایش داده شوند، که بصورت پیش فرض این مقدار
گزینه را مشخص نماییم.
1
2
3
>select size="4"<
.
>/select<
امتحان کنید
به کاربر این امکان رو بدهیم که بتواند از بینselect درون تگ multipleهمچنین ما میتوانیم با قرار دادن دستور گزینه های موجود در لیست چندین گزینه )بیش از یک گزینه( را انتخاب نماید.
را از روی صفحه کلید نگه دارید و سپس با ماوس گزینه هایCtrlبرای انتخاب چندین گزینه از لیست بازشو دکمه مورد نظرتان را انتخاب نمایید.
1
2
3
>select size="4" multiple<
.
>/select<
امتحان کنید
HTML< در فرم ها در textareaعنصر >
HTML در Formعناصر قابل استفاده در تگ
می باشد و استفاده از آن برای عموم کامال آزاد می باشد. سایت آموزشی فری لرناین فایل متعلق به 4
[email protected]://free-learn.ir/
یکی دیگر از عناصر یا تگ های مورد استفاده در فرم ها و بطور کلی درtextareaتکست اِریا یا ناحیه متنی یا HTMLمی باشد که با استفاده از این عنصر میتوانیم یک باکس متنی با قابلیت دریافت چندین خط متن را ایجاد نماییم.
میتوانیم اندازه ناحیه متن مان را مشخص نماییم.cols و rowsاز طریق صفت های
1
2
3
>textarea rows="5" cols="25"<
.
>/textarea<
امتحان کنید
HTML< در فرم ها در buttonعنصر >
( استInputبطور کلی میشه گفت ما دو نمونه دکمه میتونیم داشته باشیم، یک نمونه دکمه هست که از نوع عناصر ورودی )و در درون فرم ها قرار میگیرند و با کلیک بروی آنها اطالعات وارد شده در فرم به سرور ارسال می شود.
هستند و ما میتوانیم در این نوع دکمه ها یک محتواbuttonیک نمونه ی دیگر از دکمه ها هستند که از نوع عناصر )تصویر،متن و..( را قرار دهیم و در واقع تفاوت اصلی این نوع دکمه با دکمه های از نوع عناصر ورودی در همین است.
1
2
3
>body<
>button type="button" onclick="alert)'اینجا کلیک کن>")'سالم خوبی؟>/button<
>/body<
امتحان کنید
HTML< در فرم ها در fieldsetعنصر >
HTML در Formعناصر قابل استفاده در تگ
می باشد و استفاده از آن برای عموم کامال آزاد می باشد. سایت آموزشی فری لرناین فایل متعلق به 5
[email protected]://free-learn.ir/
فیلدِست تگی است که ما با استفاده از آن میتوانیم عناصر موجود در فرم هارو گروه بندی کنیم، بفرض مثالیکسری اطالعات شخصی و یکسری اطالعات تحصیلی و .. وجود دارد که باید از کاربر دریافت شود.
میتوانیم یک کپشن یا یک عنوان را برای گروه مون مشخصfieldset درون عنصر legendما با استفاده از تگ نماییم.
1
2
3
4
5
>fieldset<
>legend<اطالعات شخصی>/legend<
>"input type="text" name="fname< :نام
>"input type="text" name="lname< :فامیلی
>/fieldset<
امتحان کنید
HTML5عناصر جدید فرم ها در
HTML در Formعناصر قابل استفاده در تگ
می باشد و استفاده از آن برای عموم کامال آزاد می باشد. سایت آموزشی فری لرناین فایل متعلق به 6
[email protected]://free-learn.ir/
عنصر را۲ دو عنصر جدید در فرم ها اضافه شده است که در ادامه میتوانید نحوه ی استفاده از این HTML5در مشاهده نمایید.
HTML5< در datalistعنصر >
ما میتوانیم یک لیست با گزینه های از پیش تعریف شده را ایجاد نماییمHTML5 در datalistبا استفاده از عنصر که کاربر بتواند از بین گزینه های موجود در لیست به دلخواه یک گزینه را انتخاب نماید.
یک لیست را تعریف نماییم و سپس در مرحلهlist( و صفت Inputدر مرحله اول باید با استفاده از عنصر ورودی ) در مرحله ی اول ایجاد کردیمlist صفت استفاده کرد و سپس نامی که در id و صفت datalistی دوم باید از عنصر
قرار دهیم.datalist عنصر id صفت را در
1
2
3
4
5
6
7
>input list="browsers"<
>datalist id="browsers"<
>option value="Firefox"<
>option value="Chrome"<
>option value="Opera"<
>option value="Safari"<
>/datalist<
امتحان کنید
HTML5< در outputعنصر >
HTML در Formعناصر قابل استفاده در تگ
می باشد و استفاده از آن برای عموم کامال آزاد می باشد. سایت آموزشی فری لرناین فایل متعلق به 7
[email protected]://free-learn.ir/
این عنصر یا تگ یکی از تگ های محاسبه گر در فرم ها می باشد، یعنی همانطورم که از اسمش پیداست این عنصر میتواند نتیجه ی یک یا چند عمل را در خروجی به نمایش در بیاورد، و بطور کلی ما برای ایجاد خروجی مان از
این عنصر استفاده مینماییم.
عدد را به دلخواه۲لطفا برای مشاهده خروجی مثال زیر بروی دکمه امتحان کنید کلیک نمایید و سپس در خروجی، انتخاب نمایید تا حاصل جمع آن به شما نمایش داده شود.
1
2
3
4
5
6
7
>form oninput="x.value=parseInt)a.value(+parseInt)b.value("<
>input type="number" id="a" name="a" value="5"<
+
>input type="number" id="b" name="b" value="5"<
=
>output name="x" for="a b"<>/output<
>/form<
امتحان کنید
