مقدمه
سلام پی وی لرنی های عزیز!
به دوره آموزش تگ های HTML خوش آمدید!
HTML یا Hypertext Markup Language یک نوع زبان نشانه‌گذاری استاندارد برای ایجاد صفحات اینترنت و وب محسوب می شود.
می توان ادعا کرد که HTML دروازه ورود و پیشرفت برای یادگیری سایر زبان های برنامه نویسی هم چون CSS و جاوا اسکریپت است.
HTML ساختار و اسکلت صفحات وب را تشکیل می دهد و بدون آن نمی توان هیچ صفحه وبی را ساخت.
دوست دارید طراح وب شوید؟
خب باید HTML را بیاموزید!
نگران نشوید! یادگیری HTML کار دشواری نیست و با کمی تلاش خیلی زود در آن استاد می شوید.
در جلسه قبل آموختیم که چگونه از تگ footer استفاده نمایییم؛ تگ footer تگی است که که به کمک آن می توان بخش فوتر یا بخش پایینی یک صفحه وب را تنظیم نمود.
در این جلسه آموزش کار با تگ form در HTML را به علاقمندان این دوره ارائه می نماییم.
آموزش کار با تگ form در HTML
به مثال زیر توجه نمایید.
در این مثال یک فرم HTML یا HTML form وجود دارد که دارابی دو زمینه ورودی و یک دکمه ارسال است.
مثال :
| <form action="/action_page.php" method="get"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit" value="Submit"> </form> |
تعریف و کاربرد
همان طور که تا به حال متوجه شده اید تگ form تگی است که از آن برای ایجاد فرم در صفحات وب استفاده می شود.
یک تگ فرم می تواند شامل چند عنصر فرم، از قبیل موارد زیر شود.
- <input>
- <textarea>
- <Button>
- <select>
- <option>
- <optgroup>
- <fieldset>
- <label>
- <output>
پشتیبانی مرورگر ها
| عنصر |  |  |  |  |  |
| <form> | بله | بله | بله | بله | بله |
تفاوت بین HTML 4.01 و HTML5
HTML5 دو خصیصه جدید خصیصه autocomplete و خصیصه novalidate را اضافه کرده و خصیصه accept را حذف نموده است.
تفاوت بین HTML و XHTML
در XHTML خصیصه name غیر معتبر شده است و باید به جای آن از خصیصه global id استفاده نمایید.
خصیصه ها
| خصیصه | مقدار | توضیحات |
|---|
| accept | file_type | این خصیصه نوع فایل هایی که کاربر می تواند آن ها را آپلود کند مشخص می نماید.
این خصیصه در HTML5 پشتیبانی نمی شود. |
| accept-charset | character_set | این خصیصه نحوه کدگذاری کاراکترهایی را که برای ارسال فرم استفاده می شود را مشخص می نماید. |
| action | URL | مشخص میکند که داده های یک فرم کجا ارسال شوند. |
| autocomplete | on
off | قابلیت تکمیل خودکار فیلدهای فرم را مشخص می نماید. |
| enctype | application/x-www-form-urlencoded
multipart/form-data
text/plain | این خصیصه نحوه ی کدگذاری داده های یک فرم را در هنگام ارسال به سرور مشخص می کند. |
| method | get
post | این خصیصه چگونگی ارسال داده های یک فرم را به سرور مشخص می کند. |
| name | text | یک نام را برای فرم تعیین می نماید. |
| novalidate | novalidate | این فرم تعیین می نماید که داده های یک فرم در هنگام ارسال به سرور اعتبارسنجی نشوند. |
| target | _blank
_self
_parent
_top | نحوه نمایش صفحه مقصد را تعیین می نماید. |
خصیصه های سراسری Global Attributes
تگ <form> از خصیصه های سراسری در HTML پشتیبانی می کند.
خصیصه رویداد Event Attributes
تگ <form> از خصیصه رویداد در HTML پشتیبانی می کند.
مثال های تکمیلی
مثال یک:
یک form به همراه چک باکس:
مثال :
| <!DOCTYPE html> <html> <body> <form action="/action_page.php" method="get"> <input type="checkbox" name="vehicle" value="Bike"> I have a bike<br> <input type="checkbox" name="vehicle" value="Car" checked="checked"> I have a car<br> <input type="submit" value="Submit"> </form> </body> </html> |
مثال
یک form با دو چک باکس و یک دکمه ارسال:
مثال :
| <!DOCTYPE html> <html> <body> <form action="/action_page.php" method="get"> <input type="radio" name="gender" id="male" value="male"> Male<br> <input type="radio" name="gender" id="female" value="female" checked="checked"> Female<br> <input type="radio" name="gender" id="other" value="other"> Other<br><br> <input type="submit" value="Submit"> </form> </body> </html> |
تنظیمات پیش فرض CSS
بیشتر مرورگرها عنصر <form> را با مقادیر پیش فرض زیر نمایش می دهند:
مثال :
| form { display: block; margin-top: 0em; } |
کلام آخر
در این جلسه با آموزش کار با تگ form در HTML در خدمت شما بودیم و آموختیم که از این تگ می توان برای ایجاد فرم ها استفاده کرد.
در جلسه آینده به آموزش تگ frame خواهیم پرداخت.
با پی وی لرن همراه باشید.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
