Owl Image
Owl Image
Owl Image
Owl Image
Owl Image
Owl Image
Owl Image
Owl Image
Owl Image
Owl Image

فرم های HTML و گروهی از عناصر درون آن به دریافت و ارسال اطلاعات به سمت سرور کمک خواهند کرد.

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

<!DOCTYPE html>
<html>
<body>

<form action="">
First name: <input type="text" name="firstname" /><br />
Last name: <input type="text" name="lastname" />
</form>

<p><b>Note:</b> The form itself is not visible. Also note that the default width of a text field is 20 characters.</p>

</body>
</html>

چگونه یک فیلد برای ورود کلمه عبور ایجاد کنیم.

<!DOCTYPE html>
<html>
<body>

<form action="">
Username: <input type="text" name="user" /><br />
Password: <input type="password" name="password" />
</form>

<p><b>Note:</b> The characters in a password field are masked (shown as asterisks or circles).</p>

</body>
</html>

فرم های HTML

از فرم های HTML برای ارسال اطاعات به سرور استفاده می شود.

یک فرم می تواند شامل عناصر ورودی(Input) مانند فیلد های متنی، چک باکس ها، رادیو باتن ها، دکمه های ارسال، لیست های انتخاب و … باشد.

از تگ <form> برای ایجاد یک فرم HTML استفاده می شود:

<form>
.
input elements
.
</form>

فرم های HTML و عناصر ورودی

یکی از مهمترین عناصر فرم، عنصر input است.

در این عنصر خصوصیتی به نام type به تعیین نوع اطلاعات ورودی اختصاص دارد و می توان آن را با یکی از مقادیر زیر تنظیم کرد:

text , checkbox , radio , password , hidden , submit , reset , button , file , image

در ادامه به شرح بعضی از typeهای پرکاربرد بالا خواهیم پرداخت:


فیلد input از نوع Text

اگر می خواهید که بازدیدکننده، اطلاعاتی از قبیل متن، اعداد و … را وارد کند، خصوصیت type را با مقدار “text” تنظیم کنید:

<form>
First name: <input type="text" name="firstname" /><br />
Last name: <input type="text" name="lastname" />
</form>

کد HTML بالا به صورت زیر در مرورگر نشان داده می شود:

First name:
Last name: توجه: تگ فرم در مرورگر قابل رویت نیست. همچنین توجه داشته باشید که یک فیلد متنی به صورت پیش فرض به اندازه 20 کاراکتر عرض دارد.نحوه نمایش عناصر ورودی در مروگر نمایش داده نمی شود.اگر بخواهیم مقداری بیش از 20 کاراکتر را برای عنصر متنی مشخص کنیم چه کار می کنیم.


فیلد input از نوع Password

اگر می خواهید که بازدیدکننده، کلمه عبور را وارد کند، خصوصیت type را با مقدار “password” تنظیم کنید:

<form>
Password: <input type="password" name="pwd" />
</form>

کد HTML بالا به صورت زیر در مرورگر نشان داده می شود:

Password:

توجه: کاراکترها در فیلد پسورد به صورت ماسک شده نمایش داده می شوند.(ستاره ای یا دایره ای)


فیلد input از نوع Radio

اگر می خواهید که بازدیدکننده، فقط یک گزینه را از بین چند گزینه محدود انتخاب کند، خصوصیت type را با مقدار “radio” تنظیم کنید:

<form>
<input type="radio" name="sex" value="male" /> Male<br />
<input type="radio" name="sex" value="female" /> Female
</form>
کد HTML بالا به صورت زیر در مرورگر نشان داده می شود:

Male
Female


فیلد input از نوع Checkbox

اگر میخواهید که بازدیدکننده، یک یا چند گزینه را از بین چند گزینه محدود انتخاب کند، خصوصیت type را با مقدار “checkbox” تنظیم کنید:

<form>
<input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br />
<input type="checkbox" name="vehicle" value="Car" /> I have a car 
</form>

کد HTML بالا به صورت زیر در مرورگر نشان داده می شود:

I have a bike
I have a car


فیلد input از نوع Submit

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

برای تعیین مقصد ارسال اطلاعات باید درون تگ form از شناسه ای به نام action استفاده کنید. مقدار شناسه action آدرس یا url فایلی است که به دریافت و سپس پردازش اطلاعات دریافتی خواهد پرداخت.

معمولا فایلهای بخش action برنامه ها و اسکریپت های نوشته شده با زبانهای cgi مانند ASP.NET ، Perl ، PHP و … بوده و وظیفه آنها دریافت اطلاعات فرمها و سپس پردازش آنها می باشد:

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user" />
<input type="submit" value="Submit" />
</form>

کد HTML بالا به صورت زیر در مرورگر نشان داده می شود:

Username:

اگر در فیلد متنی بالا کاراکترهایی را تایپ کنید و روی دکمه “submit” کلیک کنید، مرورگر، ورودی شما را به صفحه ای به نام “html_form_action.php” ارسال خواهد کرد.

 

موفق باشید .