بازگشت به لیست مقالات » | پنجشنبه 11 آذر 1395 در ساعت 0 : 46 دقیقه | نظرات کاربران ( 0 )

آموزش 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>

 

مثال بالا در مرورگر بصورت زیر نمایش داده خواهد شد  :

 

First name:
Last name:

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>

 

مثال بالا در مروگر بصورت زیر نمایش داده خواهد شد :

 

Username:
Password:

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>

 

با این وجود مرورگر مثال بالا را بصورت زیر نمایش خواهد داد :

 

First name:
Last name:

 

نکته : تگ  form  در مرورگر نمایش داده نخواهد شد .

نکته 2 : یک فیلد که دارای متن می باشد بصورت پیش فرض  قابلیت ثبت 20 کاراکتر را دارد .

 

فیلد input  از نوع Password :

اگر در برخی از بخش های سایت نظیر ثبت نام کاربران و... میخواهید کاربر پسورد مورد نظر را وارد کند از فیلد input  با خصوصیت type  و مقدار password   استفاده خواهیم کرد . در مثال زیر با این موضوع آشنا خواهید شد .

 

 

<form>
Password: <input type="password" name="pwd" />
</form>

 

 

با اجرای سند HTML  بالا مرورگر بصورت زیر به نمایش در خواهد آمد :

 

Password:

 

نکته : کاراکتر های وارد شده در این بخش به دلیل مهم بودن  بصورت ستاره ای و یا دایره ای و  غیر قابل مشاهده می باشند .

 

فیلد input  از نوع Radio  :

اگر در بخشی از سایت بخواهید بازدید کنندگان سایت گزینه های وارد شده توسط شما را علامت گذاری کنند از این فیلد و با استفاده از نوع radio  استفاده خواهیم کرد .

Radio  دایره های تو خالی می باشند و زمانی که توسط کاربر علامت گذاری می شوند دایره  ی مشکی رنگی داخل آن قرار خواهد گرفت و آن بخش را مجزا خواهد کرد .

کاربران در بین radio  ها باید یک گزینه را انتخاب کنند و به هیچ وجه نمیتوانند دو گزینه را علامت گذاری نمایند .

در مثال زیر بیشتر با این موضوع آشنا خواهید شد :

 

<form>
<input type="radio" name="sex" value="male" /> Male<br />
<input type="radio" name="sex" value="female" /> Female
</form>

 

 

بعد از اجرای سند اچ تی ام ال بالا مرورگر بصورت زیر به نمایش در خواهد آمد :

 

Male
Female

 

فیلد 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>

 

با اجرای مثال بالا مرورگر بصورت زیر نمایش داده میشود :

 

I have a bike
I have a car

 

فیلد 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>

 

با اجرای مثال بالا مرورگر بصورت زیر نمایش داده می شود  :

 

Username:

 

در صورتی که در مثال بالا کاراکترهایی را تایپ کنید و روی دکمه ی 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  بهترین و ساده ترین راه ها را برای فراگیری طراحی سایت برای شما قررا خواهد داد . 

با آرزوی موفقیت روز افزون برای شما

ارسال نظر

عنوان نظر :
نام شما :
ایمیل :