سینا صالحی فرد ۱۷ اردیبهشت ۱۳۹۳ ۲ 7039 بازدید
فیلم آموزشی معرفی textarea, radio, checkbox, select-option در فرم های html

همانطور که در فیلم آموزش کار با فرم ها در html توضیح دادیم، خیلی اوقات در سایت ها نیاز داریم که برای دریافت اطلاعات کاربران مانند نظرسنجی و ثبت نام، فرم ایجاد کنیم. در این فیلم آموزشی html، بعضی از عناصر تگ <form> را که کاربرد بیشتری دارند، به شما معرفی می کنیم.

آنچه در این فیلم آموزشی خواهید آموخت :

  • ایجاد لیست های کشویی (drop-down) برای انتخاب یک یا چند گزینه موجود از لیست و نحوه ی گروه بندی optionها
  • آموزش استفاده از دکمه های رادیویی (radio Buttons) برای انتخاب یک گزینه از میان چندین گزینه
  • آموش نحوه ایجاد ناحیه متنی
  • آشنایی با انواع type عنصر input مانند ckeckbox, radio, submit, reset, text
  • بیان کاربرد صفت های value, name, readonly … در عناصر تگ فرم
  • ایجاد یک مثال کاربردی برای فرم استخدام

فیلم آموزشی معرفی textarea, radio, checkbox, select-option در فرم های html

برای دانلود فیلم آموزشی و اسنیپت های آموزش مربوطه از لینک های زیر استفاده کنید :

دسترسی به این بخش مخصوص اعضاست. شما می توانید به رایگان عضو شوید و به این بخش دسترسی داشته باشید. ورود / عضویت

دسترسی سریع :

متن فیلم آموزشی معرفی textarea, radio, checkbox, select-option در فرم های html

 آموزش فرم ها

در این فیلم آموزشی با ساخت یک فرم ثبت نام، بقیه موارد آموزشی مربوط به فرم ها در html را به شما می آموزیم :

می خواهیم ابتدا نام کامل و ایمیل را از کاربر بگیریم.


<form method="post" action="http://onliner.ir/form-post.php">
<p>
<label>full name:</label><br />
<input type="text" name="full-name" />
</p>
<p>
<label>Email:</label><br />
<input type="text" name="email" />    
</p>
<p>
<input type="reset" value="clear all fields" />
<input type="submit" value="send" />
</p>
</form>

 

f21

در ویدئوی قبلی آموزش فرم ها، با این تگ ها آشنا شده اید. فقط ما برای نظم بیشتر از تگ پاراگراف به جای تگ br استفاده کردیم.

برای منظم تر شدن کد های خود هم می توانید ‍زمانی که در داخل یک تگ، تگ دیگری میخواهید ایجاد کنید از کلید tab در صفحه کلید خود استفاده کنید تا فاصله ای بین آنها ایجاد شود.

f22

می خواهیم یک لیست کشویی (drop-down) ایجاد کنیم که کاربر بتواند در فرم ثبت نام، مهارت اصلی خود را انتخاب کند. برای این کار از تگ select استفاده می کنیم و درون آن با تگ option آیتم های مورد نظرمان را ایجاد می کنیم:


<form method="post" action="http://onliner.ir/form-post.php">
<p>
<label>full name:</label><br />
<input type="text" name="full-name" />
</p>
<p>
<label>Email:</label><br />
<input type="text" name="email" />
</p>
<p>
<label>Main skill</label>
<select name="skill">
<option >HTML</option>
<option >CSS</option>
<option >JQUERY</option>
<option>pascal</option>
<option>php</option>
<option>java</option>
<option>photoshop</option>
<option>illustrator</option>
</select>
</p>
<p>
<input type="reset" value="clear all fields" />
<input type="submit" value="send" />
</p>
</form>

 

f23

نکته : برای تگ Select حتما صفت name بدهید تا با مشکل مواجه نشوید.

اکنون لیست کشویی ما آماده است اما مشکلی که وجود دارد این است که در این حالت منو بهم ریخته است و ممکن است کاربر سردرگم شود. پس آیتم ها (optin) را گروه بندی می کنیم . ما می توانیم با تگ باز شونده و بسته شونده optgroup این کار را انجام دهیم:


<optgroup ></ optgroup >

 

