Цель работы
Научиться создавать на веб-странице формы, изучить возможные элементы формы и их свойства, а также способы доступа к элементам формы.
Задания
Задание 1
Проанализировать код для создания формы, представленный выше. Изучить правила создания элементов формы.
Задание 2
Создать форму, содержащую элементы (текстовая область, 2 текстовых поля, список, 4 радиокнопки, 5 флажков, командные кнопки).
Решение
Html 
<form name="data">
    <fieldset>
        <legend>Форма 1</legend>
        <textarea name="fuculty" cols="20" rows="4" resize="none">
            Факультет информационных технологий
        </textarea>

        <p>
            <input type="text" placeholder="Фамилия"><br>
            <input type="text" placeholder="Имя">
        </p>

        <p>
            Специальность:
            <select name="speciality">
                <option>ИСиТ</option>
                <option>ПОИТ</option>
                <option>ПОИБМС</option>
                <option>ДЭиВИ</option>
            </select>
        </p>

        <p>
            Курс<br>
            <input type="radio" name="course" value="1">1
            <input type="radio" name="course" value="2">2
            <input type="radio" name="course" value="3">3
            <input type="radio" name="course" value="4">4
        </p>

        <p>
            Предметы<br>
            <input type="checkbox" name="subject" value="ОИТ">ОИТ
            <input type="checkbox" name="subject" value="ОАиП">ОАиП
            <input type="checkbox" name="subject" value="История">История
            <input type="checkbox" name="subject" value="Физика">Физика
            <input type="checkbox" name="subject" value="Математика">Математика
        </p>

        <p>
            <input type="submit" value="Submit">
            <input type="button" value="Reset">
        </p>

        <p>
            <input type="button" value="Напечатать">
        </p>
    </fieldset>
</form>
Форма 1


Специальность:

Курс
1 2 3 4

Предметы

Задание 3
Для кнопки «Напечатать» написать функцию, выводящую на страницу примерно такой текст (подчеркнутые фразы взять из элементов формы, используя обращение к ним по имени, а также по номеру элемента):
Факультет информационных технологий
Студент Фамилия специальность ИСиТ курс 1 должен сдавать следующие предметы:
- ОИТ
- История
- Математика
Решение
Html 
<input type="button" value="Напечатать" onclick="printText()">
Java Script 
function printText() {
    let speciality = document.forms[1].speciality
    let course = document.forms[1].course
    let subject = document.forms[1].subject
                                
    for(let i = 0; i < speciality.length; i++)
        if(speciality[i].selected)
            speciality = speciality[i].innerHTML
                                
    for(let i = 0; i < course.length; i++)
        if(course[i].checked)
            course = course[i].value
                                
    let subjectList = '<ul>'
    for(let i = 0; i < subject.length; i++)
        if(subject[i].checked)
            subjectList += ('<li>' + subject[i].value + '</li>')
    subjectList += '</ul>'
                                    
    document.write('<span class="printText">' + 
        document.forms[1].fuculty.value + '</span>'
        + 'Студент ' + document.forms[1].elements[2].value
        + ' специальность "' + speciality
        + '" курс ' + course + ' должен сдавать следующие предметы:<br>'
        + subjectList)
}
Форма 2


Специальность:

Курс
1 2 3 4

Предметы

Задание 4
Создать еще одну форму с одним элементом – списком. Заполнить список предметами, выбранными на первой форме. Можно придумать свою форму с разными элементами. Это приветствуется.
Решение
Html 
<form name="data">
    <fieldset>
        <legend>Форма 3</legend>
        <ul>

        </ul>
    </fieldset>
</form>
Java Script 
let ul = document.querySelector('ul')
let subject = document.forms[0].subject

for(let i = 0; i < subject.length; i++)
    if(subject[i].checked){
        let li = document.createElement('li')
        li.innerHTML = subject[i].value
        ul.appendChild(li)
    }
Форма 3