javascript - এইচটিএমএল ৫ টিউটোরিয়াল




কিভাবে একটি এইচটিএমএল ফর্ম ডিফল্ট জমা বাটন নির্ধারিত হয়? (10)

যদি কোন ফর্ম জমা দেওয়া হয় তবে কোনও নির্দিষ্ট বোতামের দ্বারা নয়, যেমন

  • এন্টার চাপুন
  • HTMLFormElement.submit() ব্যবহার করে

একটি ব্রাউজার কীভাবে নির্ধারণ করা উচিত যে একাধিক জমা বোতামগুলি, যদি থাকে তবে, কোনটিকে চাপার জন্য ব্যবহার করা হয়?

এই দুটি স্তরের উল্লেখযোগ্য:

  • একটি জমা বাটন সংযুক্ত একটি onclick ইভেন্ট হ্যান্ডলার কলিং
  • তথ্য ওয়েব সার্ভার ফিরে পাঠানো

আমার পরীক্ষা এতদূর দেখা গেছে যে:

  • এন্টার , ফায়ারফক্স, অপেরা এবং সাফারি চাপলে ফর্মটির প্রথম জমা বোতামটি ব্যবহার করুন
  • যখন এন্টার টিপুন , IE প্রথম জমা বোতামটি ব্যবহার করে বা অন্য কোনও অবস্থাগুলির উপর নির্ভর করে যা আমি নির্ধারণ করতে পারিনি
  • এই সব ব্রাউজার একটি JS জমা জন্য সব কিছুই ব্যবহার করুন

মান কি বলে?

এটি যদি সাহায্য করবে তবে এখানে আমার পরীক্ষা কোড (পিএইচপি শুধুমাত্র আমার পরীক্ষার পদ্ধতিতে প্রাসঙ্গিক, আমার প্রশ্নেই নয়)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
</head>

<body>

<h1>Get</h1>
<dl>
<?php foreach ($_GET as $k => $v) echo "<dt>$k</dt><dd>$v</dd>"; ?>
</dl>

<h1>Post</h1>
<dl>
<?php foreach ($_POST as $k => $v) echo "<dt>$k</dt><dd>$v</dd>"; ?>
</dl>

<form name="theForm" method="<?php echo isset($_GET['method']) ? $_GET['method'] : 'get'; ?>" action="<?php echo $_SERVER['SCRIPT_NAME']; ?>">
    <input type="text" name="method" />
    <input type="submit" name="action" value="Button 1" onclick="alert('Button 1'); return true" />
    <input type="text" name="stuff" />
    <input type="submit" name="action" value="Button 2" onclick="alert('Button 2'); return true" />
    <input type="button" value="submit" onclick="document.theForm.submit();" />
</form>

</body></html>

আন্দ্রেজজ এর বেশির ভাগই এটি নকল হয়ে গেছে ... কিন্তু এখানে একটি সহজ ক্রস ব্রাউজার সমাধান।

এই মত একটি ফর্ম নিন:

<form>
    <input/>
    <button type="submit" value="some non-default action"/>
    <button type="submit" value="another non-default action"/>
    <button type="submit" value="yet another non-default action"/>

    <button type="submit" value="default action"/>
</form>

এবং এই প্রতিক্রিয়া:

<form>
    <input/>

    <button style="overflow: visible !important; height: 0 !important; width: 0 !important; margin: 0 !important; border: 0 !important; padding: 0 !important; display: block !important;" type="submit" value="default action"/>

    <button type="submit" value="some non-default action"/>
    <button type="submit" value="another non-default action"/>
    <button type="submit" value="yet another non-default action"/>
    <button type="submit" value="still another non-default action"/>

    <button type="submit" value="default action"/>
</form>

W3C স্পেক নির্দেশ করে যে একাধিক জমা বোতাম বৈধ, তবে ব্যবহারকারী-এজেন্ট তাদের কীভাবে পরিচালনা করতে হবে তা নির্দেশিকা বাদ দেয় তবে ব্রাউজার নির্মাতারা উপযুক্ত হিসাবে প্রয়োগ করার জন্য বাকি থাকে। আমি দেখেছি তারা ফর্মটিতে প্রথম জমা বোতামটি জমা দেবেন, অথবা ফরম ফোকাস করে ফর্ম ফর্মের পরে পরবর্তী জমা বোতামটি জমা দেবেন।

দুর্ভাগ্যবশত, কেবল প্রদর্শনের একটি শৈলী যোগ করা : none; কাজ করবে না কারণ W3C স্পেক ইঙ্গিত দেয় যে কোন লুকানো উপাদান ব্যবহারকারীর ইন্টারেকশন থেকে বাদ দেওয়া উচিত। অতএব এটিকে সহজ দৃষ্টিতে লুকিয়ে রাখুন!

