سینا صالحی فرد 17 اردیبهشت 1393 2 5964 بازدید آموزش HTML
فیلم آموزشی معرفی 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 در سرورعدد 2 ارسال شود يا به جاي html عدد 1 ارسال شود. براي اينكار در 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

دسترسی سریع :

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