قرار دادن دکمه در HTML

قرار دادن دکمه در HTML 496 364 نویسنده

چگونگی قرار دادن دکمه در HTML

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

در مدل دوم که آن را به نام input می شناسیم، می توان از آن به جهت ارسال اطلاعات مربوط به فرمی خاص استفاده نمود. ما در این جا برای درک و فهم بهتر شما مخاطب عزیز از چند مثال برای ایجاد و ساختن دکمه در HTML استفاده می کنیم. این مثال ا هم در قالب اچ تی ام ال خواهد بود. و هم در قالب سی اس اس. پس در ادامه با ما همراه باشید.

 

نقش دکمه ها در فرم

نقش دکمه ها در فرم

 

مثال هایی برای ایجاد دکمه در HTML و CSS

 

<body>

<button onclick=”alert(‘به وب سایت OAP خوش آمدید’)”>کلیک کن</button>

</body>

 

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

نکته ی قابل توجه در این جا این موضوع می باشد که همیشه به صورت پیش فرض دکمه ی ما به صورت یک مستطیل با خطوط شکسته شکل می گیرد. زمانی که بر روی دکمه کلیک می کنیم، کادری برای ما باز خواهد شد و عبارت مورد نظر ما را نمایش خواهد داد که در این مثال همان ” به وب سایت OAP خوش آمدید” است. و در زیر آن هم یک دکمه ی تایید یا OK وجود دارد. ضمنا اگر می خواستیم از آخرین نسخه ی اچ تی ام ال استفاده کنیم باید از دستور <!DOCTYPE html> برای این کار استفاده می کردیم. در مثال بعدی همین دکمه را در قالب سی اس اس خواهیم ساخت.

 

 

 

 

ساخت دکمه توسط سی اس اس

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

 

<!DOCTYPE html>

<html>

<head>

<style>

.button {

  background-color: #008000;

  border: none;

  color: white;

  padding: 10px 20px;

  text-align: center;

  font-size: 16px;

  cursor: pointer;

}

.button:hover {

  background-color: #CD5C5C;

}

</style>

</head>

<body>

<button type=”button” class=”button” onclick=”alert(‘وب سایت OAP’)”>کلیک کن</button>

</body>

</html>

 

خب در این مثال چنان که مشاهده می کنید دکمه را طوری طراحی نموده ایم که رنگ پس زمینه ی آن سبز باشد که کد رنگی آن می شود ” #008000″. ولی وقتی موس را بر روی ان می بریم رنگ دکمه جگری می شود. چنان که ملاحظه می کنید چنین افکت ها و تغییراتی را تنها می توان در سی اس اس مشاهده نمود. و کار اچ تی ام ال تنها ساختن کلیات یک شی است. و نمی توان جلوه ی خاصی را با این فریم ورک به تنهایی به صفحه ی وب بخشید. برای همین هم هست که همیشه سی اس اس را مکمل اچ تی ام ال می دانند. زیرا معمولا کار هایی را که نمی توان با اچ تی ام ال به تنهایی انجام داد. باید توسط سی اس اس صورت بدهیم. ما در این مثال استایل تعریف نمودیم. رنگ ها را شناساندیم.

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

 

دکمه عریض

دکمه عریض

 

مثال سوم درباره ی دکمه های عریض

تا به این جا با دو نوع مختلف دکمه در HTML آشنا شدیم. که اولی جلوه ی خاصی را نداشت. اما در دومی توانستیم به خاطر وجود سی اس اس تغییرات مختصری را به کار مان بدهیم. حال این سوال پیش می آید که اگر بخواهیم یک دکمه ی کاملا عریض بسازیم باید چه دستوراتی را اعمال کنیم؟ به مثال زیر توجه کنید:

<!DOCTYPE html>

<html>

<head>

<style>

.button {

  background-color: #2196F3;

  width: 100%;

  border: none;

  color: white;

  padding: 10px 20px;

  text-align: center;

  font-size: 16px;

  cursor: pointer;

}

