Главная страница  /  Занятия  /  #8  /  Свойства и методы формы, элементы формы и работа с ними в JavaScript

Свойства и методы формы, элементы формы и работа с ними в JavaScript

Задание:

Рассказать про формы, их элементы, свойства элементов и работу с ними в JavaScript.

HTML–код (index.html):

   <!DOCTYPE html>
   
   <html lang="ru">
   
    <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Свойства и&nbsp;методы формы, элементы формы и&nbsp;работа с&nbsp;ними в&nbsp;JavaScript</title>
     <script src="scripts.js"></script>
    </head>
   
    <body>
     <form name="myForm">
      <input name="firstInput" value="1"><br><br>
      <input name="secondInput" value="2"><br><br>
      <textarea>Содержимое textarea</textarea><br><br>
      <input name="myNumber"type="radio" value="1"> Первый<br>
      <input name="myNumber" type="radio" value="2"> Второй<br>
      <input name="myNumber" type="radio" value="3" checked> Третий<br><br>
      <input name="myCheckbox" type="checkbox" value="111" checked> 111<br>
      <input name="myCheckbox" type="checkbox" value="222" checked> 222<br><br>
      <select id="mySelect">
       <option value="apple">Яблоко</option>
       <option value="pear">Груша</option>
       <option value="banana">Банан</option>
      </select>
     </form>
    </body>
   
   </html>

JS–скрипты (scripts.js):

   window.onload = function()
   {
    alert('Содержимое первого поля ввода: '+document.forms.myForm.elements.firstInput.value);
    alert('Содержимое первого поля ввода: '+document.forms.myForm.firstInput.value);
    alert('Содержимое второго поля ввода: '+document.forms[0].elements[1].value);
    alert('Содержимое textarea: '+document.forms[0].elements[2].value);
   
    var myRadio = document.getElementsByName('myNumber');
    for(var i = 0; i < myRadio.length; i++)
    {
     if(myRadio[i].checked)
     {
      alert("selected: " + myRadio[i].value);
     }
    }
   
    var myCheck = document.getElementsByName('myCheckbox');
    for(var i = 0; i < myCheck.length; i++)
    {
     if(myCheck[i].checked)
     {
      alert("selected: " + myCheck[i].value);
     }
    }
   
    document.getElementById('mySelect').options[2].selected = true;
    document.getElementById('mySelect').selectedIndex = 2;
    document.getElementById('mySelect').value = 'banana';
   };

Результат:

Результат выполнения задания можно посмотреть здесь.