HTML به زبان ساده (قسمت7: فرم و کار با عناصر در وب) :: V i R u s Ʒ²

V i R u s Ʒ²

هک و امنیت

V i R u s Ʒ²

هک و امنیت

Virus 32

💢 دوستانم بی دفاع و دشمنانم بی جواب نخواهند ماند 💢

موضوعات
-->
آخرین مطالب
پربیننده ترین مطالب
محبوب ترین مطالب
آخرین نظرات
  • ۶ ارديبهشت ۰۳، ۱۶:۱۵ - hidden
    test

HTML به زبان ساده (قسمت7: فرم و کار با عناصر در وب)

  • 32 Attacker ‌

سلام دوستان عزیز و علاقه مندان به زبان html ، اول عذرخواهی می کنم بابت تاخیر توو نوشتن این پست، زندگی و گرفتاریاش...   توو این پست میخوایم به کار با ابزار و فرم در html بپردازیم، مثل باتن و تکست باکس و اینا و ویژگی هاشون که برای درست کردن فرم کاربرد دارن و اگه Css و JavaScript رو هم یاد بگیرید دیگه کم کم آماده میشید برای ساخت فیک پیج و فیشینگ... 

عنصر فرم form :

عنصر form در HTML فرمی را تشکیل می دن که برای دریافت داده های ورودی کاربر استفاده می شه.  بنابراین  از تگ form استفاده می کنیم.  در فرم ها عناصری وجود داره که به اون عناصر فرم میگن، مثل عنصر Input که مهمترین عنصر فرمه و مهمترین خاصیت Input نوع type هست که شکل اونو تعیین میکنه. مثل فیلد های متن یا تکست باکس ، چک باکس ها ، رادیو باتن ها ، باتن ها و....

برای مثال، ما برای افزودن تکست باکس به فرممون از کد زیر استفاده می کنیم:

<input type="text">

ویژگی های تکست باکسTextBox:

ویژگی 1: با ویژگی Name اول یه نام برای تکست باکس انتخاب می کنیم:

<input type="text" name="textbox1" value="مقدار تکست باکس">

 

ویژگی 2: اگر خاصیت value رو برای تکست باکسمون تعریف کنیم، مقدار تکست باکس یا همون متن درون تکست باکس به طور پیش فرض همون میشه، برای تعریف مقدار برای تکست باکس، خاصیت value رو بهش اضافه می کنیم:

<input type="text" name="textbox1" value="مقدار تکست باکس">

 

ویژگی 3: اگر خاصیت Size  برای تکست باکسمون تعریف کنیم، اندازه تکست باکس به مقدار آن تعیین می شود.

برای مثال در کد زیر ما اندازه تکست باکس رو 30 تعریف کردیم:

<input type="text" name="textbox1" value="مقدار تکست باکس" size="30">

 

ویژگی 4: اگه قصد دارین که مقدار ورودی تکست باکس را محدود کنین، مثلاً به کاربر الزام کنین که تعداد حروف حداکثر 10 حرف باشه، از کد زیر استفاده می کنیم:

<input type="text" name="textbox1" value="مقدار تکست باکس" size="30" maxlength="10">

 

ویژگی 5: اگه میخواین تکست باکستون قابلیت تغییر متن رو نداشته باشه و فقط هر مقدار یا متنی که شما بهش میدین رو حفظ کنه باید از خاصیت Readonly استفاده کنید:

<input type="text" name="textbox1" value="مقدار تکست باکس" size="30" maxlength="10" readonly="readonly">

اینم از چند ویژگی تکست باکس.

برای قرار دادن تکست باکس ایمیل از کد زیر استفاده می کنیم که کاربر در آن ایمیل خود را وارد کند:

<input type="email">

 

برای تکست باکس پسورد هم از کد زیر استفاده می شود تا کاربر در آن پسورد خود را بنویسد.

که از Password char نقطه برخوردار است!

<input type="password">

 

حالا میریم سراغ باتن Button

 

ویژگی های باتنButton:

ویژگی 1: برای افزودن باتن به فرممون از کد زیر استفاده می کنیم:

<button type="button"> ButtonValue </button>

 

به جای ButtonValue مقدار باتن را وارد می کنیم.

 

ویژگی 2: برای تعیین سایز باتن از خاصیت padding در style استفاده می شه:

<button type="button" style="padding:5px;"> ButtonValue </button>

 

