HTML5

Цель работы

Научиться использовать новые элементы и атрибуты в HTML5-формах; изучить особенности применения на странице семантических тэгов.

Задания

Задание 1

Открыть свою веб-страницу, созданную в предыдущей работе. Создать на странице форму с новыми элементами и атрибутами, перечисленными выше.

Решение

HTML5

<form autocomplete="off">
    <fieldset>
        <legend>Факультет информационных технологий</legend>                            
        <p>
            <input name="LastName" type="text" placeholder="Фамилия" autofocus required><br>
            <input name="FirstName" type="text" placeholder="Имя" required>
        </p>
                            
        <p>
            Курс:
            <input type="text" name="course" list="courses" style="width: 6vw;" required>
            <datalist id="courses">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
            </datalist>
         </p>
                            
         <p>
            Специальность:
            <input type="text" name="speciality" list="specialities" style="width: 6vw;" required>
            <datalist id="specialities">
                <option>ИСиТ</option>
                <option>ПОИТ</option>
                <option>ПОИБМС</option>
                <option>ДЭиВИ</option>
            </datalist>
         </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="Отправить">
            <input type="button" value="Очистить" onclick="form.reset()">
            <input id="print" type="button" value="Напечатать" onclick="printStudent()">
        </p>
    </fieldset>
</form>

Java Script

function printStudent(){
    let lastName = document.forms[0].LastName.value
    let firstName = document.forms[0].FirstName.value
    let course = document.forms[0].course.value
    let speciality = document.forms[0].speciality.value
    let subjects = document.forms[0].subject
    let subject = ''
                    
    for(let i = 0; i < subjects.length; i++)
        if(subjects[i].checked)
            subject += "► " + subjects[i].value + "\n"
                                
    alert("Специальность: " + speciality + "\nФамилия: " + lastName + "\nИмя: " 
        + firstName + "\nКурс: " + course + "\nПредметы:\n" + subject)
}

Факультет информационных технологий

Курс:

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

Предметы
ОИТ ОАиП История Физика Математика

Задание 2

Оформить страницу с помощью семантических тэгов: footer, header, nav. Тег footer должен содержать данные автора (ФИО, курс, группа, телефон и email). Телефон и email взять из соответствующих элементов формы. Тег nav должен содержать свою фотографию (можно взять с самой первой страницы) с соответствующей подписью.

Решение

HTML5

<header>Заголовок страницы</header>
<nav>
    <figure>
        <img src="img.png">
        <figcaption>Подпись к рисунку.</figcaption>
    </figure>
</nav>
<footer>
    Телефон: <span class="tel"></span>
    Email: <span class="mail"></span>
    © Добриян А.В. 1 курс, 10 группа
</footer>

Заголовок страницы

Предыдущая лабораторная