উপরে সমাধান একটি উদাহরণ আমি উত্পাদন নির্বাণ শেষ পর্যন্ত। এন্টার কী আঘাত করলে ডিফল্ট ফর্ম জমাটি প্রত্যাশিত আচরণ হিসাবে বিবেচিত হয়, এমনকি অন্যান্য অ-ডিফল্ট মানগুলি উপস্থিত থাকলেও এবং DOM এ ডিফল্ট জমা বোতামটি পূর্ববর্তী হয়। জাভাস্ক্রিপ্ট হ্যান্ডলার এড়ানো সময় স্পষ্ট ব্যবহারকারী ইনপুট সঙ্গে মাউস / কীবোর্ড মিথস্ক্রিয়া জন্য বোনাস।

দ্রষ্টব্য: ফর্মের মাধ্যমে ট্যাবিং কোনও ভিজ্যুয়াল উপাদানটির জন্য ফোকাস প্রদর্শন করবে না তবে এখনও অদৃশ্য বোতাম নির্বাচন করা হবে। এই সমস্যাটি এড়ানোর জন্য, কেবলমাত্র ট্যাবন্ডেক্স বৈশিষ্ট অনুযায়ী সেট করুন এবং অদৃশ্য জমা বোতামে ট্যাবিনডেক্স বৈশিষ্ট্যটি বাদ দিন। যদিও এই শৈলীগুলিকে উন্নীত করার জন্য এটি জায়গা থেকে বের হতে পারে! গুরুত্বপূর্ণ, এটিকে কোনও ফ্রেমওয়ার্ক বা বিদ্যমান বোতামের শৈলীগুলিকে এই ফিক্সের সাথে হস্তক্ষেপ করতে বাধা দেওয়া উচিত । এছাড়াও, যারা ইনলাইন শৈলীগুলি অবশ্যই দরিদ্র ফর্ম, কিন্তু আমরা এখানে ধারণাগুলি প্রমাণ করছি ... উৎপাদন কোড লিখছে না।


আপনার মন্তব্য থেকে:

এর ফলস্বরূপ, যদি আপনার একই স্ক্রিপ্টে জমা একাধিক ফর্ম থাকে তবে আপনি সেগুলিকে আলাদা করতে জমা বোতামগুলিতে নির্ভর করতে পারবেন না।

আমি প্রতিটি ফর্মের মধ্যে একটি <input type="hidden" value="form_name" />

জাভাস্ক্রিপ্ট দিয়ে জমা দিলে: ফর্মগুলিতে ইভেন্ট জমা দিন, তাদের বাটনগুলিতে ইভেন্টগুলিতে ক্লিক করবেন না। সাভি ব্যবহারকারীরা প্রায়ই তাদের মাউস স্পর্শ করে না।


আমার কাছে 11 টি জমা বোতাম সহ একটি ফর্ম ছিল, এবং ব্যবহারকারী সর্বদা প্রবেশ করানোর সময় এটি সর্বদা প্রথম জমা বোতামটি ব্যবহার করবে। আমি অন্য কোথাও পড়েছি যে এটি একটি ভাল ধারণা (খারাপ অভ্যাস) নয় যা ফর্মের একাধিক জমা বোতাম আছে এবং এটি করার সেরা উপায়টি আপনার ফর্মের কেবলমাত্র জমা বোতাম হিসাবে ডিফল্ট হিসাবে বোতামটি আছে। অন্যান্য বোতাম "TYPE = Button" এ তৈরি করা উচিত এবং একটি অন-ক্লিক ইভেন্ট যোগ করা হয়েছে যা জাভাস্ক্রিপ্টে আপনার নিজস্ব রুটিন জমা দেয়। এটার মতো কিছু :-

<SCRIPT Language="JavaScript">
function validform()
{
  // do whatever you need to validate the form, and return true or false accordingly
}

function mjsubmit()
{
  if (validform()) { document.form1.submit(); return true;}
  return false;
}
</SCRIPT>
<INPUT TYPE=BUTTON NAME="button1" VALUE="button1" onClick="document.form1.submitvalue='button1'; return mjsubmit();">
<INPUT TYPE=BUTTON NAME="button2" VALUE="button2" onClick="document.form1.submitvalue='button2'; return mjsubmit();">
<INPUT TYPE=SUBMIT NAME="button3" VALUE="button3" onClick="document.form1.submitvalue='button3'; return validform();">
<INPUT TYPE=BUTTON NAME="button4" VALUE="button4" onClick="document.form1.submitvalue='button4'; return mjsubmit();">

এখানে, বোতাম 3 ডিফল্ট, এবং আপনি প্রোগ্রামগুলি অন্য বোতামগুলির সাথে ফর্ম জমা দিলেও, mjsubmit রুটিন তাদের বৈধ করে। আছে HTH।