ویژگی 3: برای تعیین رنگ باتن از خاصیت background-color در style استفاده می شه:

<button type="button" style="padding:5px; background-color:#00ffff;"> ButtonValue </button>

که در کد بالا رنگ باتن رو آبی فیروزه ای تعیین کردیم.

 

ویژگی 4: برای تعیین فونت مقدار باتن از خاصیت font-family در style استفاده می شه:

<button type="button" style="padding:5px; background-color:#00ffff; font-family:tahoma;"> ButtonValue </button>

که در کد بالا فونت مقدار باتن را Tahoma قرار داردیم.

 

ویژگی 5: برای تعیین سایز فونت مقدار باتن از خاصیت font-size در style استفاده می شه:

<button type="button" style="padding:5px; background-color:#00ffff; font-family:tahoma; font-size:16px;"> ButtonValue </button>

که در کد بالا سایز فونت مقدار باتن را 16 پیکسل قرار داردیم.

 

نکته: اگر میخواهید که برای باتن لینک قرار دهید و کاربر با کلیک روی باتن به آن لینک هدایت شود، باتن را میان تگ <a> قرار دهید و لینک آنرا تعریف کنید که در پست قبل یاد گرفتید.

 

 

حالا میریم سراغ رادیو باتن RadioButton

 

ویژگی های رادیو باتن RadioButton:

ویژگی 1: برای افزودن رادیو باتن به فرممون از کد زیر استفاده می کنیم:

<input name="rb1" type="radio">

نام رادیو باتن را rb1 قرار دادیم.

 

ویژگی 2: میتوانید به رادیو باتن یک لیبل اختصاص دهید تا هروقت بر روی لیبل کلیک شد، رادیو باتن فعال شود. برای اختصاص دادن لیبل به رادیو باتن، ابتدا یه آیدی منحصر به فرد به رادیو باتن اختصاص می دهیم:

<input name="rb1" type="radio" id="rd1">

که در بالا آیدی را rd1 قرار دادیم.

 

سپس کد زیر را برای اختصاص لیبل مینویسیم:

<label for="rd1">مرد</label>

 

برای مثال اگر میخواهید جنسیت کاربر را دریافت کنید یک رادیو باتن و لیبل دیگر برای جنسیت زن هم تعریف کنید. (مانند شکل زیر)

                      

نکته: برخی ویژگی های باتن مانند Style با رادیو باتن مشترک است، پس نیازی به توضیح نیست...

 

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

امیدوارم از این پست لذت برده باشید.

امیدوارم موفق باشید ...

    ۱۲۹۸ نمایش

html

برنامه نویسی

برنامه نویسی وب

طراحی سایت

طراحی وب

کدهای html

