آموزش ایجاد فرم
در این جلسه ی آموزشی میخوام فرم و اجزای فرم رو براتون توضیح بدم . اصلا برای چه کارهایی از فرم استفاده میکنیم؟
برای ارسال مطالب ، ثبت نام ، ورود به سایت ، اپلود فایل ها ، ارسال نظرات ، پرداخت ها و … از فرم استفاده می کنیم . عنصر اصلی فرم <form> هست که اجزای فرم درون این عنصر قرار میگیرند .
ساختار کلی :
<form action="" method="" enctype="">
<input type="text">
<input type="submit" value="ارسال">
</form>
خوب حالا تک تک element های فرم و براتون توضیح میدم و بعد یک مثال براتون میزنم :
Input :چند نوع input در html4 داریم که به شرح زیر هست :
• Button :برای ایجاد دکمه
• Checkbox :برای ایجاد گزینه هایی که حق انتخاب چند گزینه رو داریم .
• File :برای ایجاد browse آپلود فایل .
Hidden :برای فیلدهایی که پنهان هستند و میخوایم مقادیری رو درون این فیلدها نگه داریم .
Password :برای فیلدهایی که قراره رمز عبور وارد کنیم .
Radio :برای ایجاد گزینه هایی که حق انتخاب فقط یک گزینه رو داریم .
Reset :برای پاک کردن مقادیر ورودی درون فرم از این دکمه استفاده می کنیم .
Submit :برای ایجاد دکمه ثبت اطلاعات فرم استفاده میشه . زمانی که شما دکمه submit رو فشار میدید ، اطلاعات ارسال و صفحه رفرش میشه.
Text :برای فیلدهای متنی
Textarea :برای توضیحات و متون طولانی از این فیلد استفاده می کنیم .
Button :این عنصر شامل سه نوع هست : button , submit , reset
زمانی که از نوع button باشه دیگه خاصیت submit رو نداره و شما زمانی از این دکمه استفاده می کنید که مثلا از طریق ایجکس و بدون رفرش صفحه اطلاعات رو ثبت کنید .
Label :برای درج نام برای فیلدها از لیبل استفاده می کنیم .
Fieldset :برای گروه بندی عناصر مرتبط از فیلدست استفاده می کنیم .
Legend :عنصری هست که برای نام گذاری گروه هایی که توسط fieldset ایجاد کردید ، استفاده میشه .
Select :با استفاده از این عنصر شما میتونید ، منوی کشویی ایجاد کنید . این عنصر شامل عنصر های option و optgroup هست که با استفاده از عنصر option گزینه های درون منوی کشویی رو تعریف می کنید و با استفاده از optgroup گزینه های منوی کشویی رو گروه بندی می کنید .
حالا که با اجزای فرم آشنا شدید ، بیاید یک فرم عضویت کامل ایجاد کنیم که شامل قابلیت زیر باشه :
نام و نام خانوادگی ، ثبت تصویر ، تعیین جنسیت ، ورزش های مورد علاقه ، نحوه آشنایی با سایت ، نام کاربری ، رمز عبور
خوب برای نام و نام خانوادگی و نام کاربری از input نوع text ، برای ثبت تصویر از file ، برای جنسیت از radio ، برای ورزش های مورد علاقه از checkbox ، برای نحوه آشنایی با سایت از select و برای پسورد از input نوع password استفاده می کنیم .
به کد زیر توجه کنید :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>form</title>
<style type="text/css">
body{direction: rtl; text-align: right; font: 12px/35px tahoma;}
form{width: 450px;}
label{display: inline-block; width: 150px;}
input[type="submit"]{font: 12px/30px tahoma; margin: 10px 0;}
</style>
</head>
<body>
<form action="" method="post" enctype="multipart/form-data">
<fieldset>
<legend> مشخصات کاربری </legend>
<label> نام و نام خانوادگی : </label> <input type="text" name="txtName"> <br />
<label> جنسیت :</label> زن <input type="radio" value="زن" name="rdS-e-x"> مرد <input type="radio" value="مرد" name="rdS-e-x"> <br />
<label> ورزش مورد علاقه : </label> فوتبال <input type="checkbox" name="chksport" value="فوتبال"> والیبال <input type="checkbox" name="chksport" value="والیبال"> بسکتبال <input type="checkbox" name="chksport" value="بسکتبال"> <br />
<label> نحوه ی آشنایی با سایت :</label>
<select name="ddlknowus">
<optgroup label="جامعه مجازی"></optgroup>
<option>فیس بوک</option>
<option>لینکداین</option>
<option>توییتر</option>
<optgroup label="نشریات"></optgroup>
<option>روزنامه</option>
<option>ماهنامه</option>
<option>مجله</option>
</select>
<br />
<label> تصویر : </label> <input type="file" name="flpicture"> <br />
</fieldset>
<fieldset>
<legend> مشخصات عضویت </legend>
<label> نام کاربری : </label> <input type="text" name="txtusername"> <br />
<label> رمز عبور : </label> <input type="password" name="txtpassword"> <br />
</fieldset>
<input type="submit" value=" ثبت نام ">
</form>
</body>
</html>
<html>
<bady>
<form action="send.php" method="post" enctype="multipart/form-data">
<label> Full name : </label> <input type="text" size="30">
<label> s-e-x : </label>
<input type="radio" name="s-e-x" value="man"> man
<input type="radio" name="s-e-x" value="woman"> woman
<label> favourit : </label>
<input type="checkbox" value="sport"> Sport
<input type="checkbox" value="design"> Design
<label> UserName : </label> <input type="text" size="30">
<label> Password : </label> <input type="password" size="30">
<input type="submit" value="Register">
</form>
</bady>
</html>
