در جلسه هفتم آموزش ایجاد فرم در HTML را شروع می کنیم و از آن جا که مبحث فرم طولانی است توضیح آن در جلسات بعدی نیز ادامه می یابد.
تگ فرم در HTML
تگ فرم در HTML برای جمع آوری اطلاعات کاربر و ارسال آن به سِروِر استفاده می شود.
<body> <form> . . . </form> </body>
خصوصیت action
اطلاعاتی که کاربر در فرم وارد می کند بعد از زدن دکمه submit به آدرسی که در خصوصیت action نوشته می شود، ارسال می شود.
<form action="www.webtml.ir"> </form>
خصوصیت method
خصوصیت method دو مقدار POST و GET را می گیرد. زمانی که از GET استفاده می شود اطلاعات وارد شده در فرم از طریق URL یا آدرس سایت ارسال می شود. ولی در صورت استفاده از POST اطلاعات در داخل یک درخواست HTTP ارسال می شود. آدرس URL دارای یک سری محدودیت است و اگر بخواهیم چند مگابایت اطلاعات را ارسال کنیم امکان اینکه آن را در URL قرار دهیم نمی باشد. و باید حتماً از POST استفاده کنیم. همچنین به دلایل امنیتی POST کاربرد بیشتری دارد چون از امنیت بالاتری برخوردار می باشد.
<form action="www.webtml.ir" method="POST">
<form action="www.webtml.ir" method="GET">
خصوصیت name
خصوصیت name یک نام را برای فرم تعیین می کند.
برای گرفتن اطلاعات از کاربر ما نیازمند تگ های خاصی در فرم، مانند text هستیم.
تگ <input>
این تگ تنوع زیادی داشته و این تنوع به خاصیت type که در این تگ قرار می گیرد، بستگی دارد و می تواند شامل: submit, URL, radio, password, text و غیره باشد.
مقادیر text و password برای خصوصیت type در تگ input
مثال زیر فرمی را به وجود می آورد که در آن نام کاربری و رمز کاربر درخواست می شود:
<form action="www.webtml.ir" method="POST"> <input type="text" name="username" ><br> <input type="password" name="password"> </form>
دقت کنید که در کد بالا تگ <br> باعث می شود کادر مربوط به password در کنار کادر username قرار نگرفته و به خط بعد برود. نتیجه کد را در تصویر اول مشاهده می کنیم:
در صورتی که کاربر اطلاعات خود را در فرم وارد کند:
همانطور که مشاهده می کنید مقدار password در خصوصیت type باعث می شود که حرف یا عدد وارد شده بصورت دایره های سیاه ظاهر شود که امنیت را بالا می برد. اگر بخواهیم برای تگ های درون فرم عنوان قرار دهیم از تگ <lable> استفاده کرده و عنوان مورد نظر خود را در این تگ می نویسیم:
<form action="www.webtml.ir" method="POST"> <lable>username:</lable> <input type="text" name="username" ><br> <lable>password:</lable> <input type="password" name="password"> </form>
مقدار radio برای خصوصیت type در تگ input
برای ایجاد دکمه های انتخابی که کاربر مجاز به انتخاب تنها یک گزینه می باشد؛ از radio استفاده می شود. بطور مثال برای تعیین نوع جنسیت در یک فرم کاربر فقط می تواند یک مورد را برگزیند:
<form action="www.webtml.ir" method="POST"> Gender <br> <lable> male </lable> <input type="radio" name="gender" value="male" ><br> <lable>female</lable> <input type="radio" name="gender" value="female"> </form>
تگ های از نوع radio که دارای خصوصیت name یکسان هستند در یک گروه قرار می گیرند و از هر گروه نیز یک مورد را می توان انتخاب کرد. در صورتی که بخواهیم امکان انتخاب دو یا چند مورد را به کاربر بدهیم، باید name های متفاوتی را به آن ها بدهیم.
مقدار checkbox برای خصوصیت type در تگ input
این مقدار برای ایجاد دکمه های گزینشی استفاده می شود. و در این مورد کاربر مجاز به انتخاب دو یا چند مورد می باشد. به عنوان مثال از کاربر خواسته شده تا از بین گزینه ها مهارت های خود را علامت بزند.
<form action="www.webtml.ir" method="POST"> <lable>volleyball</lable> <input type="checkbox" name="skil" value="1" ><br> <lable>football</lable> <input type="checkbox" name="skil" value="2" ><br> <lable>taekwondo</lable> <input type="checkbox" name="skil" value="3" ><br> <lable>swim</lable> <input type="checkbox" name="skil" value="4"> </form>
نتیجه کد بالا را در تصویر زیر مشاهده می کنید:
با ادامه توضیحات در مورد فرم در HTML در جلسه بعد، با ما همراه باشید.
دیدگاه بگذارید