HTML में इनपुट फॉर्म को कैसे संरेखित करें

117

मैं HTML के लिए नया हूं और रूपों का उपयोग करने का तरीका सीखने की कोशिश कर रहा हूं।

मैं अब तक का सबसे बड़ा मुद्दा रूपों को संरेखित कर रहा हूं। यहाँ मेरी वर्तमान HTML फ़ाइल का एक उदाहरण है:

<form>
 First Name:<input type="text" name="first"><br />
 Last Name:<input type="text" name="last"><br />
 Email:<input type="text" name="email"><br />
</form>

इसके साथ समस्या यह है, 'ईमेल' के बाद फील्ड बॉक्स पहले और अंतिम नाम की तुलना में रिक्ति के मामले में काफी भिन्न है। इसे बनाने का 'उचित ’तरीका क्या है ताकि वे अनिवार्य रूप से up लाइन-अप’ हों?

मैं अच्छे फॉर्म और सिंटैक्स का अभ्यास करने की कोशिश कर रहा हूं ... बहुत से लोग सीएसएस के साथ ऐसा कर सकते हैं मुझे यकीन नहीं है, मैंने अभी तक केवल एचटीएमएल की मूल बातें सीखी हैं।

html  forms  alignment 
— yoshyosh
स्रोत
तालिकाओं (यदि बिल्कुल) के बीच एक कभी-कभी लड़ाई होती है, तो आपके प्रश्न के उत्तर छूटना नहीं है, मध्य बिंदु सीम है कि <तालिकाओं> सारणीबद्ध डेटा के लिए है, यहां और अधिक देखें: stackoverflow.com/questions/88073 /…
— ट्रूफा
वास्तव में एक ही सवाल है, लेकिन जवाब W3C के उद्धरण के साथ <तालिका> टैग का उपयोग करने का सुझाव देता है: stackoverflow.com/questions/4707332
— 13

जवाबों:

62

एक और उदाहरण, यह सीएसएस का उपयोग करता है, मैंने बस कंटेनर वर्ग के साथ एक डिव में फॉर्म डाला। और निर्दिष्ट किया गया है कि भीतर निहित इनपुट तत्व कंटेनर की चौड़ाई का 100% हैं और दोनों तरफ कोई तत्व नहीं हैं।

.container {
  width: 500px;
  clear: both;
}

.container input {
  width: 100%;
  clear: both;
}
<html>

<head>
  <title>Example form</title>
</head>

<body>
  <div class="container">
    <form>
      <label>First Name</label>
      <input type="text" name="first"><br />
      <label>Last Name</label>
      <input type="text" name="last"><br />
      <label>Email</label>
      <input type="text" name="email"><br />
    </form>
  </div>
</body>

</html>
स्निपेट का विस्तार करें

— serialk
स्रोत
2
बिल्कुल सही, बस मुझे बहुत गड़बड़ के बारे में बचाया।
— null
यह कंटेनर की चौड़ाई में मेरे "सबमिट" बटन का भी विस्तार कर रहा है।
— सौरभ राणा
4
यह समाधान काम नहीं करता है। इनपुट तत्व बाएं-संरेखित नहीं हैं। नीचे दी गई तालिका का समाधान काम करता है।
— जॉनी क्यों
1
मैं एक स्पष्ट चौड़ाई सेट करने का बड़ा प्रशंसक नहीं हूं, जब आप एक के बिना कर सकते हैं ( नीचे मेरा जवाब देखें)
— क्लीमेंट
1
यह रेडियो बटन के साथ अजीब परिणाम देता है। रेडियो बटन लेबल वास्तविक रेडियो बटन के बाद लाइन दिखाता है।
— शब्दशः
134

स्वीकृत उत्तर (पिक्सेल में एक स्पष्ट चौड़ाई सेट करना) परिवर्तन करना कठिन बनाता है, और जब आपके उपयोगकर्ता एक अलग फ़ॉन्ट आकार का उपयोग करते हैं तो टूट जाता है। दूसरी ओर, सीएसएस तालिकाओं का उपयोग करना, महान काम करता है:

form  { display: table;      }
p     { display: table-row;  }
label { display: table-cell; }
input { display: table-cell; }
<form>
  <p>
    <label for="a">Short label:</label>
    <input id="a" type="text">
  </p>
  <p>
    <label for="b">Very very very long label:</label>
    <input id="b" type="text">
  </p>
</form>
स्निपेट का विस्तार करें

