تقریبا در هر سایت یا وبلاگی و به طور کل در هر صفحه وب عناصر تعاملی وجود دارد که کاربر می تواند نسبت به آنها عکس العمل داشته باشد، به طور مثال بر روی دکمه ای کلیک کند یا از بین گزینه های مربوط به نظرسنجی یک مورد را انتخاب نماید، شکل برجسته این عناصر تعاملی فیلد ها و فرم هایی هستند که کاربران با تکمیل اطلاعات آنها و با کلیک بر روی دکمه ارسال، مقادیری را به سرور و پایگاه داده سایت یا وبلاگ مورد نظر ارسال می کنند، از آنجایی که این نوع امکانات در صفحات وب، وابسته به تگ form و عناصر زیرمجموعه آن است، بنابراین یادگیری دقیق این مبحث می تواند در آینده نزدیک دید شما را نسبت به تکنولوژی وب عمیق تر و چه بسا یک قدم به سمت برنامه نویسی حرفه ای نزدیک تر کند.
تگ form در html
تگ فرم با هدف ایجاد قابلیت های تعاملی (دکمه، فیلدهای متنی، امکان آپلود فایل و...) برای صفحات Html تعریف شده است، در واقع کنسرسیوم جهانی وب یا w3c این نکته را مد نظر داشته که صفحات وب باید از قابلیت ارتباط دو سویه برخوردار باشند، یعنی همان طور که به فرض مدیران یک سایت می توانند مطالبی در آن منتشر کنند، کاربران نیز باید بتوانند در محتوای آن مشارکت داشته یا از قابلیت های آن به صورت سفارشی استفاده نمایند، به این ترتیب و به تدریج عناصر و ویژگی های تعاملی که شباهت های زیادی با هم داشتند در قالب یک تگ با عنوان فرم (form) و زیرمجموعه های آن معرفی شد.
یک فرم ساده به صورت زیر در html تعریف می شود
<form>
//Form elements
</form> تگ form به تنهایی کاربردی ندارد و تنها معرف ایجاد یک امکان تعاملی از نوع فرم است،بنابراین این تگ را با موارد زیر تکمیل می کنیم.
خاصیت action در form
از آنجایی که اطلاعات یک فرم html پس از تکمیل شدن باید به یک فایل در سرور ارسال شود، خاصیت action برای تعیین آدرس فایل مقصد مورد استفاده قرار می گیرد، به طور مثال اطلاعات فرم زیر (در صورت ارسال) به یک فایل با نام get.php فرستاده خواهد شد. مقادیر خاصیت action می تواند به صورت آدرس کامل (با //:http) یا به صورت آدرس دایرکتوری در نظر گرفته شود.
خاصیت method در form
در کنار action که مقصد اطلاعات یک فرم را معین می کند، خاصیت method شیوه ارسال را مشخص می کند، این شیوه می تواند به یکی از دو شکل post یا get (حالت پیش فرض) باشد، در متد post، اطلاعات دور از چشم ما و به صورت پنهانی، در پس زمینه به سرور ارسال می شوند اما در متد get، اطلاعات در نوار آدرس مرورگر قابل مشاهده هستند و به صورت پارامترهایی به همراه مقادیر به سرور ارسال می شوند، متد post برای ارسال مقادیر طولانی، اطلاعات حساس کاربری، آپلود فایل و... کاربرد دارد و متد get بیشتر برای ارسال اطلاعات کوتاه و با حساسیت کمتر به کار می رود.
مثال:
<form action="server url" method="get|post">
//input controls e.g. textfield, textarea, radiobutton, button
</form>تگ های زیرمجموعه form
تگ input در form
اصلی ترین تگی که به همراه تگ form در ایجاد قابلیت های تعاملی نقش دارد، input است که با تنظیم type های مختلف برای آن می توان انواع مختلفی از امکانات نظیر فیلد متنی (text)، فیلد کلمه عبور (password)، دکمه معمولی (button)، دکمه ارسال (submit) و ... را ایجاد کرد، در زیر چند نمونه اولیه از نحوه تعریف و به کارگیری تگ input را ملاحظه می کنید.
مثال:
<body>
<form>
نام خود را وارد کنید <br>
<input type="text" name="username">
</form>
</body> خروجی:
نام خود را وارد کنید
- مقادیری که تگ input برای خاصیت type می پذیرد و کاربرد آنها به صورت خلاصه در زیر عنوان می شود.
| type | توضیحات |
| text | برای ایجاد فیلدهای متنی (متن کوتاه) استفاده می شود |
| password | از نوع password برای ایجاد فیلدهای کلمه عبور (ستاره ای) استفاده می شود |
| submit | ازنوع submit برای ایجاد دکمه ارسال اطلاعات فرم استفاده می شود |
| reset | نوع reset برای ایجاد یک دکمه که با کلیک بر روی آن اطلاعات فیلدها به حالت پیش فرض برمی گردد کاربرد دارد |
| radio | از نوع radio برای ایجاد دکمه های رادیویی تایید شونده در فرم های وب استفاده می شود. |
| checkbox | برای ایجاد باکس های قابل تایید (چک باکس) استفاده می شود. |
| button | برای ایجاد دکمه های ساده به کار می رود، یک دکمه معمولی باید به همراه دستورات جاوا اسکریپت تکمیل شود در غیر این صورت به خودی خود کاربردی ندارد. |
| file | برای آپلود یک فایل به سرور استفاده می شود. |
| image | از نوع image برای ایجاد یک دکمه ارسال فرم (که خود از یک تصویر به عنوان پس زمینه استفاده می کند) استفاده می شود. |
در HTML5 انواع جدیدی را به عنصر <input> اضافه کرد. در جدول زیر به آنها اشاره میکنیم.
| "" type | توضیحات |
| color | یک فیلد ورودی با یک رنگ خاص تعریف می کند. |
| date | یک فیلد ورودی برای انتخاب تاریخ تعریف می کند. |
| datetime-local | یک فیلد ورودی برای وارد کردن تاریخ بدون منطقه زمانی تعریف می کند. |
| یک فیلد ورودی برای وارد کردن آدرس ایمیل تعریف می کند. | |
| month | کنترل را با ماه و سال را بدون منطقه زمانی مشخص می کند. |
| number | یک فیلد ورودی را برای وارد کردن یک شماره تعریف می کند. |
| url | فیلدی برای وارد کردن URL تعریف می کند |
| week | فیلمی را برای وارد کردن تاریخ با هفته ، بدون منطقه زمانی تعریف می کند. |
| search | برای وارد کردن رشته جستجو یک فیلد متنی یک خط تعریف می کند. |
| tel | فیلد ورودی را برای وارد کردن شماره تلفن تعریف می کنید. |
1- button
برای ایجاد دکمه های ساده به کار می رود، یک دکمه معمولی باید به همراه دستورات جاوا اسکریپت تکمیل شود در غیر این صورت به خودی خود کاربردی ندارد.
مثال:
<html>
<body>
<h2>Input "button" type.</h2>
<p>دکمه زیر را فشار دهید: </p>
<form>
<input type="button" value="اینجا کلیک کنید" onclick="alert('you are learning HTML')">
</form>
</body>
</html>خروجی:
دکمه زیر را فشار دهید:
2-checkbox
از این مقادیر به همراه تگ input برای ایجاد باکس های قابل تایید (چک باکس) استفاده می شود.
مثال:
<html>
<body>
<h2>Input "checkbox" type</h2><br>
<h3>فرم ثبت نام </h3>
<form>
<label>نام خود را وارد کنید:</label>
<input type="text" name="name">
<p>لطفا ورزش مورد علاقه خود را انتخاب کنید</p>
<input type="checkbox" name="sport1" value="cricket">بسکتبال<br>
<input type="checkbox" name="sport2" value="tennis">تنیس<br>
<input type="checkbox" name="sport3" value="football">فوتبال<br>
<input type="checkbox" name="sport4" value="baseball">کشتی<br>
<input type="checkbox" name="sport5" value="badminton">بدمینتون<br><br>
<input type="submit" value="ارسال">
</form>
</body>
</html>
خروجی:
فرم ثبت نام
نام خود را وارد کنید:
لطفا ورزش مورد علاقه خود را انتخاب کنید
بسکتبال
تنیس
فوتبال
کشتی
بدمینتون
3- file
برای آپلود یک فایل به سرور استفاده می شود.
برای اینکه نوع file به درستی عمل کند، باید enctype (رمزنگاری) را با مقادیر multipart/form-data به تگ form اضافه کنیم.
نکته: پارامتر اختیاری accept مشخص کننده فرمت های مجازی است که از طریق فیلد، قابل آپلود هستند، این فرمت ها بر اساس استاندارد MIME یا (Multipurpose Internet Mail Extensions) مشخص می شوند، اگرچه MIME در اصل استانداردی برای نقل و انتقال اطلاعات از طریق ایمیل در وب است، اما برای صفحات وب نیز کاربرد دارد.
مثال:
<!DOCTYPE html>
<html>
<body>
<form>
<label>فایل خود را برای آپلود انتخاب کنید:</label>
<input type="file" name="newfile">
<input type="submit" value="ارسال">
</form>
</body>
</html>
خروجی:
فایل خود را برای آپلود انتخاب کنید:
4- image
از image برای ایجاد یک دکمه ارسال فرم (که خود از یک تصویر به عنوان پس زمینه استفاده می کند) استفاده می شود.
نکته: image علاوه بر ارسال فرم، مختصات موقعیت خود در صفحه را نیز به سرور ارسال می کند، این مختصات به صورت دو پارامتر X و Y دریافت می شوند که هر کدام با یک مقدار عددی موقعیت افقی و عمودی تصویر را در صفحه مشخص می کنند.
مثال:
<!DOCTYPE html>
<html>
<body>
<form>
<label>نام کاربری:</label><br>
<input type="text" name="name"><br><br>
<input type="image" alt="ارسال" src="login.png" width="100px">
</form>
</body>
</html>خروجی:
نام کاربری:
5- password
از password برای ایجاد فیلدهای کلمه عبور (ستاره ای) استفاده می شود.
در این مثال یک پارامتر دیگر نیز به فرم خود اضافه کرده ایم، این پارامتر maxlength نام دارد که از آن برای تعیین حداکثر کاراکتر مجاز یک فیلد (معمولا فیلد متنی و پسورد) استفاده می شود.
نکته: استفاده از نوع password در فرم های وب (فیلدهای کلمه عبور) از لحاظ حفظ امنیت کاربران اهمیت زیادی دارد.
مثال:
<!DOCTYPE html>
<html>
<body>
<form>
<label>نام کاربری خود را وارد کنید</label><br>
<input type="text" name="firstname" ><br>
<label>پسورد خود را وارد کنید</label><br>
<input type="Password" name="password"><br>
<br><input type="submit" value="ارسال">
</form>
</body>
</html>
خروجی:
نام کاربری خود را وارد کنید
پسورد خود را وارد کنید
6- radio
ازradio برای ایجاد دکمه های رادیویی تایید شونده در فرم های وب استفاده می شود.
مثال:
<html>
<body>
<form>
<p>رنگ مورد علاقه خودتان را انتخاب کنید</p>
<input type="radio" name="color" value="red"> قرمز <br>
<input type="radio" name="color" value="blue"> آبی <br>
<input type="radio" name="color" value="green">سبز <br>
<input type="radio" name="color" value="pink">صورتی <br>
<input type="submit" value="ارسال">
</form>
</body>
</html>
خروجی:
رنگ مورد علاقه خودتان را انتخاب کنید
قرمز
آبی
سبز
صورتی
7-reset
reset برای ایجاد یک دکمه که با کلیک بر روی آن اطلاعات فیلدها به حالت پیش فرض برمی گردد کاربرد دارد،.
مثال:
<!DOCTYPE html>
<html>
<body>
<form>
<label>نام کاربری: </label>
<input type="text" name="user-id" value="کاربر">
<label>پسورد: </label>
<input type="password" name="pass" value="pass"><br><br>
<input type="submit" value="وارد شدن">
<input type="reset" value="تلاش مجدد">
</form>
</body>
</html>
خروجی:
نام کاربری: پسورد:
نکته: استفاده از این قابلیت باید با دقت انجام شود، چرا که کلیک ناخواسته بر روی دکمه rest باعث از دست رفتن اطلاعات فعلی فیلدها می شود.
8-submit
از submit برای ایجاد دکمه ارسال اطلاعات فرم کاربرد دارد.
مثال:
<!DOCTYPE html>
<html>
<body>
<form action="https://bugeto.net/blog/webprograming-html/from-tag">
<label>نام کاربری را وارد کنید</label><br>
<input type="text" name="firstname"><br>
<label>پسورد خود را وارد کنید</label><br>
<input type="Password" name="password"><br>
<br><input type="submit" value="ارسال">
</form>
</body>
</html>خروجی:
نام کاربری را وارد کنید
پسورد خود را وارد کنید
9-text
از text برای ایجاد فیلدهای متنی (متن کوتاه) استفاده می شود.
مثال:
<!DOCTYPE html>
<html>
<body>
<form>
<label>نام</label><br>
<input type="text" name="firstname"><br>
<label>نام خانوادگی</label><br>
<input type="text" name="lastname"><br>
</form>
</body>
</html>
خروجی:
نام
نام خانوادگی
مقادیری که تگ input برای خاصیت type در html5 و کاربرد آنها را به صورت خلاصه در زیر عنوان میکنیم.
1- <input type="color">
از نوع "color "برای تعریف یک قسمت ورودی استفاده می شود که حاوی یک رنگ است. به کاربر امکان می دهد رنگ را توسط رابط رنگ بصری در یک مرورگر مشخص کند.
توجه: "color" فقط از رنگ در قالب شش ضلعی پشتیبانی می کند ، و مقدار پیش فرض آن 000000# (سیاه) است.
مثال:
<!DOCTYPE html>
<html>
<body>
<form>
رنگ مورد علاقه خود را انتخاب کنید: <br><br>
<input type="color" name="upclick" value="#a52a2a"> کلیک به سمت بالا<br><br>
<input type="color" name="downclick" value="#f5f5dc"> کلیک به سمت پایین
</form>
</body>
</html>
خروجی:
رنگ مورد علاقه خود را نتخاب کنید :
کلیک به سمت بالا
کلیک به سمت پایین
2- <input type="date">
عنصر <input> از نوع "date" یک قسمت ورودی ایجاد می کند، که به کاربر اجازه می دهد تاریخ را در یک قالب معین وارد کند. کاربر می تواند تاریخ را با فیلد متن یا رابط انتخابگر تاریخ وارد کند.
مثال:
<!DOCTYPE html>
<html>
<body>
<form>
تاریخ شروع وپایان را انتخاب کنید: <br><br>
<input type="date" name="Startdate"> تاریخ شروع:<br><br>
<input type="date" name="Enddate"> تاریخ پایان:<br><br>
<input type="submit">
</form>
</body>
</html>خروجی:
تاریخ شروع وپایان را انتخاب کنید:
تاریخ شروع:
تاریخ پایان:
3- <input type="datetime-local">
عنصر <input> از نوع "datetime-local" زمینه ورودی را ایجاد می کند که به کاربر اجازه می دهد تاریخ و همچنین ساعت محلی را در ساعت و دقیقه و بدون اطلاعات منطقه زمانی انتخاب کند.
مثال:
<!DOCTYPE html>
<html>
<body>
<form>
<label>
برنامه جلسه را انتخاب کنید: <br><br>
انتخاب ساعت وتاریخ: <input type="datetime-local" name="meetingdate"> <br><br>
</label>
<input type="submit">
</form>
</body>
</html>خروجی:
برنامه جلسه را انتخاب کنید:
انتخاب ساعت وتاریخ:
4-<input type="email">
نوع "email" یک فیلد ورودی ایجاد می کند که به کاربر اجازه می دهد تا آدرس ایمیل را با اعتبار سنجی الگوی وارد کند. ویژگی های متعدد به کاربر اجازه می دهد بیش از یک آدرس ایمیل وارد کند.
مثال:
<!DOCTYPE html>
<html>
<body>
<form>
<label><b>آدرس ایمیل خود را وارد کنید</b></label>
<input type="email" name="email" required>
<input type="submit">
<p><strong>نکته:</strong>کاربر همچنین می تواند چندین آدرس ایمیل را با جدا از کاما یا فضای سفید به شرح زیر وارد کند: </p>
<label><b>چندین آدرس ایمیل وارد کنید</b></label>
<input type="email" name="email" multiple>
<input type="submit">
</form>
</body>
</html>
خروجی:
آدرس ایمیل خود را وارد کنید
نکته:کاربر همچنین می تواند چندین آدرس ایمیل را با جدا از کاما یا فضای سفید به شرح زیر وارد کند:
چندین آدرس ایمیل وارد کنید
5-<input type="month">
"month "قسمت ورودی ایجاد می کند که به کاربر امکان می دهد ماه و سال را به راحتی در قالب "MM ، YYYY" وارد کند که در آن MM مقدار ماه را تعریف می کند ، و YYYY مقدار سال را مشخص می کند.
مثال:
<!DOCTYPE html>
<html>
<body>
<form>
<label>ماه تولد خود را وارد کنید: </label>
<input type="month" name="newMonth">
<input type="submit">
</form>
</body>
</html>خروجی:
ماه تولد خود را وارد کنید:
6-<input type="number">
عنصر"number" فیلد ورودی ایجاد می کند که به کاربر اجازه می دهد مقدار عددی را وارد کند. همچنین می توانید با استفاده از ویژگی min و max مقدار حداقل و حداکثر را وارد کنید.
مثال:
<!DOCTYPE html>
<html>
<body>
<form>
<label>سن خود را وارد کنید: </label>
<input type="number" name="num" min="50" max="80">
<input type="submit">
</form>
<p><strong>نکته:توجه: به شما اجازه می دهد تا عدد را در محدوده 50-80 وارد کنید. اگر می خواهید شماره دیگری غیر از محدوده را وارد کنید ، خطایی نشان می دهد.</p>
</body>
</html>خروجی:
سن خود را وارد کنید:
نکته: توجه: به شما اجازه می دهد تا عدد را در محدوده 50-80 وارد کنید. اگر می خواهید شماره دیگری غیر از محدوده را وارد کنید ، خطایی نشان می دهد.
7-<input type="url">
عنصر <input> از نوع "url" یک قسمت ورودی ایجاد می کند که کاربر را قادر می سازد URL را وارد کند.
مثال:
<!DOCTYPE html>
<html>
<body>
<form>
<label>آدرس وبسایت خود را وارد کنید: </label>
<input type="url" name="website" placeholder="http://example.com"><br>
<input type="submit" value="ارسال اطلاعات">
</form>
</body>
</html>خروجی:
آدرس وبسایت خود را وارد کنید:
8-<input type="week">
<input> از نوع "week" یک فیلد ورودی ایجاد می کند که به کاربر اجازه می دهد هفته و سال تقویم کشویی را بدون منطقه زمانی انتخاب کند.
مثال:
<!DOCTYPE html>
<html>
<body>
<form>
<label><b>بهترین هفته سال خود را انتخاب کنید:</b></label><br><br>
<input type="week" name="bestweek">
<input type="submit" value="ارسال اطلاعات">
</form>
</body>
</html>
خروجی:
بهترین هفته سال خود را انتخاب کنید:
9-<input type="search">
<input> از نوع "search" یک ورودی را ایجاد می کند که به کاربر اجازه می دهد جستجو را وارد کند. اینها از لحاظ عملکردی متناسب با نوع ورودی متن هستند ، اما ممکن است به شکل دیگری طراحی شوند.
مثال:
<!DOCTYPE html>
<html>
<body>
<form>
<label>اینجا جستجو کنید:</label>
<input type="search" name="q">
<input type="submit" value="جستجو">
</form>
</body>
</html>خروجی:
اینجا جستجو کنید:
10-<input type="tel">
عنصر <input> از نوع <tel>ورودی را ایجاد می کند تا شماره تلفن وارد شود. نوع "tel" دارای اعتبار پیش فرض مانند ایمیل نیست ، زیرا الگوی شماره تلفن در سراسر دنیا متفاوت است.
مثال:
<!DOCTYPE html>
<html>
<body>
<form>
<label><b>شماره تلفن خود را با این فرمت وارد کنید( xxx-xxx-xxxx):</b></label>
<input type="tel" name="telephone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required>
<input type="submit"><br><br>
</form>
<p><b>نکته:</b> توجه: در اینجا ما از دو خصیصه "الگو" و "الزام" استفاده می کنیم که به کاربر امکان وارد کردن شماره را در قالب داده شده را می دهد و لازم است تا شماره را در قسمت ورودی وارد کنید.</p>
</body>
</html>
خروجی:
شماره تلفن خود را با این فرمت وارد کنید( xxx-xxx-xxxx):
نکته: توجه: در اینجا ما از دو خصیصه "الگو" و "الزام" استفاده می کنیم که به کاربر امکان وارد کردن شماره را در قالب داده شده را می دهد و لازم است تا شماره را در قسمت ورودی وارد کنید.
مثال:
<!DOCTYPE>
<html>
<body>
<table>
<tr>
<td class="tdLabel"><label for="register_name" class="label">نام خود را وارد کنید:</label></td>
<td><input type="text" name="name" value="" id="register_name" style="width:160px"/></td>
</tr>
<tr>
<td class="tdLabel"><label for="register_password" class="label">پسورد خود را وارد کنید:</label></td>
<td><input type="password" name="password" id="register_password" style="width:160px"/></td>
</tr>
<tr>
<td class="tdLabel"><label for="register_email" class="label">ایمیل :</label></td>
<td
><input type="email" name="email" value="" id="register_email" style="width:160px"/></td>
</tr>
<tr>
<td class="tdLabel"><label for="register_gender" class="label">جنسیت :</label></td>
<td>
<input type="radio" name="gender" id="register_gendermale" value="male"/>
<label for="register_gendermale"مرد</label>
<input type="radio" name="gender" id="register_genderfemale" value="female"/>
<label for="register_genderfemale">زن</label>
</td>
</tr>
<tr>
<td class="tdLabel"><label for="register_country" class="label">کشور:</label></td>
<td><select name="country" id="register_country" style="width:160px">
<option value="india">iran</option>
<option value="pakistan">pakistan</option>
<option value="africa">africa</option>
<option value="china">china</option>
<option value="other">other</option>
</select>
</td>
</tr>
<tr>
<td colspan="2"><div align="right"><input type="submit" id="register_0" value="ثبت نام"/>
</div></td>
</tr>
</table>
</form>
</body>
</html>
خروجی:
| نام خود را وارد کنید: | |
| پسورد خود را وارد کنید: | |
| ایمیل : | |
| جنسیت : | زن |
| کشور: | iranpakistanafricachinaother |
برای افزودن دیدگاه خود، نیاز است ابتدا وارد حساب کاربری‌تان شوید