लपेटें एक HTML तत्व

Question

चारों ओर पाठ क्षेत्र वहाँ किसी भी तरह से मैं एक HTML तत्व के चारों ओर एक पाठ क्षेत्र HTML तत्व लपेट कर सकते हैं? मेरे मामले में मैं लेबल के चारों ओर पाठ क्षेत्र रैप करने के लिए चाहते हैं।

Label name: ********* 
********************* 
********************* 

कहाँ * पाठ क्षेत्र है:

यह मैं क्या हासिल करने की कोशिश है।

Answer 1

आप एचटीएमएल टैग <textarea> के अंदर टैग का उपयोग नहीं कर सकते हैं लेकिन आप वांछित स्थिति में लेबल रखने के लिए पूर्ण स्थिति का उपयोग कर सकते हैं।

उसके बाद, आप पाठ क्षेत्र की पहली पंक्ति की भरपाई के लिए सीएसएसtext-indent संपत्ति (more info on MDN) उपयोग करती हैं इसलिए लेबल यह ओवरलैप नहीं करता है सकते हैं।

div { 
 
    position: relative; 
 
} 
 

 
label { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    border: 1px solid #000; 
 
    width: 115px; 
 
    line-height: 1em; 
 
} 
 

 
textarea { 
 
    text-indent: 120px; 
 
    margin: 0; 
 
    line-height: 1.2em; 
 
}

<div> 
 
    <label>This is the label :</label> 
 
    <textarea cols="30" rows="10"></textarea> 
 
</div>

Answer 2

आप एक div तत्व में लेबल जगह div संपादन योग्य बनाने और लेबल संपादन न करने योग्य बनाने के लिए कोशिश कर सकते ...

कुछ इस तरह:

<div onClick="this.contentEditable='true';"> 
    <label onClick="this.contentEditable='false';">text 1</label> 
    text 2 
</div> 

है कि आप बस जरूरत के बाद css के साथ अपने लेबल और div की व्यवस्था और div के अंदर जानकारी का उपयोग (लेबल को छोड़कर) एक पाठ बॉक्स के अंदर पाठ के रूप में करने के लिए।

यहाँ यह कैसे काम करेगा पर एक नज़र लेने के लिए एक jsfiddle है।

Answer 3

मुझे यकीन है कि कितनी अच्छी तरह text-indent संपत्ति पाठ क्षेत्र तत्वों पर काम करता है नहीं कर रहा हूँ। पाठ क्षेत्र में पाठ की पहली पंक्ति इंडेंट करने के लिए

उपयोग text-indent संपत्ति

• स्थिति का उपयोग कर पाठ क्षेत्र के ऊपरी-बाएं कोने के साथ लेबल संरेखित और सेट एक निश्चित चौड़ाई: यदि यह काफी अच्छी तरह से काम करता है, तो आप ऐसा कर सकते हैं

Demo here

<div class="position-helper"> 
    <label>Label name:</label> 
    <textarea></textarea> 
</div> 

.position-helper { 
    position: relative; 
} 
.position-helper label { 
    position: absolute; 
    left: 1px; 
    top: 1px; 
    background-color: #F0F0F0; 
    /* font-size normalized so that em values match */ 
    font-size: 16px; 
    width: 10em; 
} 
textarea { 
    box-sizing: border-box; 
    margin: 0; 
    width: 100%; 
    /* font-size normalized so that em values match */ 
    font-size: 16px; 
    text-indent: 10em; 
} 

Answer 4

हमारे ई text-indent संपत्ति। अपने आवश्यकता के अनुसार text-indent मान संशोधित करें।

HTML:

<div> 
    <label><b>Label name:</b></label> 
    <textarea name="textarea1" id="" cols="30" rows="10" placeholder="PlaceHolder Text For the Text Area"></textarea> 
</div> 

सीएसएस:

div 
{ 
    position:relative; 
} 
label { 
    position:absolute; 
    top:0; 
    left:0; 
    border:0; 
} 
textarea { 
    text-indent:90px; 
    margin:0; 
    border:1px solid blue;  
} 

आउटपुट