Предварительно заполненные поля формы

Question

Итак, я унаследовал эту форму с предварительно заполненными полями формы, такими как «Имя», «Телефон» или «Почтовый индекс», чтобы пользователи знали, что делать с полями.Но если кто-то просто нажимает кнопку, форма передает «Имя», «Телефон» или «Почтовый индекс» в базу данных.OnFocus в не, кажется, работает.Есть идеи?

<input type="" maxlength="25" name="firstname" tabindex="6" id="firstname" class="textfield" value="First Name" onFocus="if (this.value == 'First Name') {this.value = '';}">

Заранее спасибо, -Bob

Answer 1

Во-первых, это плохая практика, ярлыки должны быть ярлыками, помещенными перед полем, которое они обозначают. Не внутри.

Name: [________]
=== NOT ===
[Name____]

Точно как бланк на бумаге.

Если у вас должен быть текст в поле, используйте атрибут placeholder. Но имейте в виду, что только самые новые браузеры поддерживают его.

Что касается решения проблемы представления значений по умолчанию, просто проверьте, является ли значение, которое вы собираетесь ввести в базу данных, значением по умолчанию и, если это так, заблокируйте его.

Answer 2

Как предлагали другие, используйте атрибут placeholder, чтобы установить «метку» поля. Кроме того, если вы уже используете jQuery для упрощения своего Javascript, вы можете использовать плагин, такой как этот , который добавит поддержку атрибута-заполнителя для не совместимых с HTML браузеров.

Эти плагины обычно также заботятся о критически важном этапе удаления текста заполнителя из ваших полей непосредственно перед отправкой формы на сервер, который должен отправлять пустые значения на сервер, а не текст заполнителя.

Answer 3

В дополнение к тому, что сказал Кольник, вы можете выполнить простую проверку для ввода текста, который имеет значение по умолчанию, используя что-то вроде:

if ( input.value == input.defaultValue || /^\s*$/.test(input.value) ) {
    // field value isn't valid
}

, чтобы проверить, является ли значение по умолчанию пустым или пробелом. Но помните, что проверка на стороне клиента абсолютно ненадежна, так что действительная проверка на сервере.