آموزش HTML گام به گام قسمت 19 : کنترل ها و اجزای فرم

اجزای کنترلی معمولا بدون احتیاج به تگ form ساخته می شوند. برای این اجزا کافی است که تگ ها و المنت های آن را استفاده کنید.

لیست Drop-Down:

از این نوع لیست ها برای انتخاب بین چند آیتم به صورت کشویی استفاده می شود. تگ اصلی این لیست select می باشد، مقادیری که می تواند انتخاب شوند را می توانید با تگ option وارد کنید. تگ option زیر مجموعه تگ select است و به تنهایی هیچ کاربردی ندارد.

<select name="f">
<option name="a" value="arastoo">Arastoo</option>
<option name="a" value="Sina">Mohammad</option>
<option name="a" value="Sina">Hosain</option>
<option name="a" value="Sina" selected>Sina</option>
</select>

به صورت پیشفرض اولین آیتم به عنوان آیتم انتخابی قرار می گیرد، اما اگر می خواهید این مقدار را تغییر دهید می توانید از خاصیت selected استفاده کنید:

<option name="a" value="Sina">Mohammad</option>
<option name="a" value="Sina" selected>Hosain</option>

ورودی متن چند خطی:

در قسمت قبل با کادر ورود متن آشنا شدید، این کادر تنها قادر به دریافت متن از یک خط می باشد اما اگر بخواهیم یک کادر متنی به صورت چند خطی بسازیم باید از تگ textarea استفاده کنید. توسط این تگ می توانید تعداد ردیف ها و ستون های متنی را تنظیم کنید، همچنین این امکان به صورت ظاهری به کاربر داده می شود.

<textarea name="message" rows="15" cols="50">

متنی که به صورت پیش فرض وارد می شود.

</textarea>

در دستور بالا، تعداد 15 ردیف و 50 ستون به صورت پیش فرض قرار گرفته است. متنی که داخل تگ آغازین و پایانی وجود دارد به صورت پیش فرض درون کادر متنی قرار می گیرد. امکان تغییر متن و اندازه کادر به کاربر داده شده است.

دکمه:

یک دکمه یا button از اجزای بسیار مهم و کلیدی در هر فرمی است. تمام اطلاعاتی که از کاربر دریافت می شود توسط یک دکمه کنترل می شوند. برای ساخت دکمه می توانید از طریق تگ button و خاصیت type اقدام نمایید.

<button type="button" name="btn" onclick="alert('ITPRO');">Click Me</button>

یکی از ویژگی های مهم این تگ خاصیت onclick می باشد، با این خاصیت می توان تعیین کرد که پس از فشردن کلید چه اتفاقی روی دهد. در مثال بالا یک پیغام توسط جاوااسکریپت پس از فشردن کلیک نمایش داده می شود.

اجزای فرم در HTML5:

باید اعتراف کرد که نسخه جدید HTML انقلابی جدید در صنعت وب و حتی اپلیکیشن های موبایل درست کرد. در بحث فرم HTML5 با 3 نوع المنت جدید همراه است.

• <datalist>

• <keygen>

• <output>

تگ datalist:

به احتمال زیاد وقتی در گوگل سرچ کرده اید وقتی یکی از حروف کلمه ای را بنویسید لیستی از کلمات پیشنهادی برای شما به نمایش در می آید. این کار توسط تگ datalist انجام پذیر است. اصول کاری این تگ تعریف یک id توسط تگ datalist و نسبت دادن آن به تگ input و خاصیت list است. بعد از آن توسط تگ option مقادیر مورد نظر را وارد نمایید.

<form>
	<input list="member">
	<datalist id="member">
		<option value="Mohammd">
		<option value="Hosain">
		<option value="Arastoo">
	</datalist>
</form>

نکته: در تگ هایی که حاوی خاصیت value یا مقدار است ممکن است که مقدار نمایش داده نشود مثلا در لیست های Drop-Down مقدار نمایشی بین تگ های <option> قرار می گیرد، اما برای آنکه در هسته فرم این مقدار جای بگیرد باید از خاصیت value استفاده شود. همچنین بانک های اطلاعاتی از این طریق با فرم ارتباط برقرار می کنند.

تگ Keygen:

یکی از مهمترین موضوعات فایلهای تحت وب امنیت می باشد، فرم ها نقش بسیار کلیدی در مباحث امنیتی وب دارند. Keygen یک کلید تعمیری برای فرمهاست. Keygen دارای دو مقدار private , public می باشد.

Public: اطلاعات را به صورت سرور ذخیره می کند، اطلاعات به سمت یک سرور خاص ارسال می شوند.

Private: اطلاعات را به صورت محلی ذخیره می کند.

تگ output:

زمانی که می خواهید روی مقادیر مختلفی عملیاتی را انجام دهید می توانید از این روش استفاده کنید، البته با وجود تگ های script و کنترل زبان های سمت سرور این کار خیلی منطقی به نظر نمی رسد.

