https://pastein.ru/t/oJD
Загрузка данных
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Элементы форм</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
line-height: 1.6;
}
h1, h3 {
text-align: center;
}
/* Стили для форм и fieldset */
form {
margin-bottom: 40px;
padding: 10px;
}
fieldset {
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 15px;
}
/* Задание 7: Legend красный и курсив */
.red-legend {
color: red;
font-style: italic;
font-weight: bold;
}
/* Стили для строк формы */
.form-row {
margin-bottom: 5px;
display: flex;
align-items: center;
}
.form-row label {
margin-right: 10px;
min-width: 100px;
}
input[type="text"],
input[type="password"], input[type="email"],
input[type="file"] {
padding: 3px;
border: 1px solid #999;
}
/* Задание 3: Ограничение размера поля возраста */
.age-input {
width: 40px; /* Аналог size="3" */
}
textarea {
resize: none; /* Чтобы пользователь не менял размер произвольно, если не нужно */
font-family: inherit;
}
/* Кнопки */
.btn-row {
margin-top: 10px;
}
button, input[type="submit"], input[type="reset"] {
padding: 5px 10px;
cursor: pointer;
}
/* Таблица для списков (Задание 13) */
.select-table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
}
.select-table td {
border: 1px solid #ccc;
padding: 10px;
vertical-align: top;
}
select {
width: 100%;
}
/* Задание 14: Image submit */
.image-submit {
cursor: pointer;
border: none;
padding: 0;
margin-left: 10px;
}
</style>
</head><body>
<!-- Задание 1 -->
<h1>Использование форм в HTML-документах</h1>
<!-- Задание 2, 3, 4 (Форма 1) -->
<!-- В задании 5 и 6 просили добавить disabled и readonly, а потом удалить.
Я оставил код "чистым" как в начале, но добавил комментарии, где были изменения. -->
<form name="myForm1">
<h3>Информация о пользователе (форма 1)</h3>
<div class="form-row">
<label>Фамилия</label>
<!-- Задание 6: здесь был добавлен readonly, потом удален -->
<input type="text" name="surname" value="Иванов">
</div>
<div class="form-row">
<label>Имя</label>
<input type="text" name="firstname" value="Иван">
</div>
<div class="form-row">
<label>Отчество</label>
<input type="text" name="patronymic" value="Иванович">
</div>
<div class="form-row">
<label>Возраст</label>
<!-- Задание 3: size="3" maxlength="3" -->
<input type="text" name="age" value="25" maxlength="3" style="width: 50px;">
</div>
<div class="form-row">
<label>Пароль</label>
<!-- Задание 3: type="password" не дает копировать текст визуально -->
<input type="password" name="pass" value="secret123">
</div>
<div class="form-row">
<label>E-mail</label>
<!-- Задание 5: здесь был disabled, потом удален -->
<input type="email" name="email" value="user@mail.ru">
</div>
<!-- Задание 4 -->
<div class="form-row">
<label>Комментарий</label>
<textarea name="comment" rows="3" cols="30">Введите здесь свой комментарий</textarea>
</div> </form>
<!-- Задание 7, 8, 9, 10 (Форма 2) -->
<form name="myForm2">
<h3>Информация о пользователе (форма 2)</h3>
<fieldset>
<!-- Задание 7: Legend красный курсив -->
<legend class="red-legend">Сведения о пользователе</legend>
<!-- Задание 8: accesskey и жирная подчеркнутая F -->
<div class="form-row">
<label><b><u>F</u></b>амилия</label>
<input type="text" name="surname" value="Иванов" accesskey="f">
</div>
<!-- Задание 9: label for="age" -->
<div class="form-row">
<label id="age-label" for="age-input">Возраст</label>
<input type="text" id="age-input" name="age" value="25" maxlength="3" style="width: 50px;">
</div>
<div class="form-row">
<label>Имя</label>
<input type="text" name="firstname" value="Иван">
</div>
<div class="form-row">
<label>Отчество</label>
<input type="text" name="patronymic" value="Иванович">
</div>
<div class="form-row">
<label>Пароль</label>
<input type="password" name="pass" value="secret123">
</div>
<div class="form-row">
<label>E-mail</label>
<input type="email" name="email" value="user@mail.ru">
</div>
<div class="form-row">
<label>Комментарий</label>
<textarea name="comment" rows="3" cols="30">Введите здесь свой комментарий</textarea>
</div>
<!-- Задание 10: Кнопка сброса -->
<div class="btn-row">
<input type="reset" value="Сброс"> </div>
</fieldset>
</form>
<!-- Задание 11 (Форма 3 - Радиокнопки) -->
<form name="myForm3">
<h3>Радиокнопки (форма 3)</h3>
<fieldset>
<legend>Моя любимая эстрадная группа</legend>
<!-- Задание 11: name="Groups", checked у одной -->
<div class="form-row"><input type="radio" name="Groups" value="Korn"> Korn</div>
<div class="form-row"><input type="radio" name="Groups" value="Metallica"> Metallica</div>
<div class="form-row"><input type="radio" name="Groups" value="Motorhead"> Motorhead</div>
<div class="form-row"><input type="radio" name="Groups" value="Ozzy"> Ozzy Osbourne</div>
<div class="form-row"><input type="radio" name="Groups" value="Rammstein" checked> Rammstein</div>
</fieldset>
</form>
<!-- Задание 12 (Форма 4 - Флажки) -->
<form name="myForm4">
<h3>Флажки (форма 4)</h3>
<fieldset>
<legend>Мои любимые эстрадные исполнители</legend>
<!-- Задание 12: checkbox, checked у одного -->
<div class="form-row"><input type="checkbox" name="singer" value="Davis"> Davis</div>
<div class="form-row"><input type="checkbox" name="singer" value="Taylor"> Taylor</div>
<div class="form-row"><input type="checkbox" name="singer" value="Stanley" checked> Stanley</div>
<div class="form-row"><input type="checkbox" name="singer" value="Kilmister"> Kilmister</div>
<div class="form-row"><input type="checkbox" name="singer" value="Dope"> Dope</div>
</fieldset>
</form>
<!-- Задание 13 (Форма 5 - Выдвижные списки) -->
<form name="myForm5">
<h3>Выдвижные списки (форма 5)</h3>
<fieldset>
<legend>Десять штатов США</legend>
<table class="select-table">
<tr>
<!-- Ячейка 1: Простой список -->
<td>
<select name="state1">
<option value="California">California</option>
<option value="Texas">Texas</option>
<option value="Florida" selected>Florida</option> <!-- 3-я опция -->
<option value="New York">New York</option>
<option value="Pennsylvania">Pennsylvania</option>
<option value="Illinois">Illinois</option>
<option value="Ohio">Ohio</option>
<option value="Georgia">Georgia</option> <option value="Michigan">Michigan</option>
<option value="North Carolina">North Carolina</option>
</select>
</td>
<!-- Ячейка 2: 5 видимых опций -->
<td>
<select name="state2" size="5">
<option value="California">California</option>
<option value="Texas">Texas</option>
<option value="Florida" selected>Florida</option>
<option value="New York">New York</option>
<option value="Pennsylvania">Pennsylvania</option>
<option value="Illinois">Illinois</option>
<option value="Ohio">Ohio</option>
<option value="Georgia">Georgia</option>
<option value="Michigan">Michigan</option>
<option value="North Carolina">North Carolina</option>
</select>
</td>
<!-- Ячейка 3: 5 видимых, множественный выбор -->
<td>
<select name="state3" size="5" multiple>
<option value="California">California</option>
<option value="Texas">Texas</option>
<option value="Florida" selected>Florida</option>
<option value="New York">New York</option>
<option value="Pennsylvania">Pennsylvania</option>
<option value="Illinois">Illinois</option>
<option value="Ohio">Ohio</option>
<option value="Georgia">Georgia</option>
<option value="Michigan">Michigan</option>
<option value="North Carolina">North Carolina</option>
</select>
</td>
</tr>
</table>
</fieldset>
</form>
<!-- Задание 14 (Форма 6 - Дополнительные элементы) -->
<form name="myForm6">
<h3>Дополнительные элементы (форма 6)</h3>
<fieldset>
<legend>Дополнительные элементы форм</legend>
<div class="form-row">
<input type="file" name="upload">
</div>
<div class="form-row">
<!-- Задание 14: type="image" отправляет форму -->
<!-- Замените sky.gif на реальный путь к картинке, если она есть --> <input type="image" src="sky.gif" alt="Отправить" class="image-submit" style="width: 50px;">
<span>(Нажмите на картинку для отправки)</span>
</div>
</fieldset>
</form>
<!-- Задание 15 (Форма 7 - Передача формы) -->
<form name="myForm7" method="get">
<h3>Передача формы (форма 7)</h3>
<fieldset>
<legend>Передача формы</legend>
<div class="form-row">
<label>Фамилия:</label>
<input type="text" name="familija" value="Ivanov">
</div>
<div class="form-row">
<label>Имя:</label>
<input type="text" name="imja" value="Ivan">
</div>
<div class="form-row">
<label>Пол:</label>
<input type="radio" name="sex" value="male"> Мужской
<input type="radio" name="sex" value="female" checked> Женский
</div>
<div class="btn-row">
<input type="reset" value="Сброс">
<input type="submit" value="Подать запрос">
</div>
</fieldset>
</form>
</body>
</html>