How to Know details of the Browser Connections to a Website

I want to know what information is being sent when I click for Submiting data on a webpage in a broswer.. such as:
1) The Port Being Accessed
2) The External Port being Used, it's Number..
3) The IP address that is being accessed and the Ip address that is being told (sent to the source Page)…

like when I click on Sign in the below Image: (just as an example)
the Information that is being sent and received and accessed…..

How to Know details of the Browser Connections to a Website