यहाँ एक JSField है: http://jsfiddle.net/DaS39/1/

और अगर आपको लेबल को सही-संरेखित करने की आवश्यकता है, तो केवल text-align: rightलेबल में जोड़ें : http://jsfiddle.net/DaS39/

संपादित करें: एक और अधिक ध्यान दें: सीएसएस तालिकाओं ने आपको कॉलम के साथ खेलने दिया: उदाहरण के लिए, यदि आप इनपुट फ़ील्ड को यथासंभव अधिक स्थान बनाना चाहते हैं, तो आप अपने फॉर्म में निम्नलिखित जोड़ सकते हैं

<div style="display: table-column;"></div>
<div style="display: table-column; width:100%;"></div>

आप जोड़ सकते हैं white-space: nowrapकरने के लिए labelsउस मामले में।

— मेहरबान
स्रोत
4
मुझे यह समाधान पसंद है। इसका मतलब है कि मुझे अपने कॉलम के बारे में चिंता करने की ज़रूरत नहीं है, क्योंकि यह पेज विकास के माध्यम से विकसित हो रहा है। +1
— टॉम लॉर्ड
9
@MuhammadUmer क्योंकि टेबल स्क्रीन पाठकों और कई सहायक उपकरणों को भ्रमित करेंगे, जबकि CSS तालिकाओं की प्रस्तुति और सामग्री अलग-अलग हैं। इस प्रकार आपका फॉर्म स्क्रीन रीडर या रीडिंग असिस्टेंट द्वारा आसानी से पार्स किया जा सकता है, और फिर भी अच्छी तरह से प्रदर्शित होता है।
— क्लेमेंट
3
खैर, td में फिटिंग लेबल बताता है कि यह चार्ट की तरह संगठित, सारणीबद्ध डेटा का हिस्सा है; यहाँ ऐसा नहीं है। साथ ही, HTML तालिकाओं का उपयोग करने से भविष्य में लेआउट को बदलना या विभिन्न स्क्रीन आकारों (मोबाइल फोन और टैबलेट्स के बारे में सोचना) को अनुकूलित करना कठिन हो जाता है।
— क्लेमेंट
4
मैं उसी तर्क के साथ CSS टेबल संरचना का दृढ़ता से विरोध कर रहा हूं, जो @MuhammadUmer आज तक बना रहा था! मैंने गुहार लगाई और इसे आज़माने का फैसला किया और अंत में स्विचिंग का मूल्य देखा! इसके अलावा, इसका CSS, इसलिए लंबे समय में चीजों को आसान बनाता है
— बिलीनेयर
2
आप इस समाधान के साथ कॉलम कैसे फैला सकते हैं? सबमिट बटन को केंद्र में रखने के लिए।
— यूजीनकर
31

यदि आप HTML के लिए नए हैं, तो आपके लिए एक सरल उपाय यह है कि सब कुछ ठीक करने के लिए एक तालिका का उपयोग किया जाए।

<form>
  <table>
    <tr>
      <td align="right">First Name:</td>
      <td align="left"><input type="text" name="first" /></td>
    </tr>
    <tr>
      <td align="right">Last Name:</td>
      <td align="left"><input type="text" name="last" /></td>
    </tr>
    <tr>
      <td align="right">Email:</td>
      <td align="left"><input type="text" name="email" /></td>
    </tr>
  </table>
</form>
— amonett
स्रोत
43
त्वरित और सरल समाधान। लंच ब्रेक के लिए धार्मिक सीएसएस बहस को छोड़ दें और काम पूरा करें।
— इमैनुएल बोबर्ग
3
@ क्लार्कबॉय - जो अपने काम को पूरा करने के लिए परवाह करता है।
— सॉलिडस्नेक
1
@ClarkeyBoy - सबसे अनभिज्ञ टिप्पणी? योग्य .. मैं यहाँ तुम्हारे साथ एक बहस में नहीं आना चाहता हूँ .. अगर तुम यह करना चाहते हैं जिस तरह से यह करते हैं। अगर आप इसे करना चाहते हैं तो टेबल आपके ऊपर आ जाता है। लेकिन सभी ग्राहकों या लोगों को इस बारे में परवाह नहीं होगी। उनमें से अधिकांश काम पूरा करने के बारे में परवाह करते हैं ..
— सॉलिडस्नेक
2
@ClarkeyBoy - क्या आप इस उत्तर को पढ़ते हैं, और W3C की पोस्ट: stackoverflow.com/a/4707368/40411
— J. Polfer
6
@EmmanuelBourg: क्या यह ठीक नहीं है जो सीएसएस तालिकाओं के लिए हैं? स्क्रीन पाठकों को भ्रमित किए बिना एक टेबल जैसा लेआउट प्राप्त करना? ओपी के लिए पूछे जाने वाले लेआउट वास्तव में सीएसएस तालिकाओं ( नीचे देखें ) का उपयोग करके प्राप्त करना बहुत आसान है
— क्लेमेंट
17

