{"id":36837,"date":"2018-03-17T03:01:57","date_gmt":"2018-03-16T17:01:57","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=36837"},"modified":"2018-03-17T09:03:45","modified_gmt":"2018-03-16T23:03:45","slug":"html-div-contenteditable-form-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-div-contenteditable-form-tutorial\/","title":{"rendered":"HTML div Contenteditable Form Tutorial"},"content":{"rendered":"
\"HTML<\/a>

HTML div Contenteditable Form Tutorial<\/p><\/div>\n

Are you like me, and think that the global attribute contenteditable<\/i><\/a>=true can be incredibly useful, so far we’ve been thinking, with HTML div<\/i><\/a> elements, in particular (but perhaps you should broaden my horizons with feedback on other element types?!). You could read more on some background to this at HTML div Versus hr Contenteditable Tutorial<\/a>.<\/p>\n

But this HTML div contenteditable=true scenario would be useful in an HTML form<\/i><\/a>, don’t you think? Can’t you imagine its multiple line characteristics as being a “flex” type replacement for the hardcoded col=? row=? of an HTML textarea<\/i><\/a> element (the one chosen for multiple line textual data in most HTML form element scenarios)?<\/p>\n

So we, rather than ruining the fun of looking up whether this is possible via advice on the “net” wrote a small web application to try this out, and even bucking our “denial of service” thoughts couldn’t sway the reality that an HTML element innerHTML<\/i><\/a> cannot, a form friend, be. You’ll notice with the HTML textarea element, though we do use the innerHTML property a lot, at least hereabouts, it also has a value<\/i><\/a> property in keeping, apparently, with HTML form element requirements to involve the name<\/i><\/a> property of form elements as …<\/p>\n


\nName=Value
\n<\/code><\/p>\n

… URL ? and & argument data pairings for method=GET and also accessible with serverside (PHP, for instance) as post data pairings, once the HTML form is submit<\/a>ted.<\/p>\n

So there’s the intervention point, we figured, on the HTML form’s onsubmit<\/i><\/a> event, to try to do something about this, and combine …<\/p>\n