این آموزش در تاریخ ۱۴۰۲/۰۶/۱۹ آپدیت شده است.
عناصر قابل استفاده در تگ Form در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش عناصر قابل استفاده در تگ Form در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
عناصر قابل استفاده در تگ Form در HTML
در این بخش از مجموعه آموزش های قدم به قدم زبان HTML میخواهیم با تگ های قابل استفاده در تگ Form آشنا و با اونها کار کنیم.
ما در جلسه قبلی با آموزش ایجاد و نحوه استفاده از تگ فرم در یک صفحه ی وب آشنا شدیم، که پیشنهاد میکنم حتما این بخش رو از اینجا مشاهده نمایید.
حال در ادامه با من همراه باشید تا با تمامی تگ هایی که ما میتوانیم در تگ Form استفاده نماییم آشنا شوید :
Free-Learn
تگ <input> در فرم ها
یکی از مهمترین و پراستفاده ترین تگ های موجود در Form ها ، عناصر ورودی یا همون <input> ها می باشند، که نوع های مختلفی دارند و هر یک از این نوع ها میتواند برای ما کاره مشخصی را انجام دهند.
برای مثال یک نوع عنصر Input هست، برای ایجاد یک فیلد متنی ساده و یکی دیگه هست برای ایجاد یک فیلد پسورد ( که کاربر بتواند در آن رمز یا پسورد وارد نماید ) و یا مثلا از نوع چک باکس و.. که ان شاالله در جلسه بعدی بطور کامل با تمامی نوع های اینپوت ها آشنا خواهید شد.
مثال : استفاده از نوع text ( یعنی متن ) ( مثلا برای دریافت نام یا یه متن کوتاه یا همچین چیزی )
|
1 |
<input type="text"> |
برای مثال دستور بالا یک تگ اینپوت از نوع متنی رو ایجاد میکنه، همانطور که گفتم عناصر ورودی ( Input ها ) میتوانند نوع های مختلفی داشته باشند، مثلا از نوع پسورد یا مثلا نوع دکمه رادیویی و… که در جلسه بعدی با همه آنها آشنا خواهید شد.
Free-Learn
تگ <label> در فرم ها
تگ <label> همونطور که از اسمش هم مشخصه، با استفاده از اون میتونیم برای اینپوت هامون یک برچسب یا لیبل ( یا یه متن برای عنوان یا شناسایی ) مشخص نماییم.
وقتی برای یک Input میخوایم Label تعریف کنیم، باید اول یه id برای Input مون مشخص کنیم بعدش همون id رو داخل تگ Label قرار بدیم تا بهمدیگه وصل بشن.
هر اینپوتی میتونه Label داشته باشه و از این بابت هیچ محدودیتی وجود ندارد.
|
1 2 3 4 5 6 7 8 9 |
<body> <form action="files/get_data.php" method="POST"> <label for="UserName">نام شما : </label> <input type="text" name="myname" id="UserName"> <input type="submit" value="ارسال"> </form> </body> |
Free-Learn
تگ <select> در فرم ها
با استفاده از این تگ در فرم ها ما میتونیم یک لیست بازشو رو ایجاد نماییم، و وقتی صفحه میاد بالا بصورت پیش فرض اولین گزینه موجود در لیست، خودش بصورت خودکار انتخاب میشه.
|
1 2 3 4 5 6 7 |
<select name="tarafdari"> <option value="Esteghlal">استقلال</option> <option value="Persepolis">پرسپولیس</option> <option value="Sepahan">سپاهان</option> <option value="Tractor">تراکتور</option> <option value="other">دیگر تیم ها</option> </select> |
در صورتی که بخواهیم یک گزینه را به دلخواه خودمان از لیست بصورت پیش فرض انتخاب نماییم باید از مقدار selected درون گزینه ی مورد نظرمان استفاده نماییم.
|
1 2 3 4 5 6 7 |
<select name="tarafdari"> <option value="Esteghlal">استقلال</option> <option value="Persepolis">پرسپولیس</option> <option value="Sepahan" selected>سپاهان</option> <option value="Tractor">تراکتور</option> <option value="other">دیگر تیم ها</option> </select> |
Free-Learn
تگ <textarea> در فرم ها
تکست اِریا یا ناحیه متنی یا textarea یکی دیگر از تگ های مورد استفاده در فرم ها و بطور کلی در HTML می باشد که با استفاده از اون میتونیم یک باکس متنی با قابلیت دریافت چندین خط متن را ایجاد نماییم.
بیشترین استفاده از این تگ، معمولا در باکس نظرات یا باکس دریافت متن پیغام در فرم تماس با ما می باشد.
|
1 2 3 4 5 |
<form action="files/get_data3.php" method="POST"> <textarea name="message" placeholder="نظرت در مورد فری لرن"></textarea> <br> <input type="submit" value="ارسال"> </form> |
Free-Learn
بطور کلی میشه گفت ما دو نمونه دکمه میتونیم داشته باشیم، یک نمونه دکمه هست که از نوع عناصر ورودی ( Input ) است و در درون فرم ها قرار میگیرند و با کلیک بروی آنها اطلاعات وارد شده در فرم به سرور ارسال می شود.
یک نمونه ی دیگر از دکمه ها هستند که از نوع عناصر button هستند و میتونن خارج از فرم ها مورد استفاده قرار بگیرند، مثلا میتونیم کاری کنیم که وقتی روی یه دکمه کلیک شد یه پیغام نشون بده یا …
مثال شماره ۱ : دکمه button از نوع ارسال فرم ( یعنی از نوع submit )
|
1 2 3 4 |
<form action="files/get_data.php" method="POST"> <input type="text" name="myname"> <button type="submit">ارسال</button> </form> |
مثال شماره ۲ : دکمه button از نوع قابل کلیک بودن ( یعنی از نوع button )
|
1 2 3 4 5 |
<body> <button type="button" onclick="alert('سلام خوبی؟')">اینجا کلیک کن</button> </body> |
Free-Learn
تگ <fieldset> و <legend> در فرم ها
فیلدسِت تگی است که ما با استفاده از اون میتونیم عناصر موجود در فرم هارو گروه بندی کنیم، بفرض مثال میخوایم یکسری اطلاعات شخصی و یکسری اطلاعات تحصیلی و .. رو از کاربر دریافت کنیم، پس میتونیم از این تگ استفاده کنیم.
ما با استفاده از تگ legend درون عنصر fieldset میتوانیم یک کپشن یا یک عنوان را برای گروه مون مشخص نماییم.
|
1 2 3 4 5 |
<fieldset> <legend>اطلاعات شخصی</legend> نام: <input type="text" name="Name"><br> فامیلی: <input type="text" name="Family"><br><br> </fieldset> |
Free-Learn
تگ <datalist> در فرم ها
با استفاده از تگ datalist میتوانیم یک لیست با گزینه های از پیش تعریف شده را ایجاد نماییم که کاربر بتواند از بین گزینه های موجود در لیست به دلخواه یک گزینه را انتخاب نماید.
در مرحله اول باید با استفاده از تگ Input و صفت list یک لیست را تعریف نماییم و سپس در مرحله ی دوم باید از تگ datalist و صفت id استفاده کرد و سپس نامی که در صفت list در مرحله ی اول ایجاد کردیم را در صفت id تگ datalist قرار دهیم.
وقتی دوبار بروی لیست کلیک بشه، موارد لیست شده نمایش داده میشوند
|
1 2 3 4 5 6 7 8 |
<input list="browsers" name="browser"> <datalist id="browsers"> <option value="Microsoft Edge"> <option value="Mozilla Firefox"> <option value="Google Chrome"> <option value="Opera"> <option value="Safari"> </datalist> |
Free-Learn
تگ <output> در فرم ها
این تگ یکی از تگ های محاسبه گر در فرم ها می باشد، یعنی همانطورم که از اسمش پیداست این عنصر میتواند نتیجه ی یک یا چند عمل را در خروجی به نمایش در بیاورد، و بطور کلی ما برای ایجاد خروجی مان از این عنصر استفاده مینماییم.
لطفا برای مشاهده خروجی مثال زیر بروی دکمه امتحان کنید کلیک نمایید و سپس در خروجی، ۲ عدد را به دلخواه انتخاب نمایید تا حاصل جمع آن به شما نمایش داده شود.
|
1 2 3 4 5 6 7 8 9 |
<form oninput="OutPut.value = parseInt( number1.value ) + parseInt( number2.value );"> <input type="number" name="number1" value="5"> <br> + <br> <input type="number" name="number2" value="5"> <br> = <br> <output name="OutPut" for="number1 number2"></output> </form> |
