HTML: Gruppieren Eingabefelder

Question

Ich habe viele Eingabefelder mit type="text"

<input type="text" id="..."> 
<input type="text" id="..."> 
<input type="text" id="..."> 
... 
<input type="text" id="..."> 
<input type="text" id="..."> 
<input type="text" id="..."> 

ich verhindern wollen auf jeden Eingang type="text" eingeben. Gibt es eine Möglichkeit, Eingaben wie folgt zu gruppieren:

Die Lösung kann mit HTML, Javascript oder irgendetwas anderem für WEB kodiert werden.

Answer 1

Sie haben verwenden JavaScript/jQuery zu erreichen, was Sie suchen. Hier ist das für was Sie suchen.

<!--Group all your input fields within a 'div' and give this div a unique ID--> 
    <div id="inputGroupText"> 
     <input id='a' /> 
     <input id='b' /> 
     <input id='c' /> 
    </div> 

<script> 
    $(document).ready(function(){ 
      //iterate through the div which groups all the 'input' fields 
      $('#inpuGroupText').children('input').each(function() { 
       // you can substitute 'text' with 'email', 'password' etc. depending on your need 
       $(this).attr('type', 'text'); 
      }); 
    }); 
</script> 

Hinweis: Wenn Sie gerade vermeiden wollen, schreiben type='text' dann können Sie ignorieren, nur weil ‚Text‘ ist der Standardwert für ‚Typ‘ Attribut so, wenn der Browser automatisch das Eingabefeld als type=text wenn man bedenkt, wird habe keinen Wert dafür angegeben.

Answer 2

Nr

Es gibt einen Weg zu Gruppeneingänge: <fieldset> und <legend> aber das ist sie für die Gruppierung auf, was in ihnen werden wird eingegeben (wie, wenn Sie mehrere Felder haben unterschiedliche bilden Teile einer Adresse).

In HTML gibt es keine Möglichkeit, das Typattribut anders als explizit festzulegen.

Das heißt, type="text" ist die Standard, so können Sie einfach das Attribut ganz weglassen (es sei denn Sie es aus anderen Gründen ab, wie mit einem CSS Attributselektor).

---

Sie könnten das HTML auch programmgesteuert (z. B. mit einer Vorlagensprache) generieren.

Answer 3

Sie können eine JavaScript-Funktion dynamisch erstellen Eingangs-Tags innerhalb eines div

(function(){ 
var inject=''; 
for(var i=0;i<10;i++){ 
    inject+="<input type='text' value='"+i+"' id='id_"+i+"'/><br/>" 
} 
$('#inject').html(inject); 

})(); 


<div id="inject"> 
//input tags will be injected here after function execution 
</div> 

Demo zu injizieren: für https://jsfiddle.net/abk0hvts/

Answer 4

Gleiche Lösung aber der Code ist viel besser lesbar :)

<script> 
    $(document).ready(function() { 
     var parent = document.getElementById('autobot'); 
     var tags = parent.getElementsByTagName('input'); 
     for (var i = 0; i < tags.length; i++) { 
     tags[i].setAttribute('type', 'text'); 
     } 
    }); 
</script> 

<div id="autobot">   
    <input> 
    <input> 
    <input> 
    </div>