051-38846027 021-44767960
09120248112 09367988112

معرفی کامل 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  استفاده میشود که برچسب مورد نظر شما را به فیلد ورودی مربوطه انتساب میدهد.

اشتراک کذاری در :
به این مطلب امتیاز دهید :
1 امتیاز2 امتیاز3 امتیاز4 امتیاز5 امتیاز (1 امتیاز: 1,00 از 5)
Loading...

فرم ها در HTML

فراخوانی اسکریپت ها در html

سوالات متداول

توس وب تضمین میکند مطابق با مفاد قرارداد رسمی که درابتدا, متناسب با نیاز مشتری تنظیم شده عمل نماید (تحویل به موقع – پشتیبانی پس از تحویل – رعایت استاندارد های جهانی)

پشتیبانی دارای محدودیت زمانی نبوده و ما پاسخگوی تمامی مشکلات و خطاهای احتمالی سایت شما هستیم.

طراحی اختصاصی توسط تیم حرفه ای و بدون استفاده از قالب های آماده و با رعایت استانداردهای جهانی وب

تیم توس وب تلاش کرده تا تمامی موارد امنیتی که مربوط به کدنویسی قالب ها بوده را رعایت کند.

بله – پس از طراحی فایل های آموزشی به صورت متنی یا ویدئویی در اختیار شما قرار می گیرد.

خیر، کارکردن با سایت بسیار آسان است، زیرا پنل تنظیمات و مدیریت سایت کاملاً فارسی بوده و آموزش کامل آن در اختیار مشتری قرار می گیرد.

توس وب از بروزترین تکنولوژی های مورد استفاده در وب از قبیل PHP,HTML5,CSS3,Java Script,Bootstrap استفاده می کند.

بله، قالب هایی که توسط توس وب طراحی می شوند منطبق با آخرین استانداردهای جهانی وب ( استاندارد کنسرسیوم جهانی وب = html css
استاندارد ECMA = استاندارد کدهای جاوا اسکریپت ) می باشد.

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

پاسخ این سوال را می توان در چند جمله اینگونه بیان کرد :

پشتیبانی حرفه ای – طراحی متناسب با سلیقه و نیازهای مشتری – حجم کم کدنویسی پائین و سرعت لود بالا

با توجه به نوع وبسایت و امکانات آن بین ۲۵ تا ۶۰ روز متغیر می باشد.

چرا به توس وب اعتماد کنیم ؟

توس وب یک سایت رسمی می باشد و همچنین دارای گواهی نامه های معتبر ( نماد اعتماد الکترونیک از مرکز توسعه و تجارت الکترونیک , نماد ساماندهی از وزارت ارشاد و درگاه پرداخت ایمن بانک ملت ) می باشد

ساماندهی
خانواده توس وب
خوشحالیم که افتخار همراهی شما عزیران را داریم