Операция открыта, и сегодня доктор Дизайн сталкивается с некоторыми интересными проблемами, от проверки формы до SSI. Давайте начнем … и не забудьте представить свои вопросы доктору Дизайн .
Мне нужна проверка!
Привет доктор Дизайн,
На моем сайте есть простые формы обратной связи и подписки, которые либо отправляют мне по электронной почте, либо пишут в файл. Моя проблема в том, что если пользователь нажимает свою клавишу ввода на странице формы, он отправляет. Поэтому я получаю сотни пустых страниц отзывов, сохраненных или отправленных мне по почте, и я никогда не могу быть уверен, что пользователь намеревался что-то отправить.
Кроме того, в результатах моей формы пишется «Пользователь неизвестен», если отправитель не заполнит текстовое поле адреса электронной почты. Есть ли способ получить адрес отправителя в коде? Спасибо,
Ким Л.
Ким, я думаю, что эту проблему легко исправить, если мы выполним простую проверку. Валидация — это процесс проверки того, что отправленные или полученные вами данные являются «действительными». Некоторые распространенные проблемы, с которыми вы сталкиваетесь, — это то, что пользователи случайно нажимают «ввод» и не заполняют обязательные поля, и проверка положит этому конец.
Хотя мы могли бы отключить клавишу ввода, просто удалив <input type= "submit"> <input type="button" value="Submit" onClick="this.form.submit();"> Хотя это решило бы вашу непосредственную проблему, это также исключило бы основной метод, который многие посетители используют для отправки формы, что было бы довольно неприятно.
Мы хотим уменьшить разочарование всех участников (вас и ваших пользователей). Итак, давайте оставим кнопку отправки как есть и вместо этого добавим немного дополнительного кода в тэг <form>
<form method="POST" action="myfile.cgi"
onSubmit="return doValidate(this);">
Далее вам нужно кодировать свою функцию doValidate. Вот пример, который вы можете поместить в <HEAD>
<script language="javascript" type="text/javascript">
<!--
function doValidate(theform)
{
if(theform.txtname.value=="" || theform.txtemail.value=="" ||
theform.subject.value=="" || theform.message.value=="")
{
alert("Please complete all form fields.");
return false;
}
}
-->
</script>
В этом примере предполагается, что в вашей форме есть 4 обязательных поля: txtname, txtemail, subject и message. Вы можете просто проверить только обязательные поля, добавив в theform.myfield.value="" Или вы можете сделать его немного более сложным и, например, убедиться в правильности форматирования адресов электронной почты и т. Д.
По сути, это дает вам возможность убедиться, что данные, которые вы получаете, «настоящие», и сводит раздражение пользователя к минимуму. Вы могли бы даже расширить вышеупомянутую функцию, чтобы дать пользователю информацию о том, какие поля отсутствовали, если хотите.
Изменение цвета с помощью CSS
Док, у моего сайта около 30 страниц, и все они нуждались в смене цвета, поэтому я решил сделать это с помощью CSS. Можно ли как-нибудь сделать код CSS, который имеет все свойства одной таблицы? И как бы я включил это в стиле CSS? Джеймс
Привет, Джеймс, этот код должен помочь тебе в своем стремлении определить весь вид твоей таблицы:
<style type="textcss">
table { background: black; border: thin solid red; }
td { background: green; }
.bodyline { background-color: #2E425A; border: 1px #597795 solid; }
</style>
Затем, чтобы включить это в стиль, вы просто должны включить class = «bodyline» в каждую таблицу, например так:
<table class="bodyline">
Надеюсь это поможет!
Включает серверную часть
Доктор, я перехожу с FP2002 на DW MX.
Одной из полезных функций FP2002 является возможность использовать специальную функцию FP, называемую веб-ботом. Основной веб-бот, которого я использовал, называется «включить». Это позволяет вам брать часто повторяющийся контент и сохранять его в своем собственном файле. Затем, каждый раз, когда вы хотите использовать этот контент на другой странице, вы просто «включаете» его. Мне интересно, есть ли способ сделать это с помощью стандартного кодирования? Джеймс
Джеймс,
Я точно понимаю, что вы имеете в виду. Это очень полезная функция, когда вы имеете дело со стандартными вещами, такими как меню или даже заголовки страниц и авторские права: элементы, которые не меняются очень часто, но когда это происходит, на исправление могут уйти дни.
Dreamweaver позволяет вам делать это с помощью элементов библиотеки. Тем не менее, я рекомендую использовать какую-то обработку на стороне сервера. Это имеет много преимуществ (например, обработка на стороне сервера индексируется поисковыми машинами), но также этот подход очень распространен в каждом языке программирования, поскольку он делает ваши файлы короче и проще в управлении!
Каждый язык программирования имеет свой собственный способ включения, поэтому вы можете посмотреть ссылки, относящиеся к используемому вами языку. Тем не менее, есть еще более простой способ сделать это: вы можете использовать SSI (Включение на стороне сервера), который является функцией, которую позволяет использовать большинство веб-хостов.
По сути, вы сохраняете информацию, которую хотите включить в текстовый файл (например, «menu.txt» для меню вашего сайта). Затем вы включаете этот файл, используя следующий код:
<!--#include file="menu.txt"-->
Единственная проблема в том, что вам нужно изменить расширение файла на .shtm или .shtml, чтобы ваш сервер знал, что в файле содержатся директивы сервера. После этого простого шага ваш сайт станет мечтой об обслуживании, а не кошмаром!
Веселитесь вместе с SSI!
Прокрутка Баннер новостей
Здравствуйте, доктор, я лидер веб-сайта Формулы-1 и ищу HTML-код для создания новостного баннера. Неважно, каков внешний вид и скорость, но любой совет будет очень полезным. Большое спасибо — Том
Том, звучит так, как будто вы ищете простой JavaScript «News Scroller», который позволит вам сэкономить место, предоставляя посетителям самую свежую информацию.
Такие сайты, как Dynamic Drive , JavaScript.com и JS- examples, содержат отличные примеры этих типов инструментов. Я уверен, что вы найдете то, что вы ищете в одном из этих великих ресурсов.
Распространять любовь!
Ответьте на ваши вопросы, когда операция доктора Дизайн снова откроется в следующем месяце. Увидимся тогда!