امروز می خواهیم با هم برای طراحی سایت یک فرم 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=”زن”> زن
تگ text در html
کاربرد تست خیلی زیاد هست مثلا شما از کاربر بخواهید خودش اسمی را تایپ کند و یا بنویسید مثلا در فرم خود از کاربر بخواهید اسم شرکت خودش را تایپ کند و کاربر هم تایپ کند ساین وب یکم خود شیرینی از خودمان هم بگیم دیگه یا مثلا از کاربر بخواهید نام خودش را تایپ کند
{source}
<div class=”pre-wrap”>
<pre class=”language-markup”><code>
<input type=”text” name=”firstname”>
</code></pre>
</div>
{/source}
تگ 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 برای اینکه کاربر بخواهد فایلی را آپلود کند فیلتر کنید اگر این کار را انجام ندهید کاربر فایلی مخرب را در فرم شما آپلود می کند و… دیگه بقیش را خودتان می دانید چی میشه
تگ 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>
پرسش و پاسخ 0
بحث درباره این مقاله را شما آغاز کنید!
ارسال دیدگاه