گروه مقاله : HTML 4
تاريخ انتشار : 1394/02/23 - 09:46
كد :450
فرم های HTML به منظوردريافت اطلاعات کاربر و ارسال آنها به سمت سرور استفاده می شوند.
فرم ها در HTML به وسیله تگ <form> تعریف می شوند.
<form>
.
form elements
.
</form>
از فرم های HTML برای ارسال اطاعات به سرور استفاده می شود.
یک فرم می تواند شامل عناصر ورودی(Input) مانند فیلد های متنی، checkboxها، radio button ها، دکمه های ارسال(submit button)، لیست های انتخاب و ... باشد.
فرم های HTML و عناصر ورودی
عنصر <input>
عنصر <input> مهم ترین عنصر فرم است.
در اين عنصر خصوصیتی به نام type به تعيين نوع اطلاعات ورودی اختصاص دارد و می توان آن را با یکی از مقادیر زیر تنظیم کرد:
text , checkbox , radio , password , hidden , submit , reset , button , file , image
در ادامه به شرح بعضی از typeهای پرکاربرد بالا خواهیم پرداخت:
Text Input (فیلد input از نوع Text)
برای اینکه کاربر بتواند اطلاعاتی از قبيل متن، اعداد و ... را وارد کند، باید خصوصیت type را با مقدار "text" تنظیم کنيد:
<form>
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
خروجی کد بالا در مرورگر :
Radio Button Input (فیلد input از نوع Radio)
برای اینکه کاربر بتواند فقط یک گزينه را از بين چند گزينه محدود انتخاب کند،باید خصوصیت type را با مقدار "radio" تنظیم کنيد:
<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>
خروجی کد بالا در مرورگر :
Submit Button (فیلد input از نوع Submit)
در فرمها برای ارسال اطلاعات کسب شده از دکمه ای به نام ارسال يا Submit استفاده مي شود و با کليک کاربر روی اين دکمه، اطلاعات درون فرم به فايلی ديگر ارسال خواهند شد.
برای تعيين مقصد ارسال اطلاعات بايد درون تگ form از شناسه ای به نام action استفاده کنيد. مقدار شناسه action آدرس يا url فايلی است که به دريافت و سپس پردازش اطلاعات دريافتی خواهد پرداخت.
معمولا فايلهای بخش action برنامه ها و اسکريپت های نوشته شده با زبانهای cgi مانند ASP.NET ، Perl ، PHP و ... بوده و وظيفه آنها دريافت اطلاعات فرمها و سپس پردازش آنها مي باشد:
<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
خروجی کد بالا در مرورگر :
نحوه ایجاد لیست کشویی (Drop-down list)
<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected="selected">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>