I want to make a simple app with JS that identies the form fields 
 which includes the id of the field and its corresponding Text. 

For example, for the following site: <https://freeditorial.com/en/register> 

[![enter image description here](https://i.stack.imgur.com/vDWTT.png)](https://i.stack.imgur.com/vDWTT.png)
 I want for each textbox the id, and the text. For the first one this will be: 

> 
> text: Email  
> 
>  id: "user\_email"
> 
> 
> 

I can do it with the following code: 

```
form = document.getElementsByClassName("control-group")
form[0].innerText
form[0].querySelector("input").id

```

The problem is that this depends on the class name, which can change for each site. 
Is there a way to get this same data from the form? 

I'm trying with: 

```
var site_forms =  document.forms

```

If I check the text of the form the data seems to be all there:

```
site_forms[0].innerText

```

this is a segment of it:

```
<input id="user_role_ids" name="user[role_ids]" type="hidden" value="2">
<div class="control-group">
  <label for="user_email">Email</label>
  <div class="controls">
    <input type="text" value="" name="user[email]" id="user_email">
  </div>
</div>
<span id="erroremail" class="rightCol error"></span>
<div class="control-group">
  <label for="user_name">Name</label>
  <div class="controls">
    <input id="user_name" name="user[name]" size="30" type="text">
  </div>
</div>
<div class="control-group">
  <label for="user_last_name">Last Name</label>
  <div class="controls">
    <input id="user_last_name" name="user[last_name]" size="30" type="text">
  </div>
</div>
<div class="control-group">
  <label for="user_username">Name by which you publish</label>
  <div class="controls">
    <input type="text" value="" name="user[username]" id="user_username">
  </div>
</div>
<div class="control-group">
  <label for="user_country_code">Country</label>
  <div class="controls">
  <select id="user_country_id" name="user[country_id]">
    <option value="">Country</option>
    <option value="3">Afghanistan</option>
    <option value="6">Albania</option>

```

But I don't find a reliable way of extracting it.