اكواد - كيفية عمل button في html




كيف يمكنك إنشاء زر HTML يعمل كأنه رابط؟ (18)

أرغب في إنشاء زر HTML يعمل بمثابة رابط. لذلك ، عند النقر فوق الزر ، فإنه يعيد التوجيه إلى صفحة. أود أن يكون الوصول إليها ممكن ممكن.

أود أيضًا أن لا يكون هناك أي أحرف إضافية أو معلمات في عنوان URL.

كيف يمكنني تحقيق ذلك؟

استنادًا إلى الإجابات المنشورة حتى الآن ، أقوم حاليًا بما يلي:

<form method="get" action="/page2">
    <button type="submit">Continue</button>
</form>

ولكن المشكلة في هذا هي أنه في Safari و Internet Explorer ، يضيف رمز علامة استفهام إلى نهاية عنوان URL. أحتاج إلى إيجاد حل لا يضيف أي أحرف إلى نهاية عنوان URL.

هناك حلّان آخران لإجراء ذلك: استخدام جافا سكريبت أو تصميم رابط لتبدو وكأنها زر.

باستخدام جافا سكريبت:

<button onclick="window.location.href='/page2'">Continue</button>

ولكن من الواضح أن هذا يتطلب جافا سكريبت ، ولهذا السبب ، فإنه لا يمكن الوصول إليه من قبل القراء. نقطة الرابط هي الذهاب إلى صفحة أخرى. لذا فإن محاولة جعل زر يتصرف مثل الارتباط هو الحل الخاطئ. اقتراحي هو أنه يجب عليك استخدام رابط وطرازه لتبدو وكأنها زر .

<a href="/link/to/page2">Continue</a>

HTML

طريقة HTML البسيطة هي وضعه في <form> حيث تحدد عنوان URL الهدف المطلوب في سمة action .

<form action="http://google.com">
    <input type="submit" value="Go to Google" />
</form>

إذا لزم الأمر ، قم بتعيين display: inline; CSS display: inline; في النموذج للاحتفاظ بها في التدفق مع النص المحيط. بدلاً من <input type="submit"> في المثال أعلاه ، يمكنك أيضًا استخدام <button type="submit"> . والفرق الوحيد هو أن عنصر <button> يسمح للأطفال.

كنت تتوقع بشكل بديهي أن تكون قادرًا على استخدام <button href="http://google.com"> المماثل لعنصر <a> ، ولكن للأسف لا ، هذه السمة غير موجودة وفقًا لمواصفات HTML .

CSS

إذا كان CSS مسموحًا به ، <a> عليك سوى استخدام <a> التي تبدو وكأنها زر تستخدم ميزة appearance بين آخرين ( لا يزال دعم Internet Explorer فقط حاليًا (يوليو 2015) سيئًا ).

<a href="http://google.com" class="button">Go to Google</a>
a.button {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
    color: initial;
}

أو اختر واحدة من هذه المكتبات CSS كثيرة مثل Bootstrap .

<a href="http://google.com" class="btn btn-default">Go to Google</a>

جافا سكريبت

إذا تم السماح بـ JavaScript ، قم بتعيين window.location.href .

<input type="button" onclick="location.href='http://google.com';" value="Go to Google" />

@ نيكولاس ، بعد أن عملت بالنسبة لي لأنك لم يكن لديك type="button" بسبب التي بدأت تتصرف كنوع الإرسال ... لذلك لدي بالفعل نوع واحد تقديم. لم يعمل بالنسبة لي .... والآن يمكنك إما إضافة فئة إلى زر أو <a> للحصول على التخطيط المطلوب:

<a href="http://www.google.com/">
    <button type="button">Click here</button>
</a>

إذا كان المظهر المرئي للزر الذي تبحث عنه في علامة ربط HTML أساسي ، يمكنك استخدام إطار عمل Bootstrap على تويتر لتنسيق أي من أزرار / أزرار HTML الشائعة التالية للظهور كزر. يرجى ملاحظة الاختلافات المرئية بين الإصدار 2 أو 3 أو 4 من الإطار:

