ورود به کارتابل مشتریان وب مهراز
فرم های HTML
یادگیری HTMLعنصر <form>
این عنصر در HTML فرم ها را برای دریافت و جمع آوری اطلاعات کاربر ، تعریف می کند :
<form>
.
عناصر فرم
.
</form>
فرم های HTML حاوی عناصر فرم می باشند. عناصر فرم ، انواع متفاوتی از عناصر ورودی مانند "فیلد متن" ، "چک باکس ها" ، "دکمه های رادیویی" ، "دکمه ثبت" و ... هستند.
عنصر <input>
عنصر <input> مهمترین عنصر فرم می باشد. این عنصر می تواند به شکل های مختلفی نمایش داده شود که بستگی به صفت type دارد.
نمونه هایی از صفات type :
| Type | |
|---|---|
| <"input type="text> | |
| <"input type="radio> | |
| <"input type="submit> |
* در درس های آینده در مورد نوع ورودی ها بیشتر آشنا خواهید شد.
ورودی متن
<"input type="text> یک فیلد تک خطی برای وارد کردن متن تعریف می کند :
مثال :
<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>نکته : فرم به تنهایی قابل مشاهده نیست. همچنین توجه داشته باشید که تعداد کاراکتر های پیش فرض فیلد متنی ، 20 کاراکتر است.
دکمه رادیویی
<"input type="radio> یک دکمه رادیویی تعریف می کند :
مثال :
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>
دکمه ثبت
<"input type="submit> دکمه ای برای ارسال داده ها به form-handler تعریف می کند.
form-handler معمولا یک صفحه سرور به همراه کدهایی است که پردازش داده های وارد شده را انجام می دهد. form-handler در صفت action فرم ، مشخص می شود :
مثال :
<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="hamed"><br>
Last name:<br>
<input type="text" name="lastname" value="moez"><br><br>
<input type="submit" value="Submit">
</form>صفت action
این صفت عملی را که بعد از ثبت فرم باید اجرا شود ، مشخص می کند. معمولا داده ها بعد از کلیک بر روی دکمه ثبت ، به یک صفحه وب روی سرور ارسال می شود.
در مثال بالا ، داده های فرم به یک صفحه وب به نام action_page.php بر روی سرور ارسال می شود. این صفحه حاوی اسکریپت سمت سرور است که داده های فرم را حل و فصل می کند :
<form action="/action_page.php">اگر صفت action نوشته نشود (فراموش شود) ، action بر روی صفحه جاری تنظیم می شود.
صفت method
صفت method یک متد HTTP (مانند : POST یا GET) را تعیین می کند تا به هنگام ارسال داده های فرم ، استفاده شود :
<form action="/action_page.php" method="get">یا
<form action="/action_page.php" method="post">
چه زمانی از GET استفاده کنیم؟
متد پیش فرض به هنگام ثبت فرم ، GET است. البته وقتی از GET استفاده می کنیم ، داده ثبت شده در فرم در فیلد آدرس صفحه وبمورد نظر نمایش داده می شود :
/action_page.php?firstname=Mickey&lastname=Mouse
نکته : به هنگام ثبت اطلاعات حساس نباید از GET استفاده کنید. متد GET به علت محدودیت سایز ، برای داده های غیر حساس و کوتاه استفاده می شود.
چه زمانی از POST استفاده کنیم؟
اگر داده ها شامل اطلاعات حساس یا شخصی است ، همیشه از متد POST استفاده کنید.در این متد ، اطلاعات ثبت شده در فرم ، در آدرس بار نمایش داده نمی شود. متد POST محدودیت سایز ندارد و می توان ثبت و ارسال مقدار بزرگی از داده از آن استفاده کرد.
صفت name
هر فیلد ورودی باید دارای صفت name باشد تا بتواند ثبت شود. اگر صفت name نوشته نشود (فراموش شود) ، داده آن فیلد ورودی اصلا ارسال نخواهد شد.
مثال زیر فقط ورودی فیلد "نام خانوادگی" را ارسال خواهد کرد :
مثال :
<form action="/action_page.php">
First name:<br>
<input type="text" value="hamed"><br>
Last name:<br>
<input type="text" name="lastname" value="moez"><br><br>
<input type="submit" value="Submit">
</form>
گروه بندی داده های فرم با <fieldset>
با استفاده از عنصر <fieldset> داده های مرتبط با هم را گروه بندی می کنیم. عنصر <legend> یک عنوان برای عنصر <fieldset> تعریف می کند.
مثال :
<form action="/action_page.php">
<fieldset>
<legend>Personal information:</legend>
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">
</fieldset>
</form>ارسال ایمیل از طریق فرم
<!DOCTYPE html>
<html>
<body>
<h2>Send e-mail to someone@example.com:</h2>
<form action="mailto:someone@example.com" method="post" enctype="text/plain">
Name:<br>
<input type="text" name="name"><br>
E-mail:<br>
<input type="text" name="mail"><br>
Comment:<br>
<input type="text" name="comment" size="50"><br><br>
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>
</body>
</html>
لیست صفات <form> :
| صفت | توضیحات |
| accept-charset | تعیین مجموعه کاراکتر های مورد استفاده در فرم ثبت شده (پیش فرض : کاراکتر های صفحه) |
| action | تعیین آدرس صفحه ای که فرم باید در آن ثبت شود ( پیش فرض : صفحه ثبت فرم) |
| autocomplete | تعیین روشن یا خاموش بودن قابلیت تکمیل خودکار فرم (پیش فرض : روشن) |
| enctype | تعیین نحوه کدگذاری داده های ارسالی فرم (پیش فرض : مانند url) |
| method | تعیین متد HTTP به هنگام ثبت فرم ( پیش فرض : GET ) |
| name | تعیین یک نام برای شناسایی فرم |
| novalidate | تعیین اینکه نیازی به اعتبارسنجی داده های فرم وجود ندارد |
| target | تعیین هدف آدرس در صفت action |
نظر شما
>