Text Input and Output - AH494

Graphic user interfaces usually use a technique called event-driven programming.

Text Box Input and Output

I scanned the whole book, and could not find the css file, '<link rel ="stylesheet" type = "text/css" href = "Styles/textBoxes.css" />' So, I removed the link in the head section.

The display still shows the following in 75% size: This was before I adjusted the fieldset tags.

Most browsers display <fieldset> with the following default values, as per W3 and it looks like this

The following displays the code which uses the displayed function further down:

<form action = "">
   <fieldset>
   <label>Type your name: </label>
   <input type = "text"
            id = "txtName" />
   <input type = "button"
         value = "click me"
         onclick = "sayHi()"/>
   <input type = "text"
            id = "txtOutput" />
   </fieldset>
</form>

One 'Em'(1em) is equal to the height of the capital letter "M" in the default font size. When applied in CSS, the Em represents either the user's default font size, or the size of the parent element's font size, if one is available.

I list the code here for reference:

<script type = "text/javascript">
   // from textBoxes.html
   function sayHi(){
      var txtName = document.getElementById("txtName");
      var txtOutput = document.getElementById("txtOutput");
      var name = txtName.value;
      txtOutput.value = "Hi there, " + name + "!"
} // end sayHi