<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Элементы html-форм и их обработка в скрипте-обработчике на PHP</title>
<link rel="stylesheet" href="styles.css">
<script src="scripts.js"></script>
</head>
<body>
<h3>Элементы <nobr>html-форм:</nobr></h3>
<form name="form1" method="post" action="action.php">
<label for="textField">Текстовое поле:</label>
<input type="text" name="textField" id="textField"><br><br>
<label for="passwordField">Поле ввода пароля:</label>
<input type="password" name="passwordField" id="passwordField"><br><br>
<label for="hiddenField">Скрытое поле:</label>
<input type="hidden" name="hiddenField" id="hiddenField" value="hiddenValue">
<hr>
Чекбоксы:<br><br>
<input type="checkbox" name="checkbox1" value="1">
Вариант первый<br>
<input type="checkbox" name="checkbox2" value="1">
Вариант второй<br>
<input type="checkbox" name="checkbox3" value="1" checked>
Вариант третий (по умолчанию)
<hr>
Радиокнопки:<br><br>
<input type="radio" name="radiobutton" value="yes">
Да
<input type="radio" name="radiobutton" value="no">
Нет
<hr>
<label>Многострочное текстовое поле:</label>
<textarea name="textarea" cols="40" rows="10"></textarea>
<hr>
<label>Список с одиночным выбором:</label>
<select name="weekDaysSingle">
<option value=1>Понедельник</option>
<option value=2>Вторник</option>
<option value=3 selected>Среда</option>
<option value=4>Четверг</option>
<option value=5>Пятница</option>
<option value=6>Суббота</option>
<option value=7>Воскресенье</option>
</select><br><br>
<label>Список со множественным выбором:</label>
<select name="weekDaysMultiple[]" size=7 multiple>
<option value=1 selected>Понедельник</option>
<option value=2>Вторник</option>
<option value=3>Среда</option>
<option value=4>Четверг</option>
<option value=5>Пятница</option>
<option value=6>Суббота</option>
<option value=7>Воскресенье</option>
</select>
<hr>
<input type="submit" value="Отправить">
<input type="reset" value="Очистить">
</form>
</body>
</html>
h3 { font-family: Arial, Tahoma, Verdana; font-size: 22px; margin: 14px 0px 16px 0px; }
hr { height: 1px; border: 0; background-color: #d0d0d0; margin: 19px 0px 20px 0px; }
form { width: 100%; max-width: 500px; box-sizing: border-box; background-color: #f0f0f0; padding: 15px; font-family: Arial, Tahoma, Verdana; font-size: 16px; color: #404040; }
input[type=text], input[type=password],
textarea, select { width: 100%; box-sizing: border-box; border: 1px solid #e0e0e0; font-family: Arial, Tahoma, Verdana; font-size: 16px; outline: 0; color: #404040; padding: 4px; }
textarea { resize: none; height: 8em; }
label { display: block; margin-bottom: 6px; }
input[type=submit], input[type=reset] { width: 130px; height: 26px; border: 1px solid #a0a0a0; font-size: 16px; background-color: #e0e0e0; color: #404040; outline: 0; }
input[type=reset] { margin-left: 4px; }
input[type=text]::placeholder { color: #d0d0d0; font-size: 14px; }
input[type=text]:focus::placeholder { opacity: 0; }
input[type=checkbox] { margin: 0px 6px 10px 0px; }
input[type=radio] { margin: 0px 6px 0px 0px; }
window.onload = function()
{
document.forms[0].onsubmit = function()
{
if(!document.forms[0].elements[0].value)
{
alert('Введите текст в текстовое поле!');
document.forms[0].elements[0].focus();
return false;
}
if(!document.forms[0].elements[1].value)
{
alert('Введите пароль в поле ввода пароля!');
document.forms[0].elements[1].focus();
return false;
}
if(!document.forms[0].elements[3].checked && !document.forms[0].elements[4].checked && !document.forms[0].elements[5].checked)
{
alert('Установите галочку хотя бы в одном чекбоксе!');
return false;
}
if(!document.forms[0].elements[6].checked && !document.forms[0].elements[7].checked)
{
alert('Сделайте выбор в группе радиокнопок!');
return false;
}
if(!document.forms[0].elements[8].value)
{
alert('Введите текст в многострочное текстовое поле!');
document.forms[0].elements[8].focus();
return false;
}
};
};
<?
echo '<h3>Элементы <nobr>html-форм:</nobr></h3>';
echo '<hr><br>';
echo "Значение текстового поля: <b>".$_POST['textField']."</b><br>";
echo "Значение поля ввода пароля: <b>".$_POST['passwordField']."</b><br>";
echo "Значение скрытого поля: <b>".$_POST['hiddenField']."</b><br><br>";
echo '<hr><br>';
echo 'Были включены чекбоксы:<br><br>';
if(isset($_POST['checkbox1'])) echo '<b>Вариант первый</b><br>';
if(isset($_POST['checkbox2'])) echo '<b>Вариант второй</b><br>';
if(isset($_POST['checkbox3'])) echo '<b>Вариант третий</b><br>';
echo '<br><hr><br>';
if(isset($_POST['radiobutton']))
{
echo 'Была выбрана радиокнопка: ';
if($_POST['radiobutton'] === 'yes') echo '<b>Yes</b><br>';
if($_POST['radiobutton'] === 'no') echo '<b>No</b><br>';
}
echo '<br><hr><br>';
echo 'Значение многострочного текстового поля:<br><br>';
echo '<b>'.$_POST['textarea']."</b><br>";
echo '<br><hr><br>';
echo "Значение списка с одиночным выбором: <b>".$_POST['weekDaysSingle']."</b><br>";
echo '<br><hr><br>';
echo 'Значения списка с множественным выбором: </p>';
foreach($_POST['weekDaysMultiple'] as $Key => $Value) echo '<b>'.$Value.'</b><br>';
echo '<br><hr><br><a href="../result/">Вернуться к форме</a>';
?>
Результат выполнения задания можно посмотреть
здесь.