برای ایجاد نام برای هر گروه میتوان از صفت label برای تگ optgroup استفاده کرد.

 


 <form method="post" action="http://onliner.ir/form-post.php">
<p>
<label>full name:</label><br />
<input type="text" name="full-name" />
</p>
<p>
<label>Email:</label><br />
<input type="text" name="email" />
</p>
<p>
<label>Main skill</label>
<select name="skill">
<optgroup label="coding (web)">
<option >HTML</option>
<option >CSS</option>
<option >JQUERY</option>
</optgroup>
<optgroup label="programming">
<option>pascal</option>
<option>php</option>
<option>java</option>
</optgroup>
<optgroup label="Graphic">
<option>photoshop</option>
<option>illustrator</option>
</optgroup>
</select>
</p>
  <p>
<input type="reset" value="clear all fields" />
<input type="submit" value="send" />
</p>
</form>

 

اکنون لیست کشویی ما بسیار منظم تر و زیباتر به نظر می رسد. برای تست فرم، اطلاعاتی را در آن مینویسیم تا ببینیم فرم ما به درستی کار می کند یا نه؟

f34

1343

فرم به درستی کار می کند.

اگر بخواهیم به جای محتوا، چیز دیگری در سرور نمایش داده شود، از صفت value استفاده می کنیم. به عنوان مثال بجای کلمه css در سرورعدد ۲ ارسال شود یا به جای html عدد ۱ ارسال شود. برای اینکار در option از صفت value استفاده می کنیم. می توانیم هر متنی را که می خواهیم به سرور ارسال شود را بنویسیم.


<form method="post" action="http://onliner.ir/form-post.php">

<p>

<label>full name:</label><br />

<input type="text" name="full-name" />

</p>

<p>

<label>Email:</label><br />

<input type="text" name="email" />

</p>

<p>

<label>Main skill</label>

<select name="skill">

<optgroup label="coding (web)">

<option value="1">HTML</option>

<option value="2">CSS</option>

<option value="3">JQUERY</option>

</optgroup>

<optgroup label="programming">

<option>pascal</option>

<option>php</option>

<option>java</option>

</optgroup>

<optgroup label="Graphic">

<option>photoshop</option>

<option>illustrator</option>

</optgroup>

</select>

</p>

<p>

<input type="reset" value="clear all fields" />

<input type="submit" value="send" />

</p>

</form>

 

f25

f26

اکنون به جای JQUERY  و html ,css عدد آن به سرور ارسال می شود.

Radio

حال می خواهیم یک ساختار انتخابی بسازیم که کاربر شهر خود را انتخاب کند. ما به وسیله تگ input و صفت type=”radio” این ساختار را ایجاد می کنیم.


<form method="post" action="http://onliner.ir/form-post.php">

<p>

<label>full name:</label><br />

<input type="text" name="full-name" />

</p>

<p>

<label>Email:</label><br />

<input type="text" name="email" />

</p>

<p>

<label>Main skill</label>

<select name="skill">

<optgroup label="coding (web)">

<option value="1">HTML</option>

<option value="2">CSS</option>

<option value="3">JQUERY</option>

</optgroup>

<optgroup label="programming">

<option>pascal</option>

<option>php</option>

<option>java</option>

</optgroup>

<optgroup label="Graphic">

<option>photoshop</option>

<option>illustrator</option>

</optgroup>

</select>

</p>

<p>

<label>city:</label><br />

<label>Mashhad</label>

<input type="radio" name="city" value="mashhad" />

<label>Tehran</label>

<input type="radio" name="city" value="Tehran" />

<label>Shiraz</label>

<input type="radio" name="city" value="Shiraz" />

</p>

<p>

<input type="reset" value="clear all fields" />

<input type="submit" value="send" />

</p>

</form>

 

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

اگر در حالت عادی مقداری برای صفت value در radio ها تعریف نکرده باشیم، مقدار on را در سرور نشان می دهد، پس باید برای هر radio یک value با اسم مشخص انتخاب کنیم تا بفهمیم که کاربر کدام را انتخاب کرده است.

f27

 

fff

 

Textarea

با تگ textarea می توان یک فصای متنی برای کاربر ایجاد کرد تا هر متنی می خواهد را در آن تایپ کند به عنوان مثال درباره خودش، اطلاعات اضافی و…

