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

V i R u s Ʒ²

هک و امنیت

V i R u s Ʒ²

هک و امنیت

Virus 32

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

-->
آخرین نظرات
  • ۶ ارديبهشت ۰۳، ۱۶:۱۵ - hidden
    test

سلام دوستان عزیز و علاقه مندان به زبان 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 با رادیو باتن مشترک است، پس نیازی به توضیح نیست...

 


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

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


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

نظر (۶)

بخش‌هایی از این نظر که با * مشخص شده، توسط مدیر سایت حذف شده است

eyval haji

harf nadari

******* ******************************************************* ******** *** ******* * *** ************************************************************************************ * ********* **** **** * *** **************** *********

Virus32 MR_C0D3R ‌ :
:)

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

 

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

 

مثلا اگه بخوایم هرچی یک قسمت از صفحه بزاریم باید چیکار کنیم به حساب پیکسل باید بگیم ؟؟

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>

داداش دمت 

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

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

سلام

خسته نباشید

ببخشید من الان یک فایل 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 ولم کنید (: :
اگه ویدئو پلیر میخوای بسازی یا اهنگ پلیر که باید هم 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="">
تجدید کد امنیتی