|
Профессиональный веб-дизайн: Введение в современные веб-технологии "3. Создание внешней таблицы. Теперь создайте таблицу с двумя строками. Во второй строке создайте две ячейки - в первую переместите таблицу цифр, а во вторую - таблицу знаков." Как в ячейку <td> поместить таблицу? Таблица же сама состоит из ячеек. Исходя из задания следует, что <td> может быть родителем для <td>, но это противоречит правилам HTML? |
Инспектор
Спонсор: Microsoft
Вы можете этот курс.
Опубликован: 01.09.2010 | Уровень: для всех | Доступ: платный | ВУЗ: Сибирский федеральный университет
Лекция 12:
HTML-формы
Пример: проверка данных формы
Рассмотрим обращение к объектной модели HTML-формы на примере проверки полноты введенных данных в регистрационную форму.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Регистрация</title>
<link href="form.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="form.js"></script>
</head>
<body>
<!-- Сюда будем выводить сообщения об ошибках -->
<ul id="errors></ul>
<form method="post" action="form.php" onsubmit="return Validate()">
<!-- Элементы формы удобно размещать в таблице -->
<table>
<caption>Регистрация пользователя</caption>
<tr>
<td>Имя пользователя: </td>
<td>
<input type="text" name="username" maxlength="12">
<!-- даем элементу span id, лекго вычисляющийся из name
предыдущего элемента.
Здесь будем подсчитывать введенные символы-->
<span id="spanusername" class="Counter"></span>
</td>
</tr>
<tr>
<td>Пароль: </td>
<td>
<input type="password" name="pwd" maxlength="10">
<span id="spanpwd" class="Counter"></span>
</td>
</tr>
<tr>
<td>Подтвердите пароль:</td>
<td>
<!-- Этот элемент не отправляет данные на сервер
и используется только для проверки правильности ввода -->
<input type="password" id="pwd1" maxlength="10">
<span id="spanpwd1" class="Counter"></span>
</td>
</tr>
<tr>
<td>Пол:</td>
<td>
<!-- атрибут name у группы переключателей имеет одинаковое значение -->
<input type="radio" name="gender" value="m" id="genderM" >
<label for="genderM">Мужской</label>
<input type="radio" name="gender" value="f" id="genderF" >
<label for="genderF">Женский</label>
</td>
</tr>
<tr>
<td colspan="2">
<input type="checkbox" id="chkAgree" name="agree" value="yes">
<label for="chkAgree">Я согласен с условиями</label>
</td>
</tr>
<tr>
<td>
<button type="submit"><b>Зарегистрировать</b></button>
</td>
<td>
<button type="reset"><i>Очистить форму</i></button>
</td>
</tr>
</table>
</form>
</body>
</html>Стилевое оформление страницы можно поместить в отдельный файл (здесь form.css ). Содержимое каскадной таблицы стилей может выглядеть, например, так:
input[type="text"], input[type="password"]
{
border: solid 1px #ccc;
width: 150px;
}
/* Использование псевдо-класса :focus - хорошая альтернатива
обработке события onfocus
*/
input[type="text"]:focus,
input[type="password"]:focus,
input:focus+label /* Элемент label, следующий сказу за элементом, получившим фокус ввода */
{
background:#cff;
}
/* Первая ячейка таблицы в строке */
td:first-child {text-align: right;}
.Counter
{
position:absolute;
display:none;
font-size:small;
background:#dfd;
}
table {border:solid 1px #ccc;}
#errors {color:Red;}
Юрий Шах
Елена Сапегова
|
После прохождения теоретической части пришло письмо об окончании теоретической части курса, будет ли практическая часть? |
