location_on تهران ، خیابان آزادی خیابان شهیدان (روبروی مترو حبیب اله ) برج زیتون local_phone 66073800 021
بازگشت به لیست مقالات » | پنجشنبه 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  بهترین و ساده ترین راه ها را برای فراگیری طراحی سایت برای شما قررا خواهد داد . 

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

ارسال نظر

عنوان نظر :
نام شما :
ایمیل :
آموزش HTML  - کاراکترهای رزرو شده

آموزش HTML - کاراکترهای رزرو شده

آموزش HTML  - کاراکترهای رزرو شده یکسری از کارکتر ها و علائم در html  وجود دارند که به تنهایی نمیتوانند در داخل صفحات  html قرار گیرند و ممکن است حتی در کیبرد کامپیوتر ها وجود نداشته ب ...

آموزش html  -  جاوا اسکریپت

آموزش html - جاوا اسکریپت

آموزش html  -  جاوا اسکریپت تگ script  در html  : این تگ به منظور برنامه نویسی سمت کاربر مانند جاوا اسکریپت  javascript  مورد استفاده قرار میگیرد . عنصر <script > ...

آموزش html  تگ head

آموزش html تگ head

 آموزش html  تگ head عنصر head  یکی از مهمترین تگ های html  می باشد که تگ های اساسی و اصلی سایت را در خود جای میدهد . عناصری که درون تگ head  قرار میگیرند میتوانند شامل اسکری ...

آموزش HTML  - اعلان Doctype

آموزش HTML - اعلان Doctype

آموزش HTML  - اعلان Doctype یکسری از اعلان ها در html  می باشند که کمک میکنند مرورگر بهتر و سریعتر نوع صفحات را تشخیص دهد . اعلان <!doctype> یکی از آنها می باشد که در ابتدای سند های h ...

آموزش html  - مروری بر html مقدماتی

آموزش html - مروری بر html مقدماتی

    آموزش HTML  - خلاصه ای از مراحل مقدماتی با همراهی شما تا این بخش آموزش HTML  را بصورت مقدماتی پشت سر گذاشتیم . از این پس آموزش های حرفه ای و پیشرفته ی HTML  را شروع خوا ...

آموزش html – نام رنگ ها

آموزش html – نام رنگ ها

آموزش html – نام رنگ ها تمامی مرورگر ها از نام رنگ ها بصورت کامل پشتیبانی میکنند . با استفاده از رنگ ها در html میتوان رنگ عناصر و یا پس زمینه عناصر html  را تغییر داد .در بخش زیر نام 147 ...

آموزش html - رنگها

آموزش html - رنگها

آموزش html  - رنگها : رنگها  یکی از مهمترین بخش در طراحی سایت می باشند .در طراحی سایت از رنگ ها به 3 طریق استفاده خواهد شد . 1.  از طریق نام رنگ : این روش از انتخاب رنگ بسیار محدود بو ...

آموزش HTML  - تگ iframe

آموزش HTML - تگ iframe

آموزش HTML  - تگ iframe در این آموزش و با استفاده از تگ iframe روش نمایش یک صفحه وب درون صفحه ی دیگر وب را قرار خواهیم داد . با ما همراه باشید . همانطور که از نام تگ iframe  که به معنای قا ...

آموزش HTML فرم ها

آموزش HTML فرم ها

آموزش HTML  فرم ها یکی از عناصر مهم در HTML  فرم ها می باند . فرم ها مسثول نگهداری اطلاعات از جانب کاربران می  باشد .به کمک فرم ها میتوان دریافت و ارسال اطلاعات را به سمت سرور انجام د ...

آموزش HTML  - صفحه بندی

آموزش HTML - صفحه بندی

آموزش HTML  - صفحه بندی یکی از مهم ترین بخش های طراحی سایت نحوه ی صفحه بندی و چیدمان المان ها و عناصر HTML  می باشد . چیدمان سایت ها تقریبا مشابه چیدمان مجلات و روزنامه ها حاوی ستون ها و س ...

آموزش HTML  - تگ SPAN

آموزش HTML - تگ SPAN

آموزش HTML  - تگ SPAN تگ span  یکی از عناصر inline level  و درون خطی می باشد که در مقالات قبلی در مورد آن شرح دادیم . تفاوت تگ های inline level  و block level   یک عنصر inli ...

آموزش html  - تگ DIV

آموزش html - تگ DIV

آموزش html  - تگ DIV عنصر های HTML  را از طریق تگ های DIV  و یا SPAN  گروهبندی می شوند . تگ  div  یک عنصر بلاک لول است  .( Block level ) به این معنی که درصورتی که ...

expand_less