طراحی سایت | طراحی سایت تهران | طراحی سایت ارزان

با ما تماس بگیرید : 5-44251104-021
به نام بهترین طراح دنیا
  • طراحی سایت

امتیاز کاربران

ستاره غیر فعالستاره غیر فعالستاره غیر فعالستاره غیر فعالستاره غیر فعال
 

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

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

ساخت فرم در html

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

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

تگ input در html

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

تگ  Radio در html

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

 
 مرد 
 زن 

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

 تگ input

تگ text در html

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

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

تگ password در html

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

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

 
نام کاربری :   
پسورد:   

تگ 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

 
 css
html
php
 

تگ 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>

 

تگ textarea

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

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

 

 
 

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

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

 

<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 هم نهایت استفاده را برده باشید

 

 

 

درباره نويسنده

رضا رجب پور هستم کارشناسي رشته فناوري اطلاعات و ارتباطات 4 سال تجربه کاري در زمينه طراحي سايت و بهينه سازي سايت را دارم و به زبانهاي Html , CSS , CSS3 , Jquery , JavaScript , PHP تسلط کافي را دارم و مدير تيم مهندسين ساين وب که با چند تن از دوستان رشته نرم افزار و گرافيک يک تيم خلاق و با تجربه را ايجاد کرده ايم و بيش از 80 نمونه کار طراحي سايت و بهينه سازي سايت در ايران و خارج از ايران انجام داده ايم و خوشحال مي شويم که اطلاعات و تجربيات خود را در اختيار ديگران و هموطنان عزيز قرار دهيم لطفا ما را در شبکه هاي اجتماعي دنبال کنيد تا از مطالب جديد ما اطلاع پيدا کنيد با تشکر و احترام







لطفا نظر خود را بنویسید

لطفا نظر خود را بنویسید

0

نظرات کاربران

  • نظری وجود ندارد


نظرات مشتریان در مورد ما

جناب مهندس موسوی مدیر بخش IT شرکت پارس سرام : ما چهار سایت هلدینگ خود را به تیم مهندسین ساین وب سپردیم فکر نمی کردیم بتوانیم با همچین قیمتی سایتی با این کیفیت و جذاب برایمان طراحی کنند . با اینکه خودم برنامه نویس هستم ایده ها و افکت های جذابی طراحی کردند و هر چهار سایت با هم فرق دارد الان هم سایتی دیگر را به تیم مهندسین ساین وب سپرده ایم

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

جناب موسوی مدیر شرکت آژند : واقعا از طراحی سایت و ایده های خلاقانه و جذاب تیم مهندسین ساین وب شگفت زده شدم سایت من بیش از چیزی که انتظار داشتم بهتر شد ما هم در حوزه کاری خود با چند کلمه رتبه خوبی در گوگل داریم بعد از مدتی کوتاهی از آقای مهندس رجب پور مدیر تیم مهندسین ساین وب کمال تشکر را دارم

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

لطفا مارا در گوگل محبوب کنید