عناصر قابل استفاده در تگ Form در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش عناصر قابل استفاده در تگ Form در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
عناصر قابل استفاده در تگ Form در HTML
در این بخش از مجموعه آموزش های قدم به قدم زبان HTML میخواهیم با عناصر یا تگ های قابل استفاده در فرم های HTML آشنا و با آنها کار کنیم.
بنده در بخش قبلی آموزش ایجاد و نحوه استفاده از تگ فرم رو در یک صفحه ی وب HTML بطور کامل آموزش دادم که پیشنهاد میکنم این بخش رو از اینجا مشاهده نمایید.
حال در ادامه با من همراه باشید تا با تمامی تگ هایی که ما میتوانیم در تگ Form استفاده نماییم آشنا شوید.
Free-Learn
عنصر <input> در فرم ها در HTML
یکی از مهمترین و پراستفاده ترین عناصر یا تگ های موجود در Form ها ، عناصر ورودی یا همون <input> ها می باشند، که نوع های مختلفی دارند و هر یک از این نوع ها میتواند برای ما کاره مشخصی را انجام دهند.
برای مثال یک نوع عنصر Input هست، برای ایجاد یک فیلد متنی ساده و یکی دیگه هست برای ایجاد یک فیلدپسورد (که کاربر بتواند در آن رمز یا پسورد وارد نماید) و یا مثلا از نوع چک باکس و.. که ان شاالله در بخش بعدی بطور کامل با تمامی عناصر ورودی آشنا خواهید شد.
عناصر ورودی در فرم ها بیش از ۱۰ نوع می باشند که همه ی آنها را در بخش بعدی میتوانید مشاهده نمایید.
در مثال زیر یک Input یا ورودی از نوع متنی ساده را نشان میدهد :
|
1 |
<input type="text"> |
برای مثال دستور بالا یک عنصر ورودی از نوع متنی را ایجاد میکند، همانطور که گفتم عناصر ورودی (input) میتوانند نوع های مختلفی داشته باشند، مثلا از نوع پسورد یا نوع دکمه یا نوع رادیویی و.. که در بخش بعدی با انواع حالت ها یا نوع های عناصر ورودی در HTML آشنا خواهید شد.
Free-Learn
عنصر <select> در فرم ها در HTML
با استفاده از این عنصر یا تگ در فرم ها ما میتوانیم یک لیست بازشو را ایجاد نماییم، و بصورت پیش فرض اولین گزینه در این لیست بصورت انتخاب شده می باشد.
|
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> |
ما نیز با استفاده از صفت size و مقداری که دریافت میکند میتوانیم مشخص نماییم که چه تعداد از مقادیر موجود در لیست نمایش داده شوند، که بصورت پیش فرض این مقدار ۱ می باشد، ولی ما میتوانیم به دلخواه نیز این گزینه را مشخص نماییم.
|
1 2 3 4 |
<select size="4"> . . </select> |
همچنین ما میتوانیم با قرار دادن دستور multiple درون تگ select به کاربر این امکان رو بدهیم که بتواند از بین گزینه های موجود در لیست چندین گزینه (بیش از یک گزینه) را انتخاب نماید.
برای انتخاب چندین گزینه از لیست بازشو دکمه Ctrl را از روی صفحه کلید نگه دارید و سپس با ماوس گزینه های مورد نظرتان را انتخاب نمایید.
|
1 2 3 4 |
<select size="4" multiple> . . </select> |
Free-Learn
عنصر <textarea> در فرم ها در HTML
تکست اِریا یا ناحیه متنی یا textarea یکی دیگر از عناصر یا تگ های مورد استفاده در فرم ها و بطور کلی در HTML می باشد که با استفاده از این عنصر میتوانیم یک باکس متنی با قابلیت دریافت چندین خط متن را ایجاد نماییم.
از طریق صفت های rows و cols میتوانیم اندازه ناحیه متن مان را مشخص نماییم.
|
1 2 3 4 |
<textarea rows="5" cols="25"> . . </textarea> |
Free-Learn
بطور کلی میشه گفت ما دو نمونه دکمه میتونیم داشته باشیم، یک نمونه دکمه هست که از نوع عناصر ورودی (Input) است و در درون فرم ها قرار میگیرند و با کلیک بروی آنها اطلاعات وارد شده در فرم به سرور ارسال می شود.
یک نمونه ی دیگر از دکمه ها هستند که از نوع عناصر button هستند و ما میتوانیم در این نوع دکمه ها یک محتوا (تصویر،متن و..) را قرار دهیم و در واقع تفاوت اصلی این نوع دکمه با دکمه های از نوع عناصر ورودی در همین است.
|
1 2 3 4 5 |
<body> <button type="button" onclick="alert('سلام خوبی؟')">اینجا کلیک کن</button> </body> |
Free-Learn
عنصر <fieldset> در فرم ها در HTML
فیلدسِت تگی است که ما با استفاده از آن میتوانیم عناصر موجود در فرم هارو گروه بندی کنیم، بفرض مثال یکسری اطلاعات شخصی و یکسری اطلاعات تحصیلی و .. وجود دارد که باید از کاربر دریافت شود.
ما با استفاده از تگ legend درون عنصر fieldset میتوانیم یک کپشن یا یک عنوان را برای گروه مون مشخص نماییم.
|
1 2 3 4 5 |
<fieldset> <legend>اطلاعات شخصی</legend> نام: <input type="text" name="fname"> فامیلی: <input type="text" name="lname"> </fieldset> |
Free-Learn
عناصر جدید فرم ها در HTML5
در HTML5 دو عنصر جدید در فرم ها اضافه شده است که در ادامه میتوانید نحوه ی استفاده از این ۲ عنصر را مشاهده نمایید.
عنصر <datalist> در HTML5
با استفاده از عنصر datalist در HTML5 ما میتوانیم یک لیست با گزینه های از پیش تعریف شده را ایجاد نماییم که کاربر بتواند از بین گزینه های موجود در لیست به دلخواه یک گزینه را انتخاب نماید.
در مرحله اول باید با استفاده از عنصر ورودی (Input) و صفت list یک لیست را تعریف نماییم و سپس در مرحله ی دوم باید از عنصر datalist و صفت id استفاده کرد و سپس نامی که در صفت list در مرحله ی اول ایجاد کردیم را در صفت id عنصر datalist قرار دهیم.
|
1 2 3 4 5 6 7 8 |
<input list="browsers"> <datalist id="browsers"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> |
عنصر <output> در HTML5
این عنصر یا تگ یکی از تگ های محاسبه گر در فرم ها می باشد، یعنی همانطورم که از اسمش پیداست این عنصر میتواند نتیجه ی یک یا چند عمل را در خروجی به نمایش در بیاورد، و بطور کلی ما برای ایجاد خروجی مان از این عنصر استفاده مینماییم.
لطفا برای مشاهده خروجی مثال زیر بروی دکمه امتحان کنید کلیک نمایید و سپس در خروجی، ۲ عدد را به دلخواه انتخاب نمایید تا حاصل جمع آن به شما نمایش داده شود.
|
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> |
