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

در مطلب قبلی آموزش فرم ها در html طریقه ی ایجاد فرم را آموزش دیدید. اما در آن مطلب فقط عامل ورودی از طریق input پرداختیم. در ادامه با عامل های بیشتر نظیر Checkbox, radio, select-option, textarea و … آشنا می شوید.

checkbox

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

<html>

<head>

</head>

<body>

<form action="#" method="post">
دریافت خبر نامه :<input type="checkbox" name="maillist" checked />
<input type="submit" VALUE="submit" />
</form>

</body>

</html>

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

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

radio-box

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

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

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

select-option

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

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

textarea

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

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

<form>
  <textarea rows="4" cols="50">
    نظر خود را اینجا وارد نمایید.
  </textarea>
</form>

input- password

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

<form>
  رمز ورود: <input type="password" name="pwd" />
</form>

input-file

این فیلد ورودی به طراح وب سایت این امکان را میدهد که بتواند از کاربر فایلی را دریافت کند. برای این کار میتوانید از تکه کد زیر بعنوان یک مثال استفاده نمایید.

<form>لطفا فایل مورد نظر خود را برای آپلود انتخاب نمایید:
 <input type="file" name="datafile" />
</form>

hidden fields

این نوع فیلد زمانی کاربرد دارد که طراح قصد نگهداری و یا ارسال و انتقال اطلاعات را دارد ولی نمی خواهد کاربران محتوای آن را مشاهده کنند.
میتوانید از مثال زیر استفاده کنید:

<form>
  <input id="orderNumber" type="hidden" name="orderNumber" value="0024" />
</form>

button

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

مثال زیر نحوه درج یک دکمه روی صفحه وب را نشان میدهد:

<button onclick="alert('برای تست!')" type="button">Click Me!</button>

نکته : برای استفاده از تگ button صرفا نیازمند تگ form نیستید. به همین دلیل اگر شما در هر جای سایت خود بخواهید دکمه قرار دهید، می توانید از تگ button استفاده کنید.

image button

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

<input type="text" value="نام خود را وارد کنید!" size="25" />

<input type="image" name="image" src="rainbow.gif" />

label

تگی نیز در html وجود دارد که وظیفه درج یک برچسب را در صفحه وب شما را دارد. به مثال زیر توجه کنید:

<form action="#">
 <label for="male">مرد</label>
  <input id="male" type="radio" name="sex" value="male" />

 <label for="female">زن</label>
  <input id="female" type="radio" name="sex" value="female" />

 <input type="submit" value="Submit" />
</form>

صفتی به نام for نیز برای تگ label استفاده میشود که برچسب مورد نظر شما را به فیلد ورودی مربوطه انتساب میدهد.

به این مطلب امتیاز دهید :