मुझे इनलाइन-ब्लॉक में लेबल के प्रदर्शन को बदलना और एक चौड़ाई निर्धारित करना बहुत आसान लगता है

label {
    display: inline-block;
    width:100px;
    text-align: right;
}
— बायरन
स्रोत
9

आपको एक तालिका का उपयोग करना चाहिए। तार्किक संरचना के विषय के रूप में डेटा सारणीबद्ध है: यही कारण है कि आप इसे संरेखित करना चाहते हैं, क्योंकि आप दिखाना चाहते हैं कि लेबल केवल उनके इनपुट बक्से से संबंधित नहीं हैं, बल्कि एक-दूसरे से भी दो-आयामी संरचना में हैं।

[विचार करें कि इनपुट बॉक्स के बजाय यदि आपके पास स्ट्रिंग या संख्यात्मक मान हैं तो आप क्या करेंगे।]

— कोलिन स्ट्रीट
स्रोत
2
मैं आपके दृष्टिकोण की सराहना करता हूं।
— जोनो
2

इसके लिए, मैं एक सही एचटीएमएल शब्दार्थ रखना चाहता हूं, और एक सीएसएस सरल का उपयोग करना संभव है।

कुछ इस तरह काम करेगा: 

label{
  display: block;
  float: left;
  width : 120px;    
}

एक खामी हालांकि: आपको प्रत्येक फॉर्म के लिए सही लेबल चौड़ाई चुननी पड़ सकती है, और यह आसान नहीं है यदि आपके लेबल गतिशील हो सकते हैं (उदाहरण के लिए I18N लेबल)।

— शमूएल EUSTachi
स्रोत
1

मैं परिभाषा सूचियों का उपयोग करने का एक बड़ा प्रशंसक हूं।

<dl>
<dt>Username:</dt>
<dd><input type="text" name="username" /></dd>
<dt>Password:</dt>
<dd><input type="password" name="password" /></dd>
</dl>

वे सीएसएस का उपयोग करने की शैली के लिए आसान हैं, और वे लेआउट के लिए तालिकाओं का उपयोग करने के कलंक से बचते हैं।

— एंड्रयू
स्रोत
यह आसानी से divs के साथ पूरा किया गया है ( ddबस एक ~ 40px बाएँ मार्जिन है), और किसी भी शब्दार्थ भ्रम से बचा जाता है। इसके अलावा, इन लाइन में से कोई भी एक ही लाइन पर लेबल / इनपुट नहीं करता है।
— हॉलिस्टर
1

सीएसएस का उपयोग करना

.containerdiv label {
  float:left;
  width:25%;
  text-align:right;
  margin-right:5px; /* optional */
}
.containerdiv input {
  float:left;
  width:65%;
}

यह आपको कुछ इस तरह देता है:

           label1 |input box             |
    another label |another input box     |
— Gjaa
स्रोत
आपको यह भी clearकहना होगा कि कम, चौड़ाई के लिए स्टैकिंग रूपों का उपयोग न करें
— TheMaster
0

पारंपरिक पद्धति एक तालिका का उपयोग करना है।

उदाहरण:

<table>
  <tbody>
     <tr>
        <td>
           First Name:
        </td>
        <td>
           <input type="text" name="first">
        </td>
     </tr>
     <tr>
        <td>
           Last Name:
        </td>
        <td>
           <input type="text" name="last">
        </td>
     </tr>
  </tbody>
</table>

हालाँकि, कई तर्क देंगे कि तालिकाओं को प्रतिबंधित कर रहे हैं और सीएसएस पसंद करते हैं। CSS का उपयोग करने का लाभ यह है कि आप विभिन्न तत्वों का उपयोग कर सकते हैं। डिव, ऑर्डर और अन-ऑर्डर की गई सूची से, आप एक ही लेआउट पूरा कर सकते हैं।

अंत में, आप वह उपयोग करना चाहेंगे जो आप सबसे अधिक आरामदायक हों।