نظر (۶)

  • ۱۹ مهر ۹۸ ، ۱۲:۵۶
  • Virus32
  • noob
    • بخش‌هایی از این نظر که با * مشخص شده، توسط مدیر سایت حذف شده است

    eyval haji

    harf nadari

    ******* ******************************************************* ******** *** ******* * *** ************************************************************************************ * ********* **** **** * *** **************** *********
    Virus32 MR_C0D3R ‌ :
    :)
  • ۰۹ آبان ۹۸ ، ۲۳:۰۰
  • Virus32
  • mamad

    • درود خسته نباشید 

     

    داداش یکم درباره جا گزاریشون توضیح بدع

     

    مثلا اگه بخوایم هرچی یک قسمت از صفحه بزاریم باید چیکار کنیم به حساب پیکسل باید بگیم ؟؟
    Virus32 MR_C0D3R ‌ :
    بعدها وارد css میشیم که توی اون از چیزی به اسم postion استفاده میکنیم
    که به ما این امکان رو میده که مکان یه عنصر رو توی صفحه مشخص کنیم
    یا اینکه میتونیم از margin استفاده کنیم و بصورت پیکسلی یا درصدی مشخص کنیم که یه عنصر در چه جایی قرار بگیره
    یه مثال ساده نوشتم و از postion و margin داخلش استفاده کردم که با نحوه ی اینکار آشنا بشی
    فقط حتما توصیه میکنم از همه نظر تغییرش بدی و تست بگیری و ببینی چه اتفاقی میفته...
    مثلا left رو به right تغییر بدی و غیره....
    چون position و Margin یا padding کلی ویژگی دارن که قراره توی پست های دیگه که مربوط به Css میشه به اونها اشاره کنیم
    <html>
        <head>
            <title>ViRus32</title>
        </head>
        <body>
            <input type="button" name="btn_1" value="ViRus32" style="position: fixed; top: 32%;margin-left: 23px;" />
        </body>
    </html>

  • ۱۳ آبان ۹۸ ، ۱۸:۲۰
  • Virus32
  • mamad

    • داداش دمت 

    این باعث جابه جایی 

    style="position: fixed; top: 32%;margin-left: 23px;"
    Virus32 MR_C0D3R ‌ :
    خواهش میشه
    آره دیگه هر کد سی اس اسی که داشته باشی باید توی خصوصیت style بنویسی
    مثل رنگ و اندازه و هر چیز دیگه ای...
  • ۲۳ فروردين ۹۹ ، ۱۷:۳۰
  • Virus32
  • سامان

    • سلام

    خسته نباشید

    ببخشید من الان یک فایل html دارم

    که دو تا تکست باکس داره و یه دکمه submit

    الان من اطلاعات رو که میفرستم

    چط.ری اون ور در سرور (ای اس پی سی شارپ)

    از اون استفاده کنم ؟

    منظورر کلیم اینه چطوری بین html و asp.net ارتباط برقرار کنم ؟؟
    Virus32 محمدرضا نوربخش :
    سلام و وقت بخیر
    این سوالتون رو اگه جستجو میکردید حتما جوابش رو بدست میاووردید
    ولی خب بهرحال قرعه به نام وب ما رسیده و کمکتون میکنم
    اول اینکه نمیدونم شما دارید mvc کار میکنید یا core ولی خب اگه نمیدونید بهتره بگم کد HTML تو همون ویژوال میشه نوشت
    این تکه کد رو در  پوشه اسکریپت بنویسید
    <script src="//code.jquery.com/jquery-1.10.2.js">
    </script>  
    <script type="text/javascript">  
        function sendData()   
{  
  var firstName = document.getElementById("Text1").value;  
  var lastName = document.getElementById("Text1").value; 
  $.post("Services.aspx",  
  {  
    FirstName: firstName, LastName: lastName  
  },   
         function (data, status)   
  {   
    alert(data); alert(status);  
  });  
}  
   </script>
    این تکه کد اطلاعات رو ارسال میکرد و حالا این تکه کد داده رو دریافت میکنه
    function getData()   
{  
    $.get("Services.aspx",  
        function(data, status)   
          {  
            alert("incoming Data" + data);  
        });  
}
    خب حالا باید اونارو فراخونی کنیبم که مینویسیم
    </";()inputid="btnsend" type="button" value="Send" onclick="sendData>
    </";()inputid="btnget" type="button" value="GET" onclick="getData>
    خب حالا برای دریافت اطلاعاتی که فرستادیم به صفحه ASPX.cs میریم و این کد رو مینویسیم
    (protected void Page_Load(object sender, EventArgs e   
    }  
        try    
        }      
      ["stringFirstName = Request.Form["FirstName         
             ["stringLastName = Request.Form["LastName         
            ; string response = "Data Received" + "Last Name is " + FirstName         
            ;(Response.Write(response         
    {      
         (catch (Exception ex         
       }           
           (" Response.Write("Error in Request               
       {           
    {

      امیدارم بدردتون بخوره
    یاعلی
  • ۲۴ فروردين ۹۹ ، ۰۰:۳۹
  • Virus32
  • سامان

    • بسیار ممنون ❤️🙏
  • ۰۸ دی ۹۹ ، ۱۵:۵۵
  • Virus32
  • ?????

    • میشه بگین جوری دکمه بزاریم که وقتی رو دکمه زد مثلا فیلم یا آهنگ شروع بشه
    Virus32 ولم کنید (: :
    اگه ویدئو پلیر میخوای بسازی یا اهنگ پلیر که باید هم css و js رو هم بزاری توش ...
    دکمه هم که توضیح داده شد.
    ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
    شما میتوانید از این تگهای html استفاده کنید:
    <b> یا <strong>، <em> یا <i>، <u>، <strike> یا <s>، <sup>، <sub>، <blockquote>، <code>، <pre>، <hr>، <br>، <p>، <a href="" title="">، <span style="">، <div align="">
    تجدید کد امنیتی