<div id="main">
  <form action="">
    <ul>
      <li>
        <input class="inputbox" type="text" name="TypeWord" value="" placeholder="Type a word here">
      </li>
      <li>
        <input class="button" type="submit" name="Submit" value="Submit word">
      </li>
    </ul>
  </form>
</div>

<div id="warning">
  <p>Oops, wrong word, please try again.</p>
</div>

@import "compass/css3";

body {
  padding: 100px;
}

ul {
  padding: 0;
}

li {
  display: inline-block;
  list-style-type: none;
}

input {
  padding: 5px;
}

#warning {
  display: none;
  color: #ff0000;
}

var words     = ['tree', 'chocolate', 'bird', 'candle', 'apple'],
    form      = document.querySelector('form'),
    warning   = document.querySelector('#warning');

form.addEventListener('submit', function(e) {
  e.preventDefault();
  
  warning.style.display = 'none';
  
  // Get the input value
  var word = document.querySelector('input[name="TypeWord"]').value;
  
  // Check the array of words, if the index is anything other than -1 then the word was matched successfully
  if (words.indexOf(word.toLowerCase()) !== -1) {
    window.location = 'https://www.google.com/search?q=' + word;
  } else {
    warning.style.display = 'block';
  }
}, true);