ساخت فرم سایت با html

اگر شما هم دوست دارید با اجزای مختلف یک فرم آشنا بشوید حتما این مطلب را مطالعه کنید تا بتوانید از تگ های مختلف در فرم خود در طراحی سایت…

  • نوشته شده توسط : رضا رجب پور
  • دسته بندی :آموزش html
  • بازدید: 7499
ساخت فرم سایت با html
Rate this blog

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

ساخت فرم طراحی سایت با html

ساخت فرم در html

برای اینکه بتوانیم یک فرم ساده طراحی کنیم باید از تگ form  استفاده کنیم.

عناصر فرم را در اینجا قرار میدهیم

تگ input در html

مهمترین تگ برای ساخت فرم تگ input  هست که شامل text,radio,password,cheakbox,file,submit  این اجزا می شود پس اگر تگ input را درست در طراحی سایت خود استفاده کنید می توانید یک فرم خیلی خوب و پر کاربرد درست کنید و در سایت های خودتان و مشتریان خودتان استفاده کنید حالا به معرفی این اجزایی که در بالا گفته ایم می پردازیم

تگ  Radio در html

یکی از مهمترین کاربردهای radio   این هست که شما مثلا می خواهید در فرم خود مشخص کنید کاربر زن هست یا مرد خوب باید از radio  استفاده کنید در فرم خود که کاربر فقط اجازه انتخاب یک گزینه رو داشته باشد  پس هر وقت خواستید از کاربر در فرم بخواهید یک گزینه رو فقط انتخاب کند از radio  استفاده کنید

{source}
<div class=”pre-wrap”>
<pre class=”language-markup”><code>
<input type=”radio” name=”subject” value=”مرد”> مرد
<input type=”radio” name=”subject” value=”زن”> زن
</code></pre>
</div>

{/source}

<input type=”radio” name=”subject” value=”مرد”> مرد
<input type=”radio” name=”subject” value=”زن”> زن

 تگ input

تگ text در html

کاربرد تست خیلی زیاد هست مثلا شما از کاربر بخواهید خودش اسمی را تایپ کند و یا بنویسید مثلا در فرم خود از کاربر بخواهید اسم شرکت خودش را تایپ کند و کاربر هم تایپ کند ساین وب یکم خود شیرینی از خودمان هم بگیم دیگه یا مثلا از کاربر بخواهید نام خودش را تایپ کند

 {source}
<div class=”pre-wrap”>
<pre class=”language-markup”><code>
<input type=”text” name=”firstname”>
</code></pre>
</div>

{/source}

<input type=”text” name=”firstname”>

تگ password در html

بیشتر در فرم هایی کاربرد دارد که شما بخواهید از کاربر پسورد خود را وارد کند پسورد بیشتر در فرم های ثبت نام در سایت کاربرد در پسورد حروف به دلیل اینکه امنیتی باشد و کاربران دیگر آن را مشاهده نکنند یا به حالت ستاره در می آید یا نقطه پر رنگ

نام کاربری :  <input type=”text” name=”username” >
پسورد:  <input type=”password” name=”password” >

{source}
<div class=”pre-wrap”>
<pre class=”language-markup”><code>
نام کاربری :  <input type=”text” name=”username” >
پسورد:  <input type=”password” name=”password” >
</code></pre>
</div>

{/source}

تگ cheakbox در html

فرض کنید شما در یک فرمی از سایت خود  از کاربران خود می خواهید علاقه مندی های خودش را بگوید یا می توانید از text  استفاده کنید یا اینکه از cheakbox ولی اصولی آن cheakbox هست چون شما چند فیلد به کاربر می دهید با توجه به نیازهایی که دارید و کاربر آن را پر می کند مثل اینکه در فرم استخدام شما چند زبان برنامه نویسی برای کاربر خود تعیین می کنید و کاربر آنها را انتخاب می کند

<input type=”checkbox” name=”vehicle” value=”css”> css<br>
<input type=”checkbox” name=”vehicle” value=”html” checked> html<br>
<input type=”checkbox” name=”vehicle” value=”php”> php

{source}
<div class=”pre-wrap”>
<pre class=”language-markup”><code>
<input type=”checkbox” name=”vehicle” value=”css”> css<br>
<input type=”checkbox” name=”vehicle” value=”html” checked> html<br>
<input type=”checkbox” name=”vehicle” value=”php”> php
</code></pre>
</div>

{/source}

تگ file  در html