<textarea></textarea>

با نوشتنی متنی در بین تگ textarea می توان متن پیشفرض برای کاربر ایجاد کرد.


<textarea>متن پیشفرض</textarea>

 

صفات مهم در فرم

  • برای اینکه هرقسمت از فرم فقط قابلیت خواندن داشته باشد، می توانیم از صفت readonly استفاده کنیم. این صفت را به دو صورت می توان به کار برد :

<input readonly />

<input readonly=”readonly”/>

 

  • برای تعریف عرض و ارتفاع ثابت برای تگ textarea از صفات cols و rows میتوان استفاده کرد :

با صفت cols می توانیم ستون های پیشفرض آن را مشخص کنیم.

با صفت rows می توانیم سطرهای پیشفرض آن را مشخص کنیم.

دقت کنید که اکثر مرورگرها امکان تغییر سایز تگ textarea را به شما میدهند ولی با این مقادیر می توان اندازه

پیش فرض به این تگ داد.

 

<form method="post" action="http://onliner.ir/form-post.php">

<p>

<label>full name:</label><br />

<input type="text" name="full-name" />

</p>

<p>

<label>Email:</label><br />

<input type="text" name="email" />

</p>

<p>

<label>Main skill</label>

<select name="skill">

<optgroup label="coding (web)">

<option value="1">HTML</option>

<option value="2">CSS</option>

<option value="3">JQUERY</option>

</optgroup>

<optgroup label="programming">

<option>pascal</option>

<option>php</option>

<option>java</option>

</optgroup>

<optgroup label="Graphic">

<option>photoshop</option>

<option>illustrator</option>

</optgroup>

</select>

</p>

<p>

<label>city:</label><br />

<label>Mashhad</label>

<input type="radio" name="city" value="mashhad" />

<label>Tehran</label>

<input type="radio" name="city" value="Tehran" />

<label>Shiraz</label>

<input type="radio" name="city" value="Shiraz" />

</p>

<p>

<label>custom Massage :</label><br />

<textarea name="custom-msg" rows="8" cols="30">enter your massage :</textarea>

</p>

<p>

<input type="reset" value="clear all fields" />

<input type="submit" value="send" />

</p>

</form>

 

f28

Checkbox

ما می توانیم به وسیله چک باکس، باکس هایی ایجاد کنیم که کاربر بتواند آن ها را تیک بزند، مانند قبول کردن قوانین سایت و….

برای استفاده از Check box باید در تگ input از type=”checkbox” استفاده کنید.

دقت کنید که باید حتما از name استفاده کنید تا مقدار این تگ به سرور ارسال شود. به وسیله value هم می توانید مثل آموزش قبلی به جای on هر چیز دیگر را به سرور ارسال کنید.

برای اینکه checkbox بصورت پیش فرض تیک خورده باشد، می توانید از صفت checked=”checked” استفاده کنید.


<form method="post" action="http://onliner.ir/form-post.php">

<p>

<label>full name:</label><br />

<input type="text" name="full-name" />

</p>

<p>

<label>Email:</label><br />

<input type="text" name="email" />

</p>

<p>

<label>Main skill</label>

<select name="skill">

<optgroup label="coding (web)">

<option value="1">HTML</option>

<option value="2">CSS</option>

<option value="3">JQUERY</option>

</optgroup>

<optgroup label="programming">

<option>pascal</option>

<option>php</option>

<option>java</option>

</optgroup>

<optgroup label="Graphic">

<option>photoshop</option>

<option>illustrator</option>

</optgroup>

</select>

</p>

<p>

<label>city:</label><br />

<label>Mashhad</label>

<input type="radio" name="city" value="mashhad" />

<label>Tehran</label>

<input type="radio" name="city" value="Tehran" />

<label>Shiraz</label>

<input type="radio" name="city" value="Shiraz" />

</p>

<p>

<label>custom Massage :</label><br />

<textarea name="custom-msg" rows="8" cols="30">enter your massage :</textarea>

</p>

<p>

<label>I have read term of service</label>

<input type="checkbox" name="tos" value="true" checked="checked" />

</p>

<p>

<input type="reset" value="clear all fields" />

<input type="submit" value="send" />

</p>

</form>

f29

f30

دسترسی سریع :

نظرات کاربران (۲)