JSFiddle - React, Tailwind, and code Playground

by Mark Coleman

HTML

<form>
    <input type="button" value="Button" name="button"/>
    <input type="text" value="text" name="text"/>
    <select name="select">
        <option value="option">option</option>
    </select>
    <textarea name="textarea">test</textarea>
    <input type="checkbox" value="check" name="checkbox"/>
    <input type="radio" value="radio" name="radio"/>
</form>

CSS

div{
    border:solid 1px black;
}

h1{
    border:solid 1px red;
}

JavaScript

var items = $("form :input").map(function(index, elm) {
    return {name: elm.name, type:elm.type, value: $(elm).val()};
});
$.each(items, function(i, d){
    $("body").append("<div>Name:" + d.name + " Type: " +  d.type + " Value: " + d.value + "</div>");
});

$("form :input").each(function(index, elm){
    var $elm = $(elm);
    $("body").append("<h1>Name:" + $(this).attr("name") + " Type: " + $(this).attr("type") + " Value: " + $(this).val() + "</h1>");    
});