संकेत: तालिकाओं के साथ आरंभ करना आसान है।

— OV वेब सॉल्यूशंस
स्रोत
1
+1 यह बताने के लिए कि उन्हें शुरू करना आसान है ... लेकिन वास्तव में डेवलपर्स को केवल डेटा के लिए तालिकाओं का सहारा लेना चाहिए (पूर्ण रेंट के लिए एक और उत्तर पर मेरी टिप्पणी देखें!)
— क्लार्कबाय
1
सीएसएस तालिकाओं का उपयोग करना उतना ही आसान है, और इसमें संबद्धता संबंधी समस्याएं नहीं हैं। देखें मेरा उत्तर नीचे।
— क्लेमेंट
0

अच्छी तरह से बहुत मूल बातों के लिए आप उन्हें तालिका में संरेखित करने का प्रयास कर सकते हैं। हालाँकि तालिका का उपयोग लेआउट के लिए बुरा है क्योंकि तालिका सामग्री के लिए है।

आप सीएसएस फ्लोटिंग तकनीक का उपयोग कर सकते हैं।

सीएसएस कोड

.styleform label{float:left;}
.styleform input{margin-left:200px;} /* this gives space for the label on the left */
.styleform .clear{clear:both;} /* prevent elements from stacking weirdly */

एचटीएमएल

<div class="styleform">
<form>
<label>First Name:</label><input type="text" name="first" /><div class="clear"></div>
<label>Last Name:</label><input type="text" name="first" /><div class="clear"></div>
<label>Email:</label><input type="text" name="first" /><div class="clear"></div>
</form>
</div>

मेरे द्वारा लिखा गया एक विस्तृत लेख IE7 फ्लोट समस्या के प्रश्न का उत्तर देते हुए पाया जा सकता है: IE7 फ्लोट सही समस्याएँ

— ट्रैकिंग
स्रोत
उदाहरणों के लिए धन्यवाद, हालांकि HTML फॉर्म अभी भी समस्या को हल नहीं करता है। यदि आप उदाहरण के लिए उनमें से किसी एक में 'फर्स्ट नेम' को बदल देते हैं, तो मैं उसी समस्या को समाप्त करता हूं जो मैंने पहली बार की थी
— योशियोश
मैंने डिजाइनरों से इसके साथ काम किया है और यह थोड़ा नाजुक है, आईएमई। इस मूल लेआउट के लिए, यह समय का 98% ठीक होगा। बहुत जटिल होने की कोशिश करें, जैसे दो-स्तंभ लेआउट, या बहु-पंक्ति लेबल, और यह मुश्किल हो जाता है।
— स्टेटिक्सन
1
@staticsan - यदि आप फ्लोट्स, क्लीयर और डिव को समझते हैं, तो आप इस तरह के लेआउट के साथ ठीक काम करेंगे और वास्तव में वे तेजी से प्रस्तुत करते हैं और आधुनिक ब्राउज़रों की तालिकाओं की तुलना में अधिक लचीले होते हैं।
— मौरिस 3
खैर, मुझे लगा कि मैं फ्लोट्स, क्लीयर और डीआईएस को समझ गया हूं, लेकिन मैं उस फॉर्म का विस्तार नहीं कर सका, जो मुझे बिना तोड़-फोड़ के दिया गया था। चाहे वह मेरी समझ में दोष था या डिजाइनर के कार्यान्वयन, तथ्य यह था कि यह नाजुक था। (दिलचस्प बात यह है कि अगला संस्करण ulटैग्स का उपयोग करके हाइब्रिड डिज़ाइन के अधिक होने जा रहा है ।)
— स्टेटिक्सन
0

मुझे पता है कि यह पहले ही उत्तर दिया जा चुका है, लेकिन मुझे उन्हें अच्छी तरह से संरेखित करने का एक नया तरीका मिला - एक अतिरिक्त लाभ के साथ - http://www.gargan.org/en/Web_Development/Form_Layout_with_CSS/ देखें

मूल रूप से आप इनपुट के चारों ओर लेबल तत्व का उपयोग करते हैं और उस का उपयोग कर संरेखित करते हैं:

<label><span>Name</span> <input /></label>
<label><span>E-Mail</span> <input /></label>
<label><span>Comment</span> <textarea></textarea></label>

और फिर सीएसएस के साथ आप बस संरेखित करें:

label {
    display:block;
    position:relative;
}