خوب حالا خودتان بگید تگ file  بیشتر کجا به درد می خورد؟ خوب معلوم است وقتی می خواهید از کاربر فایلی را دریافت کنید مثلا عکس کاربر البته این را حتما رعایت کنید در تگ file  برای اینکه کاربر بخواهد فایلی را آپلود کند فیلتر کنید اگر این کار را انجام ندهید کاربر فایلی مخرب را در فرم شما آپلود می کند و… دیگه بقیش را خودتان می دانید چی میشه

 <input type=”file” name=”pic” accept=”image/*”>

تگ submit  در html

خود حالا از کاربر باید بخواهید وقتی این فرمی که با این تگ ها پر کرده است برای شما بفرستد شما باید از تگ submit استفاده کنید تا کاربر اطلاعات خود را برای شما بفرست

<input type=”submit” value=”Submit”>

یا

<input type=”image” src=”img-submit.png” alt=”Submit” width=”52″ height=”45″>

تگ select در html

این تگ خیلی کاربردی است حتما شما در بعضی از فرم مشاهده کردید که کاربر مثلا اسم استان یا کشور خود را انتخاب می کند این تگ برای این هست البته بعضی از برنامه نویس ها اشتباه می کنند و تگ text  استفاده می کنند تا کاربر هر استانی که خواست را تایپ کند

<select name=”subject”>
<option value=”تهران” selected>تهران</option>
<option value=”اصفهان”>اصفهان</option>
<option value=”شیراز” selected>شیراز</option>
<option value=”مشهد”>مشهد</option>
</select>

{source}
<select name=”subject”>
<option value=”تهران” selected>تهران</option>
<option value=”اصفهان”>اصفهان</option>
<option value=”شیراز” selected>شیراز</option>
<option value=”مشهد”>مشهد</option>
</select>

{/source}

تگ textarea

در تگ text  که نمی توانید شما از کاربر بخواهد آدرس خود را تایپ کند چون شاید داخل text  جا نشود یا مثلا قسمت نظرات یا توضیحات یک فرم شما می توانید از تگ textarea  انتخاب کنید که کاربر راحت تر بتواند پیامی را برای شما بفرست

<textarea rows=”5″ cols=”50″ name=”description”>
دیدگاهتان را در اینجا درج کنید …
</textarea>

{source}
<div class=”pre-wrap”>
<pre class=”language-markup”><code>
<textarea rows=”5″ cols=”50″ name=”description”>
دیدگاهتان را در اینجا درج کنید …
</textarea>
</code></pre>
</div>

{/source}

همیشه برای تگ های خود صفت بزارید که وقتی اطلاعات فرم را خواستید وارد پایگاه داده کنید به مشکل نخورید

این هم یک فرم تماس ساده برای کاربران عزیز سایت ساین وب

{source}
<div class=”pre-wrap”>
<pre class=”language-markup”><code>
<form>
<div>
<label for=”name”>نام و نام خانوادگی :</label>
<input type=”text” id=”name” name=”user-name” />
</div>
<div>
<label for=”mail”>آدرس ایمیل :</label>
<input type=”email” id=”mail” name=”user-mail” />
</div>
<div>
<label for=”msg”>نظر شما :</label>
<textarea id=”msg” name=”user-message”></textarea>
</div>

</form>
</code></pre>
</div>

{/source}

<form>
<div>
<label for=”name”>نام و نام خانوادگی :</label>
<input type=”text” id=”name” name=”user-name” />
</div>
<div>
<label for=”mail”>آدرس ایمیل :</label>
<input type=”email” id=”mail” name=”user-mail” />
</div>
<div>
<label for=”msg”>نظر شما :</label>
<textarea id=”msg” name=”user-message”></textarea>
</div>
<div class=”button”>
<button type=”submit”>ارسال پیام</button>
</div>

</form>

امیدواریم از این آموزش html هم نهایت استفاده را برده باشید

                        <pre>
.postbalasigndarbare {
    background: url(../images/toptextsign.png)no-repeat center center;
    position: relative;
    width: 100%;
    height: 200px;
    margin-top: -10%;
    z-index: 222;
}

.imagedarbare img{
width:100% !important;
background-attachment: fixed !important;
background-position: center center !important;
height: auto;
margin-top: -3%;
}
</pre>

مقالات مرتبط

پیشنهاد می کنیم این مطالب هم مطالعه کنید

آموزش ثبت نقشه گوگل به کمک html5 در طراحی سایت

آموزش ثبت نقشه گوگل به کمک html5

آموزش ثبت نقشه گوگل به کمک html5 در طراحی سایت به همراه ویدئو را مطالعه کنید

آینده طراحی سایت php

آینده طراحی سایت به زبان php

آیا در آینده طراحی سایت php کاربرد دارد ؟آیا طراحی سایت php می تواند جوابگو نیازهای کاربران باشد آیا طراحی…

آیا می دانید یک سایت چقدر می تواند در موفقیت شما موثر باشد؟

آیا می دانید یک سایت چقدر می تواند در موفقیت شما موثر باشد؟

اگر می خواهید بدانید که داشتن طراحی یک سایت چه مزیت هایی دارد پیشنهاد می کنیم حتما این مطلب را…

پرسش و پاسخ 0

بحث درباره این مقاله را شما آغاز کنید!

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

مشاوره رایگان تلفنی