Elements

• Web forms can include one or more text box elements within a page. The following sample HTML markup code demonstrates creating a text field input element:
  
  <input type="text" id="textinfo" value="Text input content" />
  
  This creates a single-line text input field in the page. The following code demonstrates a text area element:
  
  <textarea rows="5" cols="10" id="multitextinfo">
  Text area content
  </textarea>
  
  Both of these text box items have some text that will display inside them when the user initially views the page. In the text input element, the content appears as the value attribute, while in the text area element, it appears as the element content between the opening and closing tags.
  
  

JavaScript Functions

• Pages with Web forms can use JavaScript functions to carry out interactive processes. The following sample code demonstrates a JavaScript function in a script section within the head section of a page:
  
  <script type="text/javascript">
  function textboxProperties() {
  //implement the function
  }
  </script>
  
  The code within this function can carry out the text box property processing. Many sites execute JavaScript functions on user interaction. The following sample input button calls the function:
  
  <input type="button" value="text properties" onclick="textboxProperties()" />
  
  

Get Properties

• JavaScript code can acquire information about a text box element. The following sample function implementation code demonstrates:
  
  alert(document.getElementById("textinfo").value);
  alert(document.getElementById("multitextinfo").innerHTML);
  
  The first line sends out the value of the text input element, by first acquiring a reference to it, then accessing the value field. The second line sends out the content of the text area element, using its "innerHTML" content, which is whatever text appears between the opening and closing element tags.
  
  

Set Properties

• JavaScript functions can set the properties of text elements, as the following sample code demonstrates:
  
  document.getElementById("textinfo").value="New content";
  document.getElementById("multitextinfo").innerHTML="More new content";
  
  These lines replace the current text content of each text element. JavaScript can also get and set the rows and columns in a text area, or various properties of the input element including its length, type and size. Developers can use these functions to create interactive effects while users are engaging with form input elements.