آموزش HTML فرم ها
یکی از عناصر مهم در HTML فرم ها می باند . فرم ها مسثول نگهداری اطلاعات از جانب کاربران می باشد .به کمک فرم ها میتوان دریافت و ارسال اطلاعات را به سمت سرور انجام داد .
فرم ها با تک <form></form> ایجاد میکنند . تگ input قابلیت ساخت یک فیلد فرم را برای ما فراهم خواهد نمود .
از فرم ها به منظور ارسال اطلاعات و داده ها به سمت سرور استفاده خواهیم کرد.
یک فرم میتواند شامل تعدادی عناصر ورودی ((input مانند فیلد های متنی، چک باکس ها checkbox، رادیو باتن ها radio button، دکمه های ارسال send button ، لیست های انتخاب و ... باشد.
فرمها در HTML را با تگ <form></form> ایجاد میکنند .
نحوه ی صحیح نوشتار یک فرم بصورت زیر می باشد :
<form>
input elements
</form>
چگونه فیلد متنی ایجاد کنیم :
در مثال زیر با استفاده از تگ form فیلدهای متنی را ایجاد خواهیم کرد :
<!DOCTYPE html>
<html>
<body>
<form action="">
First name: <input type="text" name="firstname" /><br />
Last name: <input type="text" name="lastname" />
</form>
<p><b>Note:</b> The form itself is not visible. Also note that the default width of a text field is 20 characters.</p>
</body>
</html>
مثال بالا در مرورگر بصورت زیر نمایش داده خواهد شد :
Note: The form itself is not visible. Also note that the default width of a text field is 20 characters.
روش ایجاد یک فیلد کلمه ی عبور :
<!DOCTYPE html>
<html>
<body>
<form action="">
Username: <input type="text" name="user" /><br />
Password: <input type="password" name="password" />
</form>
<p><b>Note:</b> The characters in a password field are masked (shown as asterisks or circles).</p>
</body>
</html>
مثال بالا در مروگر بصورت زیر نمایش داده خواهد شد :
Note: The characters in a password field are masked (shown as asterisks or circles).
یکی از مهمترین عناصر موجود در فرمها تگ input می باشد . این تگ نیز مانند سایر تگ ها دارای خصوصیاتی می باشد .
از مهمترین خوصصیات تگ input می توان خصوصیت type را نام برد .این خصوصیت میتواند مقداری با مقادیر زیر داشته بشد :
text , checkbox , radio , password , hidden , submit , reset , button , file , image
نکته : در HTML خصوصیت type به معنای نوع می باشد :
به عنوان مثال در تگ input از type آن معادل text باشد آن ورودی از نوع متنی در نظر گرفته خواهد شد .
در مثال های بعدی با این موضوع کاملا آشنا خواهید شد .
فیلد input از نوع Text :
اگر در بخش هایی از سایت میخواهید که بازدیدکنندگان محتوایی نظیر متن عدد و... را وارد نمایند باید در تگ input خصوصیت type را از نوع Text تنظیم نمایید .
مثال :
<form>
First name: <input type="text" name="firstname" /><br />
Last name: <input type="text" name="lastname" />
</form>
با این وجود مرورگر مثال بالا را بصورت زیر نمایش خواهد داد :
نکته : تگ form در مرورگر نمایش داده نخواهد شد .
نکته 2 : یک فیلد که دارای متن می باشد بصورت پیش فرض قابلیت ثبت 20 کاراکتر را دارد .
فیلد input از نوع Password :
اگر در برخی از بخش های سایت نظیر ثبت نام کاربران و... میخواهید کاربر پسورد مورد نظر را وارد کند از فیلد input با خصوصیت type و مقدار password استفاده خواهیم کرد . در مثال زیر با این موضوع آشنا خواهید شد .
<form>
Password: <input type="password" name="pwd" />
</form>
با اجرای سند HTML بالا مرورگر بصورت زیر به نمایش در خواهد آمد :
نکته : کاراکتر های وارد شده در این بخش به دلیل مهم بودن بصورت ستاره ای و یا دایره ای و غیر قابل مشاهده می باشند .
فیلد input از نوع Radio :
اگر در بخشی از سایت بخواهید بازدید کنندگان سایت گزینه های وارد شده توسط شما را علامت گذاری کنند از این فیلد و با استفاده از نوع radio استفاده خواهیم کرد .
Radio دایره های تو خالی می باشند و زمانی که توسط کاربر علامت گذاری می شوند دایره ی مشکی رنگی داخل آن قرار خواهد گرفت و آن بخش را مجزا خواهد کرد .
کاربران در بین radio ها باید یک گزینه را انتخاب کنند و به هیچ وجه نمیتوانند دو گزینه را علامت گذاری نمایند .
در مثال زیر بیشتر با این موضوع آشنا خواهید شد :
<form>
<input type="radio" name="sex" value="male" /> Male<br />
<input type="radio" name="sex" value="female" /> Female
</form>
بعد از اجرای سند اچ تی ام ال بالا مرورگر بصورت زیر به نمایش در خواهد آمد :
فیلد input از نوع Checkbox :
زمانیکه بخواهیم بازدیدکنندگان سایت گزینه هایی را علامتگذاری نمایند از Check box استفاده خواهیم کرد . چک باکس مربع های تو خالی بوده و زمانی که توسط کاربران علامت زده شوند داخل آنها تیک خواهد خورد . در مثال زیر بهتر با این موضوع آشنا خواهید شد .
تفاوت radio با check box در این است که با استفاده از check box بازدیدکنندگان میتوانند بیشتر از یک گزینه را انتخاب کنند اما با استفاده از نوع radio بازدیدکنندگان حق انتخاب یک گزینه را خواهند داشت .
مثال :
<form>
<input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br />
<input type="checkbox" name="vehicle" value="Car" /> I have a car
</form>
با اجرای مثال بالا مرورگر بصورت زیر نمایش داده میشود :
فیلد input از نوع submit :
در فرم ها به منظور ارسال اطلاعات از دکمه ای به نام submit استفاده خواهیم کرد . با استفاده از این دکمه اطلاعات درون فرم را به بخشی دیگر هدایت و یا ارسال خواهیم کرد .
در فیلد input به منظور تعیین مقصد باید داخل تگ form از مقدار شناسه ای به نام action استفاده کرد . داخل شناسه ی action مسیر مورد نظر را برای ما مشخص خواهد کرد ( جایی که اطلاعات فرم قرار است داخل آن ثبت و یا وارد شود ).
آدرس داخل شناسه ی action میتواندurl و یا بخشی از سایت باشد که قرار است محتویات و اطلاعات درون تگ form در آن پردازش شود .
اصولا فایل هایی که در بخش Action قرار میگیرند اسکریپ ها و برنامه های نوشته شده ای با زبان های cgi از جمله asp.net , php و... می باشند که وظیفه ی آنها گرفتن اطلاعات فرمها و سپس پردازش آنها می باشد .
با مثال زیر بهتر با این موضوع آشنا خواهید شد :
<form name="input" action="http://int-net.ir/article/آموزش-HTML-فرم-ها" method="get">
Username: <input type="text" name="user" />
<input type="submit" value="Submit" />
</form>
با اجرای مثال بالا مرورگر بصورت زیر نمایش داده می شود :
در صورتی که در مثال بالا کاراکترهایی را تایپ کنید و روی دکمه ی submit کلیک کنید ورودی شما به صفحه ی موجود در بخش action هدایت خواهد شد .
Drop down list :
چگونه یک لیست کشویی ایجاد کنیم : با استفاده از تگ فرم و تگ Select بخش اصلی drop down list را می سازیم . به منظور درج لیست داخلی از تگ option استغاده خواهیم کرد .
در مثال زیر بهتر با این موضوع آشنا خواهیم شد :
<!DOCTYPE html>
<html>
<body>
<form action="">
<select name="cars">
<option value="web design">web design</option>
<option value="seo">seo</option>
<option value="site design">site design</option>
<option value="INT">INT</option>
</select>
</form>
</body>
</html>
با اجرای مثال بالا مرورگر بصورت زیر به نمایش در خواهد آمد :
روش ایجاد یک کنترل متن ورودی چند خطه textarea:
به منظور ثبت تعداد زیادی کاراکتر ورودی از textarea استفاده میکنیم . خاصیت text area این است که بازدیدکنندگان و استفاده کنندگان سایت میتوانند متن ویا کلماتی نامحدود وارد نمایند . به عنوان مثال در بخش نظرات سایت یک شخص میتواند نظرخود را بصورت چند خط و مفصل در قسمتی که textarea قرار دارد وارد نماید .textarea بصورت پیش فرض نسبت به textbox ارتفاع بیشتری دارد .با مثال زیر کاملا با این موضوع آشنا خواهید شد :
<!DOCTYPE html>
<html>
<body style="direction:rtl">
<p>
این مثال قابل ویرایش نیست
زیرا ویرایشگر ما از textarea
به عنوان ورودی استفاده کرده است،
و مرورگر شما اجازه نمی دهد که از یک
textarea داخل یک textarea دیگر استفاده کنید.
</p>
<textarea rows="10" cols="30">آن مرد آمد
</body>
</html>
مثال بالا بصورت زیر نمایش داده خواهد شد :
این مثال قابل ویرایش نیست زیرا ویرایشگر ما از textarea به عنوان ورودی استفاده کرده است، و مرورگر شما اجازه نمی دهد که از یک textarea داخل یک textarea دیگر استفاده کنید.
روش ساخت دکمه در HTML :
در HTML به منظور ایجاد یک دکمه از تگ button استفاده میشود .
در مثال زیر با استفاده از تگ button یک دکمه ایجاد کرده ایم :
<!DOCTYPE html>
<html>
<body>
<form action="">
<input type="button" value="Hello world!">
</form>
</body>
</html>
مثال بالا در مرورگر بصورت زیر نمایش داده خواهد شد :
توضیحات مختصری در مورد تگ های استفاده شده در این بخش :
<FORM> : یک فرم HTML جهت ورود کاربران می سازد .
<INPUT> : یک کنترل ورودی ایجاد میکند .
<TEXTAREA> : کنترل ورودی چند خطه ایجاد میکند .
<lable> : برای عناصر ورودی برچسب تعریف خواهد کرد .
<feildset> : برای عناصر HTML یک لبه یا border تعریف خواهد کرد .
<legend> : برای یک عنصر feildset یک feildset و یا caption تعریف میکند .
<select> : یک لیست کشویی drop down list ایجاد خواهد کرد .
<option> : در لیست کشوئی یا (drop-down list) یک آیتم یا option تعریف می کند
<button> : با استفاده از این عنصر دکمه ایجاد میکنیم .
در آموزش بعدی با عنصر iframe آشنا خواهیم شد.
درس بعدی »» آموزش HTML - عنصر iframe
شرکت طراحی سایت INT بهترین و ساده ترین راه ها را برای فراگیری طراحی سایت برای شما قررا خواهد داد .
با آرزوی موفقیت روز افزون برای شما