<form action="action_page.asp"
  oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  0
  <input type="range"  id="a" name="a" value="50">
  100 +
  <input type="number" id="b" name="b" value="50">
  =
  <output name="x" for="a b"></output>
  <br><br>
  <input type="submit">
</form>

خاصیت oninput متعلق به تگ form شیوه انجام عملیات را دریافت می کند، اینکار تاحدی شبیه تعریف تابع است. بعد از آن مقادیری که توسط input جمع آوری شدند توسط تگ output نمایش داده می شود.

نویسنده : ارسطو عباسی

منبع : جزیره طراحی و توسعه وب وب سایت توسینسو

هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

#آموزش_قدم_به_قدم_html #کنترل_های_html #آموزش_تگ_ها_در_html #آموزش_html #فرم_های_html5 #آموزش_گام_به_گام_html #استفاده_از_تگ_های_html
عنوان
1 آموزش HTML گام به گام قسمت 1 : معرفی و آشنایی کلی رایگان
2 آموزش HTML گام به گام قسمت 2 : دستورات مقدماتی و معرفی ساختار رایگان
3 آموزش HTML گام به گام قسمت 3 : صفحات یا Attributes و نکات مربوطه رایگان
4 آموزش HTML گام به گام قسمت 4 : عنوان بندی و تگ های جدید رایگان
5 آموزش HTML گام به گام قسمت 5 : استایل و فرمت متن ها رایگان
6 آموزش HTML گام به گام قسمت 6 : نقل قول و درج توضیحات رایگان
7 آموزش HTML گام به گام قسمت 7 : استفاده از رنگ رایگان
8 آموزش HTML گام به گام قسمت 8 : CSS چیست و مقدمات آن رایگان
9 آموزش HTML گام به گام قسمت 9 : لینک ها رایگان
10 آموزش HTML گام به گام قسمت 10 : تصاویر رایگان
11 آموزش HTML گام به گام قسمت 11 : جداول رایگان
12 آموزش HTML گام به گام قسمت 12 : لیست ها رایگان
13 آموزش HTML گام به گام قسمت 13 : بلاک و کلاس ها رایگان
14 آموزش HTML گام به گام قسمت 14 : قاب بندی رایگان
15 آموزش HTML گام به گام قسمت 15 : تگ عنوان یا Head رایگان
16 آموزش HTML گام به گام قسمت 16 : چند قانون ساده رایگان
17 آموزش HTML گام به گام قسمت 18 : فرم ها رایگان
18 آموزش HTML گام به گام قسمت 19 : کنترل ها و اجزای فرم رایگان
19 آموزش HTML گام به گام قسمت 20 : انواع ورودی رایگان
20 آموزش HTML گام به گام قسمت 21 : خاصیت های تگ input رایگان
21 آموزش HTML گام به گام قسمت 22 : چندرسانه/ویدیو و صدا رایگان
22 آموزش HTML گام به گام قسمت 23 : مدیریت بهتر لایه های وب رایگان
زمان و قیمت کل 0″ 0
3 نظر

این نظر توسط UNITY در تاریخ چهارشنبه, 27 مرداد 1395 حذف شده است.

دلیل: این پست حاوی محتوای تبلیغاتی می باشد ، در صورت تکرار نام کاربری مورد نظر مسدود خواهد شد

sinaasadollah

سلام ببخشید برای من یک سئولی که پیش اومده اینکه در کد زیر:

<select name="f">
<option name="a" value="arastoo">Arastoo</option>
<option name="a" value="Sina">Mohammad</option>
<option name="a" value="Sina">Hosain</option>
<option name="a" value="Sina" selected>Sina</option>
</select>

چرای و برای چی name اولی شده f و برای بقیه شده a، منظور از این حروف چیست و برای چی اینجا استفاده شدن؟

سئوال دومم اینکه برای چی مقدار پیش فرض value همه sina گذاشته شده است؟ و آیا میشه تغییر نمود و یا اصلا ننوشت؟

با تشکر فراوان

ارسطو  عباسی

سوال اولتون: این صرفا یک نام هستش می تونه هر نام دیگه ای باشه.

سوال دومتون: می خواستم تفاوت حالت نمایشی و مقداردهی واقعی رو براتون بنویسم. ببینید برای یک بانک اطلاعاتی مقداردهی آن sina هستش اما در حالت نمایشی mohammad , hosain و... است.

نظر شما
برای ارسال نظر باید وارد شوید.
از سرتاسر توسینسو
تنظیمات حریم خصوصی
تائید صرفنظر
×

تو می تونی بهترین نتیجه رو تضمینی با بهترین های ایران بدست بیاری ، پس مقایسه کن و بعد خرید کن : فقط توی جشنواره تابستانه می تونی امروز ارزونتر از فردا خرید کنی ....