<a class="btn" href="">Link</a>
<button class="btn" type="submit">Button</button>
<input class="btn" type="button" value="Input">
<input class="btn" type="submit" value="Submit">

Bootstrap (v4) مظهر العينة:

Bootstrap (v3) مظهر العينة:

Bootstrap (v2) مظهر العينة:


إذا كنت ترغب في إنشاء زر يتم استخدامه لعنوان URL في أي مكان ، فقم بإنشاء فئة زر لمرساة.

a.button {
    background-color: #999999;
    color: #FFFFFF !important;
    cursor: pointer;
    display: inline-block;
    font-weight: bold;
    padding: 5px 8px;
    text-align: center;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
.button:hover {
    text-decoration: none;
}

إذا كنت تستخدم نموذجًا داخليًا ، فأضف نوع السمة = "reset" مع عنصر الزر. سوف يمنع إجراء النموذج.

<button type="reset" onclick="location.href='http://www.example.com'">
    www.example.com
</button>

استخدمها كملف data-href="index.html" داخل علامة button .


الأشخاص الذين أجابوا باستخدام <a></a> السمات على <button></button> كان مفيدًا.

ولكن في الآونة الأخيرة ، واجهت مشكلة عند استخدام ارتباط داخل <form></form> .

يعتبر الزر الآن مثل / كزر إرسال (HTML5). لقد حاولت العمل بطريقة ، ووجدت هذه الطريقة.

أنشئ زر نمط CSS مثل الزر أدناه:

.btn-style{
    border : solid 1px #0088cc;
    border-radius : 6px;
    moz-border-radius : 6px;
    -webkit-box-shadow : 0px 0px 2px rgba(0,0,0,1.0);
    -moz-box-shadow : 0px 0px 2px rgba(0,0,0,1.0);
    box-shadow : 0px 0px 2px rgba(0,0,0,1.0);
    font-size : 18px;
    color : #696869;
    padding : 1px 17px;
    background : #eeeeee;
    background : -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(49%,#eeeeee), color-stop(72%,#cccccc), color-stop(100%,#eeeeee));
    background : -moz-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
    background : -webkit-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
    background : -o-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
    background : -ms-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
    background : linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
    filter : progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#eeeeee',GradientType=0 );

}

أو قم بإنشاء واحدة جديدة هنا: CSS Button Generator

ثم قم بإنشاء الرابط الخاص بك باستخدام علامة فئة سميت نمط CSS الذي قمت بإجرائه:

<a href='link.php' class='btn-style'>Link</a>

وهنا كمان:

شبيبة كمان


الطريقة الوحيدة للقيام بذلك (ما عدا فكرة BalcC's النموذجية البارعة!) هي إضافة حدث JavaScript onclick إلى الزر ، وهو ليس جيدًا لإمكانية الوصول.

هل فكرت في تصميم رابط عادي مثل زر؟ لا يمكنك تحقيق أزرار نظام التشغيل الخاصة بهذه الطريقة ، لكنها لا تزال أفضل طريقة IMO.


بخصوص الرد على BalusC ،

<form action="http://google.com">
    <input type="submit" value="Go to Google">
</form>

كنت بحاجة إلى إضافة متغيرات إلى الزر ولم أكن متأكدًا من ذلك. انتهى بي الأمر باستخدام نوع الإدخال مخفي . اعتقدت أن هذا قد يكون مفيدًا للآخرين الذين وجدوا هذه الصفحة مثلي.


بدءًا من HTML5 ، تدعم الأزرار سمة formaction . أفضل للجميع ، لا توجد حاجة لجافا سكريبت أو الخداع.

<form>
  <button formaction="http://.com">Go to !</button>
</form>

المحاذير

  • يجب أن تكون محاطة بعلامات <form> .
  • يجب أن يكون <button> type "إرسال" (أو غير محدد) ، لم أتمكن من استخدامه مع نوع "زر". الذي يحضر نقطة أدناه.
  • يتجاوز الإجراء الافتراضي في نموذج. بعبارة أخرى ، إذا قمت بذلك داخل نموذج آخر ، فسوف تتسبب في حدوث تعارض.

المرجع: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formaction دعم المتصفح: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Browser_compatibility


هل هناك أي سلبيات للقيام بشيء مثل ما يلي؟

<a class='nostyle' href='http://www.google.com/'>
    <span class='button'>Schedule</span>
</a>

حيث a.nostyle هي فئة تحتوي على تصميم a.nostyle (حيث يمكنك التخلص من التصميم القياسي للارتباط) و span.button هي فئة تحتوي على تصميم "الزر" الخاص بك (الخلفية ، الحدود ، التدرج ، إلخ.) .


هو بسيط جدا وبدون استخدام أي شكل من الأشكال. يمكنك فقط استخدام العلامة <a> مع زر داخل :).

مثله:

<a href="http://www.google.com" target="_parent"><button>Click me !</button></a>

وسوف يتم تحميل href في نفس الصفحة. تريد صفحة جديدة؟ ما عليك سوى استخدام target="_blank" .


يمكنك أيضًا تعيين type-property الأزرار على "زر" (لا تجعله يرسل النموذج) ، ثم تضمينه داخل ارتباط (يجعله يعيد توجيه المستخدم).

بهذه الطريقة يمكن أن يكون لديك زر آخر في نفس النموذج الذي يقدم النموذج ، في حالة الضرورة. وأعتقد أيضًا أنه من الأفضل في معظم الحالات تعيين طريقة النموذج والإجراء ليكون رابطًا (ما لم يكن ذلك نموذج بحث أعتقد ...)

مثال:

<form method="POST" action="/SomePath">
    <input type="text" name="somefield"/>
    <a href="www.target.com"><button type="button">Go to Target!</button></a>
    <button type="submit">submit form</button>
</form>

بهذه الطريقة يقوم الزر الأول بإعادة توجيه المستخدم ، بينما يقوم الثاني بإرسال النموذج.

كن حذرًا للتأكد من أن الزر لا يؤدي إلى أي إجراء ، لأن ذلك سيؤدي إلى حدوث تعارض. كما أشار أريوس ، يجب أن تدرك أنه ، بالنسبة للسبب أعلاه ، لا يعتبر هذا الكلام بدقة لغة HTML صحيحة ، وفقًا للمعيار. ومع ذلك فهو يعمل كما هو متوقع في Firefox و Chrome ، لكني لم أختبره بعد لـ Internet Explorer.


يمكنك ببساطة وضع علامة حول العنصر:

<a href="http://google.com" target="_blank">
<button>My Button</button>
</a>

https://jsfiddle.net/hj6gob8b/


Also you can use a button:

For example, in ASP.NET Core syntax :

// Some other tags
 <form method="post">
      <input asp-for="YourModelPropertyOrYourMethodInputName"
      value="@TheValue" type="hidden" />
      <button type="submit" class="link-button" formaction="/TheDestinationController/TheDestinationActionMethod">
      @(TextValue)
      </button>
  </form>
// Other tags...


<style>
       .link-button {
        background: none !important;
        border: none;
        padding: 0 !important;
        color: #20a8d8;
        cursor: pointer;
    }
</style>

If what you need is that it will look like a button, with emphasis on the gradient image , you can do this:

<a href="www.yourlink.com" class="btn btn-gradient"><i class="fa fa-home"> Button Text</i></a>

    <input type = "submit" name = "submit" onClick= "window.location= 'http://example.com'">

لقد استخدمت هذا الموقع الإلكتروني الذي أعمل عليه حاليًا ويعمل بشكل رائع !. إذا كنت تريد بعض التصميم الرائع أيضًا ، فضع CSS هنا.

input[type = "submit"] {
    background-color:white;
    width:200px;
    border: 3px solid #c9c9c9;
    font-size:24pt;
    margin:5px;
    color:#969696;
}
input[type = "submit"]:hover {
    color: white;
    background-color:#969696;
    transition: color 0.2s 0.05s ease;
    transition: background-color 0.2s 0.05s ease;
    cursor: pointer;
}

العمل JSFiddle here


<button onclick="location.href='http://www.example.com'" type="button">
     www.example.com</button>




htmlbutton