Свойства элементов

Рассмотрим основные элементы формы и средства для работы с ними.

input, textarea

Для большинства типов input значение доступно на чтение-запись в value:

input.value = "Новое значение";
textarea.value = "Новый текст";

<textarea> &lt;a&gt; </textarea>
<script>
  var area = document.body.children[0];
</script>

<button onclick="alert(area.value); alert(area.innerHTML);">Вывести value и  innerHTML</button>

input type="checkbox", input type="radio"

Для этих элементов можно узнать или установить текущее «отмеченное» состояние.
Оно находится в свойстве checked (true/false).

if (input.checked) { 
  alert("Чекбокс выбран");
}

Обратите внимание на разницу значения атрибута и свойства. Атрибут имеет значение «как указано в HTML», а свойство — логическое, в соответствие со стандартом.

<input type="checkbox" checked>

<script>
var input = document.body.children[0];

alert(input.checked); // *!*true*/!*

alert(input.getAttribute('checked')); // *!*пустая строка*/!*
</script>

select, option

Элементы типа select, как и input, поддерживают свойство value.

Он обычно возвращает значение (value) выбранной опции, ну а в случае <select multiple> — значение первой из них.

var selectedOptionValue = select.value;

Элемент селекта в JavaScript можно выбрать двумя путями: поставив значение select.value, либо установив свойство select.selectedIndex:

select.selectedIndex = 0; // первый элемент

Опции доступны через select.options.

Если select допускает множественный выбор (атрибут multiple), то значения можно получить/установить, сделав цикл по select.options:

<form name="form">
  <select name="genre" *!*multiple*/!*>
    <option value="blues" selected>Мягкий блюз</option>
    <option value="rock" selected>Жёсткий рок</option>
    <option value="classic">Классика</option>
  </select>
</form>

<script>
var form = document.body.children[0];
var select = form.elements.genre;

for (var i=0; i<select.options.length; i++) {
  var option = select.options[i];
*!*
  if(option.selected) {
    alert(option.value);
  }
*/!*
}
</script>

Спецификация: HTMLSelectElement.

option = new Option( text, value, defaultSelected, selected);

option = new Option("Текст", "value"); 
// создаст <option value="value">Текст</option>

option = new Option("Текст", "value", true, true);

Практика

<select>
  <option value="Rock">Рок</option>
  <option value="Blues" selected>Блюз</option>
</select>

<select>
  <option value="Rock">Рок</option>
  <option value="Blues" selected>Блюз</option>
</select>

<script>
  var select = document.body.children[0];

  // 1) 
  var selectedOption = select.options[select.selectedIndex];
  alert(selectedOption.value);

  // 2)
  var newOption = new Option("Classic", "Классика");
  select.appendChild(newOption);
 
  // 3)
  newOption.selected = true;
</script>