automatic zone recognition in web page

Firstly, I apologize for my poor English

I'm looking for a way to automatically detect a specific zone in a web page

This is a slightly different topic(subject) from web page segmentation

Assuming that you have the following web pages

<img src="[https://i.stack.imgur.com/XZpMa.jpg][1]"
<img src="[https://i.stack.imgur.com/utkCc.jpg][1]" />
<img src="[https://i.stack.imgur.com/JLPXs.jpg][1]" />

* sorry i need 10 reputations to post images, click plz

We (humans) know that certain words(red rectangles) and related areas(blue rectangles) are associated with one another, Write the contents to the input Elements. I am looking for a way to recognize the area(blue rectangles) where the input Element (one or more) related to the word(red rectangles) on the web page is gathered.

In other words, if you have a web page that needs to complete the form, A method of finding an area (including input elements) associated with a word(address, name, age, email, etc) that represents part of the form.

I am a web programmer and studied machine learning and deep learning

But I can not figure out a solution.

I welcome all sorts of approaches(DOM Based, Image-based, Supervised Learning, Unsupervised Learning, Machine Learning, deep learning, reinforcement learning ...)

I want to let you know if there are any previous research papers or utility tools that are currently in existence.

thanks for reading.