How to Create Paragraphs in HTML Form Word Processor with Spelling Check
HTML Form Word Processing with Spelling Check for Transmission to Web Server
By: Chrysanthus Date Published: 20 May 2025
This tutorial explains How to Create Paragraphs in HTML Form Word Processing with Spelling Check, for Transmission to Web Server. An HTML form word processor is an HTML form in a webpage, that does some word processing as the user types, similar to Microsoft Word or LibreOffice Writer. There are still many commercial HTML form word processing out there, that do not do spelling check. Well, this tutorial explains how such spelling check can be done automatically. The tutorial also explains how the final content can be sent to the web server, for the ultimate display, at the client's browser.
The word processing for this project includes the topics: paragraph, bold, italic, underline, the six headers, insert hyperlink, insert image, code presentation, unordered and ordered list, and inserting a table conveniently. The inserting of a table conveniently, is another thing that many (if not most) commercial websites out there, do not even do. That skill is presented in this seven part series, free. All the knowledge in this seven part series is free.
The project is done in a minimal webpage, assuming that, that is the webpage that will be displayed at the client's browser. This is the first part of a seven part free tutorial series. At the seventh part of the series, the reader can download the complete code of the project, for use for his/her personal or commercial website. The reader is free to modify the complete code before employing into his/her website.
The author bears no responsibility for any problem that the complete code can encounter, when applying the complete code.
The Webpage Skeleton Code
The HTML skeleton code to which more useful code will be added is:
<!DOCTYPE html>
<html>
<head>
<title>Sample</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
</style>
</head>
<body>
<form method="post" action="https//www.examplee.com/produceHTML.php" onsubmit="return addToTeaxtarea()" enctype="multipart/form-data">
<label for='wordProcessor'><strong>Word Processor</strong></label><br>
<div> </div>
<textarea id='article' name='article' hidden></textarea>
<div contenteditable='true' id='wordProcessor' style='height:300px; overflow:scroll; border:solid 1px black'></div>
<p><button type='submit'>Submit</button></p>
<script type="text/ecmascript">
"use strict";
</script>
</form>
</body>
</html>
The reader should read through the skeleton code, if he/she has not already done so. Everything in the skeleton code, and more, is explained in this tutorial series.
Strategy
The container for the typing and editing (word precessing) is a div element, and not the textarea element. The textarea element is however present. When the word processing is complete, all the text with the added HTML code, becomes the content of the textarea element, and is sent to the web server, for display at the client’s browser. This happens when the form submit button is clicked.
The most important attribute for the div container is "contenteditable='true'". When this attribute is present, the end user can typed into the div; otherwise typing is not possible into the div, by the end user.
Now, as the end user types, the browser underlines (in red) wrong spellings (of words). All the major browsers do this. The web developer (programmer) does not need to write any program (or application) to check the spelling, with a contenteditable div. "contenteditable" means content-editable. When the wrong spelling is underline, the end user can right click on the wrongly spelled word. A popup menu will appear, and the end user can choose a possible correctly spelled word. That programming is not done by the web developer. It comes with the browser; and the div container should have the "contenteditable='true' " attribute.
The contenteditable div and textarea Element
The textarea and div elements are as follows:
<textarea id='article' name='article' hidden></textarea>
<div contenteditable='true' id='wordProcessor' style='height:300px; overflow:scroll; border:solid 1px black'></div>
The textarea element currently has no content, not even a space character. The div element also currently has no content, not even a space character. The textarea element is hidden from the end user. It is not seen by the end user. That is why it has the attribute without value, hidden.
Typing and editing (word processing) goes into the div element, which is coded inside the form element. When the submit button is clicked, JavaScript copies all the modified content with HTML tags added, into the textarea element, and sends to the web-server. The div element is not an HTML form input element; and so its content cannot be sent to the server. On the other hand, a textarea element is a form input element, whose content will always be sent to the web-server, when the submit button is clicked.
The ID of the textarea element is 'article'. The ID of the contenteditable div is 'wordProcessor'. These two IDs are used by JavaScript to copy all the contents of the contenteditable div, into the textarea element, and send to the web-server. At the web-server, the server script needs the name of the textarea element, which is 'article', and also needs the value of the textarea element, which is the copied contents from the contenteditable div. The JavaScript function to do that is:
function addToTeaxtarea() {
document.getElementById('article').value = document.getElementById('wordProcessor').innerHTML;
}
The contenteditable div has the style attribute, "style='height:300px; overflow:scroll; border:solid 1px black' ". The height is 300px, and its width covers the entire width of its container (in this case, the body element), as all divs would. The border is 'solid 1px black' . With the Mozilla Firefox browser, when the mouse pointer is clicked into the contenteditable div, in order to put the cursor in its top-left corner, the outline of the div becomes red.
"overflow:scroll" for the styles, means that, when the contents of the contenteditable div become longer than the height of 300px, a vertical scroll bar develops.
Paragraphing
The explanation for paragraphing in this section, is what the Mozilla Firefox browser does. It should be similar to other major browsers. When the end user types a text line in the contenteditable div and presses the Enter key, in order to continue immediately typing, in the next line below, the browser will include the HTML <br> element into the position, where the Enter key was pressed. This <br> is not seen by the end user.
Remember that the <br> is a node, in the Document Object Model (HTML elements in memory and their connections). The Document Object Model is abbreviated, DOM. The text lines in front and after the <br> element, are also nodes in DOM (text nodes).
Now, if the Enter key is pressed two times at the end of a text line, two paragraphs are formed: the one which had the preceding text line, and the one with the starting new text line. An empty paragraphs is created in between.
With Mozilla Firefox, the code for a paragraph in the contenteditable div, is "<div>content</div>" without the quotes. 'content' is what is typed in, by the end user. The div tags are not seen by the end user. An empty paragraphs is "<div></div>". If at the end of a text line, the end user presses the Enter key twice, the supposed empty internal paragraph code, would be "<div><br></div>". Here, the div element is a node having the child-node, <br>, in DOM.
It should interest the reader, that in modern web development, the div element is used in some places where the paragraph element is expected. So, do not be surprised, if the other major browsers are using the div element instead of the paragraph element in their own contenteditable div. The div element is actually a general purpose container (element) by definition. However, whether the browser uses the div element or the paragraph element, the complete code to be downloaded free, at the end of the series, operates independently of the presence of the div or p element.
The Start Tag of the Form Element and the Button Element
The start tag of the form element is:
<form method="post" action="https//www.examplee.com/produceHTML.php" onsubmit="return addToTeaxtarea()" enctype="multipart/form-data">
The attribute method to send the texxtarea content to the web-server is POST. The server script file to receive the content (value) and name of the textarea element, is produceHTML.php . The URL path to the file is "https//www.examplee.com/" In the start tag, "onsubmit='return addToTeaxtarea()' " means that, when the submit button is clicked, before the content and name of the textarea could be sent to the web-server, all the contents (copied) of the contenteditable div are sent to the textarea, as content (value); in order not to send an empty textarea content to the web-server. The code for the button is:
<button type='submit'>Submit</button>
It should be within the start and end tags of the form element. Its button type is 'submit'. With that, when clicked, the attributes of the start tag of the form element, will take effect. If its button type were 'button', it would not operate as a submit button.
Conclusion
In order to create paragraphs in HTML Form Word Processing with Spelling Check, a content-editable div has to be used. Before the modified content is sent to the web-server, the content has to first be sent into the textarea element, at the client's webpage, not seen by the client. From the textarea element, the content is sent to the web-server, with the name of the textarea element.
Within the contenteditable div, pressing the Enter key just after a text line to start the next text line, adds a <br> element at the position of the Enter key. This tag is not seen by the user. The internal code for the paragraph element in the contenteditable div, is either <p></p> or <div></div>. The complete code for the project, to be downloaded free, at the end of this series, operates independently of the div or p element, for paragraphing.
Chrys