معرفی کامل Checkbox, radio, select-option, textarea

در سلسله آموزشهای طراحی سایت آنلاینر به فرم ها در html پرداختیم.

در این مقاله قصد بررسی معرفی کامل Checkbox, radio, select-option, textarea را داریم.

checkbox:

این نوع ورودی در فرم باعث ایجاد چک باکس میشود. مثال زیر نمونه کاملی از ایجاد یک چک باکس است.

[html]

<form action="#" method="post">
دریافت خبر نامه :<INPUT TYPE=CHECKBOX NAME="maillist" checked>
<INPUT TYPE=SUBMIT VALUE="submit">
</form>

[/html]

صفتی که در ابزار ورودی چک باکس مورد توجه است صفت checkbox است، این صفت باعث انتخاب و یا عدم انتخاب چک باکس خواهد شد.
بر خلاف صفت هایی که تا کنون استفاده میکردید این صفت بدون مقدار بوده و فقط کافی است متن checked را به تگ شروع کننده چک باکس اضافه نمایید.

radio-box :

دراین بین ممکن است بخواهید چند گزینه در فرم تان ایجاد کنید که کابر از بین آنها فقط یکی را انتخاب کند،در این زمان بهترین گزینه دکمه های رادیویی خواهند بود.
طریقه ایجاد چند دکمه رادیویی در کد های زیر آمده است.

[html]
<form>
<input type="radio" name="sex" value="male">مرد<br>
<input type="radio" name="sex" value="female">زن
</form>
[/html]

نکته قابل توجه این است که مقدار موجود در صفت value همان مقداریست که به صفحه مقصد ارسال خواهد شد.

select-option:

تگ ورودی دیگری نیز وجود دارد که باعث ایجاد یک لیست کشویی در صفحه وب شما میشود. معمولا این گزینه میتواند جایگزین مناسبی برای دکمه های رادیویی باشد. مزیت این جایگزینی صرفه جویی در فضای صفحه وب شما است. به مثال زیر دقت کنید.

[html]
<form>
<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
</form>
[/html]

textarea:

تگ ورودی دیگری نیز در html وجود دارد که به کاربر امکان میدهد متن بلند تری نسبت به سایرمتون و حتی متن های چند خطی را نیز وارد کند. معمولا این تگ برای گرفتن توضیحات و اطلاعاتی که طراح وب سایت از میزان و اندازه متن آن بی خبر است کاربرد دارد.

به کد زیر توجه کنید:

[html]
<form>
<select>
<textarea rows="4" cols="50">
این یک متن تست میباشد
</textarea>
</select>
</form>
[/html]

و در نهایت خروجی تکه کد زیر به صورت زیر خواهد شد.

این یک متن تست میباشد

در آموزش بعد به  input- password, input-file, hidden fields , button, image button, label tag میپردازیم.

با آنلاینر همراه شوید …