НОУ ИНТУИТ | Введение в современные веб-технологии. Лекция 12: HTML-формы

Учитесь и получайте официальные документы БЕСПЛАТНО. Вы можете поддержать наш проект.

Регистрация Вход

Твой путь к знаниям!

Опубликован: 01.09.2010 | Уровень: для всех | Доступ: свободно | ВУЗ: Сибирский федеральный университет

|

Вам нравится? Нравится 74 студентам

| Поделиться |

Поддержать программу

Пример: проверка данных формы

Рассмотрим обращение к объектной модели 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;}

Дальше >>

Авторизоваться

Введение в современные веб-технологии

HTML-формы

Вопросы и ответы