استفاده از دکمه های تصویری به جای SUBMIT (آموزش HTML)
استفاده از دکمه های تصویری به جای SUBMIT (آموزش HTML)
همانطور که دیدید، برای تحویل فرم باید از دکمه submit استفاده کنید. اما با استفاده از صفت TYPE که مقدارش "IMAGE" تعیین میشود، می توان از دکمه تصویری برای تحویل فرم استفاده کرد.
همانطور که دیدید، برای تحویل فرم باید از دکمه submit استفاده کنید. اما با استفاده از صفت TYPE که مقدارش "IMAGE" تعیین میشود، می توان از دکمه تصویری برای تحویل فرم استفاده کرد. این دکمه نه تنها فرم را تحویل می دهد، بلکه مختصات جایی از تصویر را که کاربر کلیک کرده است، ارسال می نماید، تصویر نیز با صفت SRC مشخص می شود. اغلب صفاتی که برای دستور <IMG> به کار برده شدند، برای این شکل از کاربرد< INPUT> قابل استفاده است
همانند سایر کاربردهای <INPUT > دستور استفاده از صفت NAME نیز در اینجا مهم است، زیرا چگونگی انتقال مختصات تصویر را مشخص می کند. با فرض اینکه فایل تصویری به نام car.gif در کامپیوتذتان
دارید، دستور زیر آن را به عنوان دکمه تحویل فرم به کار می گیرد:
<INPUT TYPE = "IMAGE" SRC = "car.gif" NAME = "sales">
وقتی این تصویر کلیک می شود، مقادیر فرم به همراه دو مقدار دیگر به نامهای sales.x و sales.y ارسال می شوند. این مقادیر، مختصات نسبی در تصویر هستند که نسبت به گوشه بالای سمت چپ تصویر سنجیده می شوند.
مثال ۷-۸
برنامه ای که فرمی را تهیه می کند و اطلاعات تماس با کاربر را از وی درخواست می کند.صفحه وب آن در شکل 8-8 آمده است
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<TITLE-Table and Form Example.</TITLE>
</HEAD>
<BODY>
<DIVALIGN="center">
<H2>Contact Form</H2>
<FORM ACTION="mailto:info@bigcompany.com" METHOD=POST>
<TABLE BORDER="1">
<TR>
<TD>First Name: </TD>
<TD>INPUT NAME="firstname" SIZE="40"></TD>
</TR>
<TR>
<TD->Last Name: </TD>
<TD><INPUT NAME="lastname SIZE="40"></TD>
</TR>
<TR>
<TD-Company: «/TD>
<TD--INPUT NAME="company" SIZE="40"></TD>
</TR>
<TR>
<TD>Address:</TD><TD><INPUTNAME="address"SIZE="40"></TD>
</TR>
<TR>
<TD-City:-/TD<TD--INPUT NAME="city" SIZE="25"></TD>
</TR>
<TR>
<TD>State: </TD>
<TD><INPUT NAME="state" SIZE="15"></TD>
</TR>
<TR>
<TD>Postal Code: </TD>
<TD--INPUT NAME="zip" SIZE="10"></TD>
</TR>
<TR>
<TD COLSPAN="2"><BR>Enter any Comments below:<BR->
<TEXTAREANAME="text"
POWS="5"COLS="50"></TEXTAREA></TD>
</TR>
<TR> -
<TD COLSPAN="2" ALIGN="Center">
<INPUT TYPE="Submit" VALUE="Submit"> <INPUT
TYPE="reset"><BR-> <BR>
</TD>
</TR>
</TABLE>
</FORM>
</DIV>
</BODY>
</HTML>
مقالات مرتبط به طراحی سایت :
عملگرها (آموزش HTML)
متد ها در زبان های اسکریپتی 2 (آموزش HTML)
متد ها در زبان های اسکریپتی(آموزش HTML)
اشیای موجود در جاوا اسکریپت (آموزش HTML)
دستورات در جاوااسکریپت(آموزش HTML)
جاوا اسکریپت (آموزش HTML)
استفاده از دکمه های تصویری به جای SUBMIT (آموزش HTML)
کادرهای کنترلی (آموزش HTML)
لیستهای لغزنده (آموزش HTML)
فیلد متنی چند خطی (آموزش HTML)
کنترلهای فرم (آموزش HTML)
امکانات دیگری از جدول (آموزش HTML)
جدول و صفحه آرایی (آموزش HTML)
لیستها در HTML (آموزش HTML)
سایر فرمتهای دودویی (آموزش HTML)
تصاویر به عنوان دکمه/صوت دیجیتال/فرمت های فایل های صوتی /برداشت و اجرای فایل صوتی(آموزش HTML)