HTML: grouping input fields

Question

I have many input fields with 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="...">

I want to prevent from typing type="text" on every input. Is there any way to group inputs like this:

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

The solution can be coded with HTML, Javascript or anything else for WEB.

No need for script, simply omit the type ... as Quentin already answered — Asons
– Asons, Commented Jan 31, 2017 at 19:08

Quentin · Accepted Answer · 2017-01-31 18:50:47Z

2

No.

There is a way to group inputs: <fieldset> and <legend> but that is for grouping them based on what is going to be entered into them (such as for when you have multiple fields making up the different parts of an address).

There is no way, in HTML, to set the type attribute other than explicitly.

That said, type="text" is the default, so you can simply omit the attribute entirely (unless you depend on it for other reasons, such as with a CSS attribute selector).

You could also generate the HTML programmatically (e.g. with a template language).

answered Jan 31, 2017 at 18:50

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mohd Asim Suhail · Accepted Answer · 2017-01-31 18:51:35Z

1

You can create a javascript function to dynamically inject input tags inside a 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 : https://jsfiddle.net/abk0hvts/

answered Jan 31, 2017 at 18:51

Mohd Asim Suhail

2,3121 gold badge17 silver badges23 bronze badges

1 Comment

Mohd Asim Suhail Over a year ago

If this solved your problem then choose it as Correct Answer to help others in future.

Saumil · Accepted Answer · 2017-01-31 19:04:02Z

0

You have to use JavaScript/jQuery to achieve what you are looking for. Here is the DEMO for what you are looking for.

    <!--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>

Note: If you just want to avoid writing type='text' then you can just ignore it because 'text' is the default value for 'type' attribute so if the browser will automatically consider the input field as type=text if you have not specified value for it.

edited Jan 31, 2017 at 19:04

answered Jan 31, 2017 at 18:56

Saumil

2,5176 gold badges34 silver badges54 bronze badges

2 Comments

Bren Ginthom Over a year ago

Thank you, I will use your solution! @Saumil Soni

Saumil Over a year ago

@BrenGinthom Glad could help.

Lemjur · Accepted Answer · 2017-01-31 19:58:43Z

-1

Same solution but the code is much more readable :)

<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>

answered Jan 31, 2017 at 19:58

Lemjur

3383 silver badges11 bronze badges

Collectives™ on Stack Overflow

HTML: grouping input fields

4 Answers 4

Comments

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related