আমার রেসিপি:

<form>
<input type=hidden name=action value=login><!-- the magic! -->

<input type=text name=email>
<input type=text name=password>

<input type=submit name=action value=login>
<input type=submit name=action value="forgot password">
</form>

যদি কোনও বোতাম 'ক্লিক করা হয় না তবে এটি ডিফল্ট লুকানো ক্ষেত্র পাঠাবে।

যদি তারা ক্লিক করা হয়, তারা পছন্দ আছে এবং এটি মান পাস করা হয়।


আমি একই প্রশ্নের সাথে সংগ্রাম করেছি যেহেতু আমি মাঝখানে একটি বোতাম জমা দিয়েছি যা থেকে অন্য পৃষ্ঠায় জমা দেওয়া পুনঃনির্দেশিত হয়েছে, যেমন:

<button type="submit" onclick="this.form.action = '#another_page'">More</button>

যখন ব্যবহারকারী এন্টার টিপুন, তখন অন্য বোতামটির পরিবর্তে এই বাটনে ক্লিক করা হয়।

তাই আমি বহু প্রিমিয়াম বোতাম এবং বিভিন্ন দৃশ্যমানতা বিকল্পগুলি থেকে একটি তৈরি করে কিছু আদিম পরীক্ষা করেছি এবং কোন বাটনটিতে ক্লিক করা হয়েছে তা সতর্ক করে দেওয়া ইভেন্টটিতে ক্লিক করুন: https://jsfiddle.net/aqfy51om/1/

আমি পরীক্ষার জন্য ব্রাউজার এবং OS's ব্যবহার:

উইন্ডোজ

  • গুগল ক্রোম 43 (গুগল গুগল: ডি)
  • মোজিলা ফায়ারফক্স 38
  • ইন্টারনেট এক্সপ্লোরার 11
  • অপেরা 30.0

ওএসএক্স

  • গুগল ক্রোম 43
  • সাফারি 7.1.6

এই ব্রাউজারগুলির বেশিরভাগই প্রথম বোতামে ক্লিক করে দৃশ্যমানতা আইফোন এবং সাফারি প্রয়োগ করে যা তৃতীয় বোতামে ক্লিক করে যা "গোপন" কন্টেইনারের ভিতরে "দৃশ্যমান"

<div style="width: 0; height: 0; overflow: hidden;">
    <button type="submit" class="btn btn-default" onclick="alert('Hidden submit button #3 was clicked');">Hidden submit button #3</button>
</div>

তাই আমার পরামর্শ, যা আমি নিজে ব্যবহার করতে যাচ্ছি, হল:

যদি আপনার ফর্মটি বিভিন্ন অর্থ সহ একাধিক জমা বোতাম থাকে, তবে ফর্মের শুরুতে ডিফল্ট অ্যাকশন সহ জমা বোতামটি অন্তর্ভুক্ত করুন যা হয়:

  1. সম্পূর্ণরূপে দৃশ্যমান
  2. style="width: 0; height: 0; overflow: hidden;" সঙ্গে একটি ধারক মধ্যে আবৃত style="width: 0; height: 0; overflow: hidden;"

সম্পাদনা আরেকটি বিকল্প বাটন অফসেট হতে পারে (এখনও থেকে শুরুতে) style="position: absolute; left: -9999px; top: -9999px;" , এটি শুধু IE- এ চেষ্টা করেছে - কাজ করেছে, কিন্তু আমার কোন ধারণা নেই যে এটি কীভাবে স্ক্রু আপ করতে পারে, উদাহরণস্বরূপ মুদ্রণ ..


আমি ব্যবহার করেছি আরেকটি সমাধান শুধু ফর্ম এক বোতাম আছে, এবং অন্যান্য বোতাম জাল।

এখানে একটি উদাহরণ:

<form>
  <label for="amount">Amount of items</label>
  <input id="amount" type="text" name="amount" />
  <span id="checkStock" class="buttonish">Check stock</span>
  <button type="submit" name="action" value="order">Place order</button>
</form>

আমি তারপর একটি বাটন মত চেহারা span উপাদান শৈলী। একজন জেএস শ্রোতা স্প্যান পর্যবেক্ষণ করেন এবং ক্লিক করার পরে পছন্দসই ক্রিয়াকলাপ পরিচালনা করেন।

সব পরিস্থিতিতে জন্য অগত্যা সঠিক নয়, কিন্তু অন্তত এটা করতে বেশ সহজ।


এটি এখন flexbox ব্যবহার করে সমাধান করা flexbox :

এইচটিএমএল

<form>
    <h1>My Form</h1>
    <label for="text">Input:</label>
    <input type="text" name="text" id="text"/>

    <!-- Put the elements in reverse order -->
    <div class="form-actions">
        <button>Ok</button> <!-- our default action is first -->
        <button>Cancel</button>
    </div>