.red{background-color:#F44336;}

.yellow{background-color:#FFEB3B;}

.green{background-color:#4CAF50;}

.purple{background-color:#9C27B0;}

</style>

</head>

<body>

<button class=”button”>کلیک کن</button> <br><br>

<button class=”button red”>کلیک کن</button> <br><br>

<button class=”button yellow”>کلیک کن</button> <br><br>

<button class=”button green”>کلیک کن</button> <br><br>

<button class=”button purple”>کلیک کن</button>

</body>

</html>

 

در این مثال پنج دکمه ی عریض را به کمک سی اس اس ساختیم. برای هر کدام رنگ جداگانه ای در نظر گرفتیم. ولی چون موضوع تنها جنبه ی مثال داشت پیغام خاصی را در هیچ یک از آن ها نگنجاندیم. در مثال بعدی با همان روش قدیمی لینک گذاری اقدام به ساخت دکمه هم می کنیم. همان که در آن از a و href استفاده می شد.

 

 

 

مثال چهارم با روش a و href

اگر خاطر تان باشد در یک مقاله طریقه ی لینک دهی را به صورت مفصلی باز گو کرده بودیم. آن جا که از این دو در کنار هم استفاده می نمودیم. در ابتدا a href را با هم و در هنگام گشودن تگ می اوردیم. و موقع بستن تگ ها فقط از اسلش a استفاده می نمودیم. در قسمتی از کد های زیر هم از همین روش استفاده شده است. لطفا به آن ها دقت کنید:

<!DOCTYPE html>

<html>

<head>

<style>

body{direction:rtl;font-family:tahoma;}

.button {

  border-radius: 4px;

  background-color: #f4511e;

  border: 2px solid #f2f2f2;

  color: #FFFFFF;

  text-align: center;

  font-size: 17px;

  padding: 12px 10px;

  width: 80px;

  transition: all 0.5s;

  cursor: pointer;

  margin: 5px;

  display:block;

}

.button span {

  cursor: pointer;

  display: inline-block;

  position: relative;

  transition: 0.5s;

}

.button span:after {

  content: ‘\00bb’;

  position: absolute;

  opacity: 0;

  top: 0;

  right: -20px;

  transition: 0.5s;

}

.button:hover span {

  padding-right: 15px;

}

.button:hover span:after {

  opacity: 1;

  right: 0;

}

.bg-red{background-color: #F44336;}

.bg-blue{background-color: #2196F3;}

.bg-purple{background-color: #9C27B0;}

.bg-green{background-color: #4CAF50;}

</style>

</head>

<body>

<a href=”#” class=”button”><span>دانلود </span></a>

<a href=”#” class=”button bg-blue”><span>دانلود </span></a>

<a href=”#” class=”button bg-red”><span>دانلود </span></a>

<a href=”#” class=”button bg-purple”><span>دانلود </span></a>

<a href=”#” class=”button bg-green”><span>دانلود </span></a>

</body>

</html>

 

 

کلیک

کلیک

 

 

توضیحاتی در مورد مثال قبلی

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

 از این تگ مرورگر هایی مانند اینترنت اکسپلورر و فایر فاکس و اپرا و سفری و در نهایت مرورگر کروم پشتیبانی می کنند. حال به این نکته می پردازیم که  باید همیشه ماهیت و کارکرد دکمه هایی را که می سازیم دقیقا مشخص کنیم. زیرا اگر این کار را انجام ندهیم. ممکن است مرورگر ما به صورت پیشفرض عملکردی را تعیین نماید. این ماهیت و کارکرد می تواند اعم از reset یا submit و یا button باشد. به طور مثال اگر دکمه ی شما برای این ساخته می شود تا اطلاعاتی را ارسال کند باید آن را با ماهیت submit معرفی کنید. مانند مثالی که در زیر آورده ایم:

<input type=”submit”>

 

 

 

 

در کنار تگ button چه صفاتی را می توان آورد؟

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

Autofocus

Disabled

Form

Formaction

Formenctype

Formmethod

Formnovalidate

Formtarget

Name

Type

value