label span {
    font-weight:bold;
    position:absolute;
    left: 3px;
}

label input, label textarea, label select {
    margin-left: 120px;    
}
  • आपको लाइनब्रीक्स के लिए किसी भी गड़बड़ ब्रा की आवश्यकता नहीं है - जिसका अर्थ है कि आप गतिशील रूप से एक बहु-स्तंभ लेआउट को पूरा कर सकते हैं
  • पूरी लाइन क्लिक-सक्षम है। खासकर चेकबॉक्स के लिए यह बहुत बड़ी मदद है।
  • डायनामिक रूप से दिखाना / प्रपत्रों को छिपाना आसान है (आप केवल इनपुट की खोज करते हैं और इसके अभिभावक को छिपाते हैं -> लेबल)
  • आप पूरे लेबल को कक्षाएं असाइन कर सकते हैं, जिससे यह त्रुटि इनपुट को अधिक स्पष्ट दिखा सकता है (न केवल इनपुट फ़ील्ड के आसपास)
— निको
स्रोत
अच्छा है, लेकिन निश्चित लेबल चौड़ाई की आवश्यकता है। बड़े लेबल का पाठ इनपुट को ओवरराइड करता है।
— मूरेटो
0

क्लेमेंट का जवाब अब तक का सबसे अच्छा है। यहां कुछ हद तक बेहतर उत्तर दिया गया है, जो बाएं-केंद्र-दाएं गठबंधन बटन सहित विभिन्न संभव संरेखण दिखा रहा है:

label
{	padding-right:8px;
}

.FAligned,.FAlignIn
{	display:table;
}

.FAlignIn
{	width:100%;
}

.FRLeft,.FRRight,.FRCenter
{	display:table-row;
	white-space:nowrap;
}

.FCLeft,.FCRight,.FCCenter
{	display:table-cell;
}

.FRLeft,.FCLeft,.FILeft
{	text-align:left;
}

.FRRight,.FCRight,.FIRight
{	text-align:right;
}

.FRCenter,.FCCenter,.FICenter
{	text-align:center;
}
<form class="FAligned">
	<div class="FRLeft">
		<p class="FRLeft">
			<label for="Input0" class="FCLeft">Left:</label>
			<input id="Input0" type="text" size="30"  placeholder="Left Left Left" class="FILeft"/>
		</p>
		<p class="FRLeft">
			<label for="Input1" class="FCRight">Left Right Left:</label>
			<input id="Input1" type="text" size="30"  placeholder="Left Right Left" class="FILeft"/>
		</p>
		<p class="FRRight">
			<label for="Input2" class="FCLeft">Right Left Left:</label>
			<input id="Input2" type="text" size="30"  placeholder="Right Left Left" class="FILeft"/>
		</p>
		<p class="FRRight">
			<label for="Input3" class="FCRight">Right Right Left:</label>
			<input id="Input3" type="text" size="30"  placeholder="Right Right Left" class="FILeft"/>
		</p>
		<p class="FRLeft">
			<label for="Input4" class="FCLeft">Left Left Right:</label>
			<input id="Input4" type="text" size="30"  placeholder="Left Left Right" class="FIRight"/>
		</p>
		<p class="FRLeft">
			<label for="Input5" class="FCRight">Left Right Right:</label>
			<input id="Input5" type="text" size="30"  placeholder="Left Right Right" class="FIRight"/>
		</p>
		<p class="FRRight">
			<label for="Input6" class="FCLeft">Right Left Right:</label>
			<input id="Input6" type="text" size="30"  placeholder="Right Left Right" class="FIRight"/>
		</p>
		<p class="FRRight">
			<label for="Input7" class="FCRight">Right:</label>
			<input id="Input7" type="text" size="30"  placeholder="Right Right Right" class="FIRight"/>
		</p>
		<p class="FRCenter">
			<label for="Input8" class="FCCenter">And centralised is also possible:</label>
			<input id="Input8" type="text" size="60"  placeholder="Center in the centre" class="FICenter"/>
		</p>
	</div>
	<div class="FAlignIn">
		<div class="FRCenter">
			<div class="FCLeft"><button type="button">Button on the Left</button></div>
			<div class="FCCenter"><button type="button">Button on the Centre</button></div>
			<div class="FCRight"><button type="button">Button on the Right</button></div>
		</div>
	</div>
</form>
स्निपेट का विस्तार करें