</form>

সিএসএস

.form-actions {
    display: flex;
    flex-direction: row-reverse; /* reverse the elements inside */
}

Explaination
ফ্লেক্স বক্স ব্যবহার করে, আমরা এমন কন্টেইনারে উপাদানগুলির ক্রমটি বিপরীত করতে পারি যা display: flex ব্যবহার করে: flex-direction: row-reverse রুল ব্যবহার করে flex-direction: row-reverse : flex-direction: row-reverse । এই কোন CSS বা লুকানো উপাদান প্রয়োজন। ফ্লেক্সবক্স সমর্থন করে না এমন পুরোনো ব্রাউজারগুলির জন্য, তারা এখনও কার্যক্ষম সমাধান পেতে পারে তবে উপাদানগুলি বিপরীত হবে না।

ডেমো
http://codepen.io/Godwin/pen/rLVKjm


বিস্ময়কর যে প্রথম বোতাম প্রবেশ সর্বদা দৃশ্যমান বা না, প্রথম বোতামে যায়, উদাহরণস্বরূপ jquery show/hide() । বৈশিষ্ট্য যোগ করা .attr('disabled', 'disabled') সম্পূর্ণরূপে জমা দেওয়ার বোতামটি পেতে বাধা দেয়। রেকর্ড ডায়ালগগুলিতে সন্নিবেশ / সম্পাদনা + মুছুন বোতাম দৃশ্যমানতা সামঞ্জস্য করার সময় এটি সমস্যা। আমি কম হ্যাকিশ এবং সহজ স্থাপন সন্নিবেশ সামনে সম্পাদনা

<button type="submit" name="action" value="update">Update</button>
<button type="submit" name="action" value="insert">Insert</button>
<button type="submit" name="action" value="delete">Delete</button>

এবং জাভাস্ক্রিপ্ট কোড ব্যবহার করুন:

$("#formId button[type='submit'][name='action'][value!='insert']").hide().attr('disabled', 'disabled');
$("#formId button[type='submit'][name='action'][value='insert']").show().removeAttr('disabled');

এইচটিএমএল 4 স্পিক থেকে :

যদি কোনও ফর্মটিতে একাধিক জমা বোতাম থাকে তবে শুধুমাত্র অ্যাক্টিভেটেড জমা বোতামটি সফল হয়।

এর অর্থ হল 1 টিরও বেশি জমা বোতাম এবং কেউ সক্রিয় (ক্লিক করা হয়নি), কেউ সফল হওয়া উচিত নয়।

এবং আমি এই অর্থে যুক্তি দিতে চাই: একাধিক জমা-বোতাম সহ একটি বিশাল ফর্ম কল্পনা করুন। শীর্ষে, একটি "এই রেকর্ডটি মুছুন" -বাটন আছে, তারপরে প্রচুর ইনপুট অনুসরণ করুন এবং নীচে একটি "এই রেকর্ডটি আপডেট করুন" -বাটন। ফর্মের নীচের অংশে একটি ক্ষেত্রের মধ্যে ঢুকতে থাকা ব্যবহারকারীটি কখনই সন্দেহ করবে না যে তিনি শীর্ষে থেকে "এই রেকর্ডটি মুছে ফেলুন"।

অতএব আমি মনে করি এটি ব্যবহারকারীর কোনও সংজ্ঞায়িত (ক্লিক) কোনও প্রথম বা অন্য কোনো বোতাম ব্যবহার করা কোনও ভাল ধারণা নয়। তবুও, ব্রাউজার অবশ্যই এটা করছেন।


সম্পাদনা করুন: দুঃখিত, এই উত্তরটি লেখার সময় আমি সাধারণ অর্থে বোতাম জমা দেওয়ার কথা ভাবছিলাম। নিচের উত্তরটি একাধিক type="submit" বোতামগুলির সম্পর্কে নয়, এটি শুধুমাত্র এক type="submit" ছেড়ে দেয় এবং অন্যকে type="button" পরিবর্তন করে। রেফারেন্স হিসাবে আমি উত্তরটি এখানে রেখে দিচ্ছি যদি এমন কাউকে সাহায্য করে যা তাদের ফর্মের type পরিবর্তন করতে পারে:

প্রবেশ করানোর সময় কোন বাটন টিপ করা হয় তা নির্ধারণ করতে, আপনি এটি type="submit" দিয়ে চিহ্নিত করতে পারেন এবং অন্যান্য বোতামগুলি তাদের type="button" দিয়ে চিহ্নিত করে। উদাহরণ স্বরূপ:

<input type="button" value="Cancel" />
<input type="submit" value="Submit" />




standards