Bookmarklet to view form info (names)

form-names.js

(function(){
  if($('#form___names').length) {
  	$('form').css('outline','');
  	$('#form___names,.form___names').remove();
  } else {
  	$('head,body').first().append('<style id="form___names">'+
  	":hover + div.form___names > div, div.form___names > div:hover { background: white; z-index:99999999; opacity: 1; } "+
  	"form:hover span.form___names { position:fixed; padding: 10px; background: white; top: 4px; left: 4px; font-size: 20px; z-index:99999999; padding: 6px; border: 3px solid gray; display: block; border-radius: 5px; } span.form___names { display:none; } "+
  	"div.form___names { display:inline-block;position:relative; } "+
  	"div.form___names div { white-space: nowrap; position:absolute; color:'+c+'; bottom:0; -webkit-transform: rotate(-12deg); -webkit-transform-origin: top left; z-index:99999998; padding: 1px 2px 2px; opacity: 0.5;} "+
  	'</style>');  	
	var colors = [ "purple", "red", "blue", "#8DC63F", "orange" ];
	$('form').each(function(i,j){
	  var c = colors[i % colors.length];
	  var f = $(this).css('outline','2px dashed '+c);
	  var fname = f.attr('name');
	  f.prepend($('<span class="form___names">').text('FORM: '+fname).css('color',c));
	  $('input, select',f).each(function(){
		var e = $(this);
		var n = e.attr('name') + ' [' + (e.attr('type')?e.attr('type'):e.prop('tagName'))+']';
		if (n) {
		  $('<div class="form___names" style="color:'+c+';"><div>#</div></div>')
			.insertAfter(e).children().text((fname||'???')+'.'+n);
		};
	  });
	});
  }
}());

/*
  Formatted as JS link:
    javascript:(function()%7B(function()%7Bif(%24('%23form___names').length)%20%7B%24('form').css('outline'%2C'')%3B%24('%23form___names%2C.form___names').remove()%3B%7D%20else%20%7B%24('head%2Cbody').first().append('%3Cstyle%20id%3D%22form___names%22%3E'%2B%22%3Ahover%20%2B%20div.form___names%20%3E%20div%2C%20div.form___names%20%3E%20div%3Ahover%20%7B%20background%3A%20white%3B%20z-index%3A99999999%3B%20opacity%3A%201%3B%20%7D%20%22%2B%22form%3Ahover%20span.form___names%20%7B%20position%3Afixed%3B%20padding%3A%2010px%3B%20background%3A%20white%3B%20top%3A%204px%3B%20left%3A%204px%3B%20font-size%3A%2020px%3B%20z-index%3A99999999%3B%20padding%3A%206px%3B%20border%3A%203px%20solid%20gray%3B%20display%3A%20block%3B%20border-radius%3A%205px%3B%20%7D%20span.form___names%20%7B%20display%3Anone%3B%20%7D%20%22%2B%22div.form___names%20%7B%20display%3Ainline-block%3Bposition%3Arelative%3B%20%7D%20%22%2B%22div.form___names%20div%20%7B%20white-space%3A%20nowrap%3B%20position%3Aabsolute%3B%20color%3A'%2Bc%2B'%3B%20bottom%3A0%3B%20-webkit-transform%3A%20rotate(-12deg)%3B%20-webkit-transform-origin%3A%20top%20left%3B%20z-index%3A99999998%3B%20padding%3A%201px%202px%202px%3B%20opacity%3A%200.5%3B%7D%20%22%2B'%3C%2Fstyle%3E')%3Bvar%20colors%20%3D%20%5B%20%22purple%22%2C%20%22red%22%2C%20%22blue%22%2C%20%22%238DC63F%22%2C%20%22orange%22%20%5D%3B%24('form').each(function(i%2Cj)%7Bvar%20c%20%3D%20colors%5Bi%20%25%20colors.length%5D%3Bvar%20f%20%3D%20%24(this).css('outline'%2C'2px%20dashed%20'%2Bc)%3Bvar%20fname%20%3D%20f.attr('name')%3Bf.prepend(%24('%3Cspan%20class%3D%22form___names%22%3E').text('FORM%3A%20'%2Bfname).css('color'%2Cc))%3B%24('input%2C%20select'%2Cf).each(function()%7Bvar%20e%20%3D%20%24(this)%3Bvar%20n%20%3D%20e.attr('name')%20%2B%20'%20%5B'%20%2B%20(e.attr('type')%3Fe.attr('type')%3Ae.prop('tagName'))%2B'%5D'%3Bif%20(n)%20%7B%24('%3Cdiv%20class%3D%22form___names%22%20style%3D%22color%3A'%2Bc%2B'%3B%22%3E%3Cdiv%3E%23%3C%2Fdiv%3E%3C%2Fdiv%3E').insertAfter(e).children().text((fname%7C%7C'%3F%3F%3F')%2B'.'%2Bn)%3B%7D%3B%7D)%3B%7D)%3B%7D%7D())%7D)()
*/