मैंने सभी लेबल के अधिकार पर कुछ पैडिंग जोड़ दी ( padding-right:8px) उदाहरण को थोड़ा कम भयानक दिखने के लिए, लेकिन यह एक वास्तविक परियोजना में अधिक सावधानी से किया जाना चाहिए (अन्य सभी तत्वों में पैडिंग को जोड़ना भी एक अच्छा विचार होगा)।

— Cyberknight
स्रोत
-1

css मैंने इस समस्या को हल करने के लिए इस्तेमाल किया, जैसे कि Gjaa लेकिन बेहतर स्टाइल

p
{
    text-align:center;
        }
.styleform label
{
    float:left;
    width: 40%;
    text-align:right;
    }
.styleform input
{
    float:left;
    width: 30%;
    }

यहाँ मेरा HTML है, जिसका प्रयोग विशेष रूप से बिना php कोड के साधारण पंजीकरण फॉर्म के लिए किया जाता है

<form id="registration">
    <h1>Register</h1>
    <div class="styleform">
    <fieldset id="inputs">
        <p><label>Name:</label> 
          <input id="name" type="text" placeholder="Name" autofocus required>
        </p>
        <p><label>Email:</label>   
          <input id="email" type="text" placeholder="Email Address" required>
        </p>
        <p><label>Username:</label>
          <input id="username" type="text" placeholder="Username" autofocus required>
        </p>
        <p>   
          <label>Password:</label>
          <input id="password" type="password" placeholder="Password" required>
        </p>
    </fieldset>
    <fieldset id="actions">

    </fieldset>
    </div>
    <p>
          <input type="submit" id="submit" value="Register">
          </p>

यह बहुत सरल है, और मैं अभी शुरुआत कर रहा हूं, लेकिन यह काफी अच्छी तरह से काम करता है

— PA_Commons
स्रोत
-1

एक अनियंत्रित सूचियों के अंदर इनपुट टैग डालें। यहाँ एक उदाहरण है।

<ul>
Input1     
<li> <input type="text" />
Input2
<li> <input type="text" />
<ul/>

मेरे लिए काम किया!

— विवेक अय्यर
स्रोत
यह कभी काम नहीं करेगा। ULकेवल सामग्री को मार्जिन से दूर कर देगा, कुछ भी संरेखित नहीं करेगा। लाना inputमें LIपहले उन्हें (हाँ, वे गठबंधन किया जाएगा, एक सूची के रूप में, लेबल के खिलाफ नहीं) बस एक गोली जोड़ना होगा। इसके अलावा, "Input2" पिछले inputतत्व से चिपक जाएगा , क्योंकि LIबंद नहीं हैं (कोई भी नहीं हैं </li>) और <li>उस "लेबल" के लिए कोई शुरुआत नहीं है , इसलिए इसे उसी तरह से माना जाएगा, जैसा कि आम पाठ, इसलिए, संक्षिप्त रूप से किया गया है। पिछला तत्व। अंतिम, कोड में एक त्रुटि है, समापन <ul/>होना चाहिए </ul>।
— साइबरनाइट
-2 
<form>
    <div>
        <label for='username'>UserName</label>
        <input type='text' name='username' id='username' value=''>  
    </div>
</form>

CSS में आपको लेबल और इनपुट दोनों को डिस्प्ले के रूप में घोषित करना होगा: इनलाइन-ब्लॉक और अपनी आवश्यकताओं के अनुसार चौड़ाई दें। आशा है कि यह आपकी मदद करेगा। :)

— KTA
स्रोत
-4

सीधे शब्दों में कहें 

<form align="center ></from>

केवल शुरुआती टैग में संरेखित करें।

— जक गिल
स्रोत
यह काम नहीं करेगा, क्योंकि formइसमें alignविशेषता नहीं है (और यहां तक ​​कि अगर यह था, तो इसे शैली / सीएसएस के उपयोग की ओर हटा दिया जाएगा)। इसके अलावा, समापन टैग गलत है, यह होना चाहिए </form>। इसके style="text-align:center"अंदर यह परिभाषित करना संभव है formकि केंद्र में फ़ॉर्म की संपूर्ण सामग्री को क्या संरेखित किया जाएगा, लेकिन यह मूल प्रश्न क्या था। यह उनके इनपुट फ़ील्ड के खिलाफ लेबल को कभी भी संरेखित नहीं करेगा (हां, मैंने फ़ायरफ़ॉक्स 75 पर परीक्षण किया, बस सुनिश्चित होने के लिए)।
— साइबरनाइट
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.