<!--Code Segment1--> <!DOCTYPE html> <html> <head> <title>Form with String object</title> </head>
In this portion of code we are giving a title to our webpage which is "Form with String object" inside the
<title> tag, which is embedded inside the
<!--Code Segment1--> <body style="background-color:orange">
style attribute of the
<body> tag, we are specifying the CSS styling of
orange. This will set the background color of the webpage to orange.
<!--Code Segment3--> <h3>Enter your text in the given text area</h3> <form name="wordcount"> <textarea name="wordcount2" rows="12" cols="38" wrap="virtual" style="color:white;background-color:black;font-size:20px;"></textarea><br></br> <input type="button" value="Calculate Words" onClick="Countit()"> <input type="text" name="wordcount3" size="20"> </form>
In this code segment, we are giving a name to the
<form> which is
wordcount and specifying the text area, in which the user will input the text. The text area name is given as
- Number of rows in height: 12
- Number of Columns in width: 38
- Wrap attribute: virtual
(The wrap attribute specifies how the text in a text area is to be wrapped when submitted in a form.
Wrapwhen set to
virtualmeans long lines are wrapped in the
textarea, but are not wrapped in the data sent to the processing script.)
- Text color is white and font size of text is set as 20px.
- Background color is set as black for the text area.
A button is also placed with value
Calculate Words, which on pressing will show the results of the number of words i.e. invoke the
Countit() function. And a text area is specified which will display the output.
We have created a function named
Countit() inside the
<script> tag. Inside this function, we have initiated a String object
formcontent which will hold the text being entered by the user, referenced by the document element names. Then, we call the
split() function on the String object and store the result in the same object.
Use of split() function:
Split a string into an array of substrings
var str = "How are you doing today?";
var res = str.split(" ");
["How", "are", "you", "doing", "today?"]
Then we count the length of the array String object
formcontent using the length attribute of the array and output the result in the value attribute of the text element
<!--Code Segment5--> </body> </html>
This is the ending of the code segment.