Input type text значение по умолчанию – Как определить значение по умолчанию для «input type=text» без использования атрибута ‘value’?

Автоудаление текста в input

Если внимательно посмотреть на мой попап (на момент написания статьи он плавно появляется в верхнем правом углу), конечно, если ты не успел его еще закрыть, то увидишь, что при фокусе полей ввода почты и имени, надписи, написанные там, автоматически исчезают.

Тоже самое могу сказать и про форму поиска на моем сайте (находится в шапке) – по умолчанию там написано «Введите поисковую фразу…», и если ты сейчас попробуешь нажать на ней кнопкой мыши – надпись автоматически пропадет.

Все потому, что у меня настроено автозамена текста в input.

Текст в input по умолчанию

Input – это тот самый тег, который выводит поля ввода информации и кнопки в формах (кнопку еще можно задать при помощи тега button).

Так вот, значения по умолчанию можно установить при помощи атрибута value:

<input type="text" value="Значение по умолчанию">

Где атрибут type=»text» – задает тип input – в данном случае – это текстовое поле.

А атрибут value – значение по умолчанию.

Пример этого текстового поля вы можете наблюдать ниже:

Вроде бы все отлично, в поле появился нужный нам текст. Но проблема в том, что при фокусе (активации поля для ввода текста) – он не пропадет как у меня в форме поиска или попапе.

Таким образом, вашим посетителям – этот текст будет доставлять маленькое, но все же – неудобство.

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

И в этом нам поможет Javascript!

Нам всего то и надо, что добавить строчку кода:

<input type="text" value="Значение по умолчанию" onfocus="if (this.value == ' Значение по умолчанию') {this.value = '';}" onblur="if (this.value == '') {this.value = ' Значение по умолчанию';}">

Ну а теперь немного расшифровки, что бы было понятно, как все это дело работает:
• onfocus – указываем, что скрипт будет работать при фокусе на поле.
• код ниже означает, что если значение value тега input равняется «Значение по умолчанию» – то ему присваивается пустое значение.

if (this.value == ' Значение по умолчанию') {this.value = '';}

onblur="if (this.value == '') {this.value = ' Значение по умолчанию';}

Т.е. когда пользователь сфокусировался – значение value становится пустым. И если пользователь не ввел в это поле никакой информации и снял с него фокус, то полю автоматически будет присвоено старое значение по умолчанию.

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

Вот пример полей на моем попапе. Если что — можно потыкать, или подписаться :

Вот так вот все просто!

Надеюсь, эта информация оказалась для тебя полезной или просто понравилась?

Если так — прошу поделиться с ней друзьями.

Просто нажми на одну или несколько кнопок ниже!

Атрибут value | htmlbook.ru

Спецификация

Описание

Определяет значение элемента формы, которое будет отправлено на сервер или получено с помощью клиентских скриптов. На сервер отправляется пара «имя=значение», где имя задается атрибутом name тега <input>, а значение — атрибутом value.

• для кнопок (input type=»button | reset | submit») устанавливает текстовую надпись на них;
• для текстовых полей (input type=»password | text») указывает предварительно введенную строку. Пользователь может стирать текст и вводить свои символы, но при использовании в форме кнопки Reset пользовательский текст очищается и восстанавливается введенный в атрибуте value;
• для флажков и переключателей (input type=»checkbox | radio») уникально определяет каждый элемент, с тем, чтобы клиентская или серверная программа могла однозначно установить, какой пункт выбрал пользователь.
• для файлового поля (input type=»file») не оказывает влияние.

Синтаксис

<input type="..." value="значение">

<input type="..." value="значение" /> 

Применяется

Ко всем элементам формы.

Значения

Любая текстовая строка.

Значение по умолчанию

Нет.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег INPUT, атрибут value</title>
 </head>
 <body>  

  <form action="input12.php">
    <p><b>Как по вашему мнению расшифровывается аббревиатура "ОС"?</b></p>
    <p><input type="radio" name="answer" value="a1">Офицерский 
    состав<Br>
    <input type="radio" name="answer" value="a2">Операционная 
    система<Br>
    <input type="radio" name="answer" value="a3">Большой 
    полосатый мух</p>
    <p><input type="submit" value="Отправить"></p>
  </form>

 </body>
</html>

Атрибут value — значение по умолчанию поля ввода

Атрибут value задает значение по умолчанию для поля ввода HTML формы. Оно будет автоматически вставлено в него при заходе на страницу.

Применяется к тегам input, option и другим.

Текстовый инпут

В случае текстового поля ввода input содержимое атрибута value будет задавать видимый в поле текст по умолчанию (его можно будет удалить и написать свой).

Кнопка

В случае, если атрибут применяется к кнопке, созданной через тег input с атрибутом type в значениях button, submit или reset, атрибут value будет задавать текст кнопке.

Чекбокс

В случае, если атрибут применяется к чекбоксу внешних изменений наблюдаться не будет, но отмеченный чекбокс будет посылать на сервер содержимое этого атрибута. Если атрибута value у чекбокса нет — он будет посылать строку ‘on’. Если чекбокс не отмечен — ничего не будет присылаться на сервер не зависимо от наличия атрибута value.

Радио переключатель

Для группы радио переключателей необходимо задавать разные значения атрибута

Тег option

В случае, если тегу option не задан атрибут value, то на сервер будет отправляться содержимое тега option (то, что между открывающим <option> и закрывающим </option>). Если же атрибут задан — будет отправлено его содержимое.

Пример

Давайте полю ввода установим текст по умолчанию:

<input type="text" value="текст по умолчанию">

:

Пример

А теперь давайте изменим текст кнопке:

<input type="submit" value="нажми на меня">

:

Смотрите также

• атрибут placeholder,
  который задает подсказку в поле ввода

Тег input — поле ввода

Тег input создает различные элементы HTML формы: обычное поле ввода, поле для ввода пароля, флажок checkbox (чекбокс), радио кнопочки (radio), кнопку.

Тег input должен лежать внутри тега form. Это не обязательно, необходимо для отправки данных на сервер и последующей их обработки через PHP.

Не требует закрывающего тега.

Атрибуты

Значения атрибута type

Новые в HTML5 значения атрибута type

Данные значения атрибута новые, появились только в HTML5, поэтому в некоторых браузерах они могут не работать или работать по-разному в разных браузерах.

В случае, если браузер не может понять содержимое атрибута type (например, если оно не поддерживается или ошибочно введено), он будет считать элемент обычным текстовым инпутом, как будто в в type стоит значение text.

Посмотрите приведенные ниже примеры в разных браузерах. Попробуйте вводить в инпуты текст и нажать на кнопку отправки. Если текст некорректный или поле пустое — браузер выдаст ошибку. К примеру, если в поле с типом email вбить некорректный email — браузер не даст отправить форму и выдаст сообщение об ошибке (текст ошибки и ее внешний вид на html css менять нельзя). Если поле пустое — браузер тоже выдаст ошибку, это достигается с помощью атрибута required:

Смотрите также

• тег textarea,
  который создает многострочное поле ввода
• атрибут pattern,
  который осуществляет валидацию полей

Атрибут size тега | HTML справочник

Значение и применение

Атрибут size (HTML тега <input>) определяет ширину для элемента (в символах). Только для элементов управления следующих типов: text, search, tel, url, email и password (остальные игнорируются). Значение по умолчанию 20 символов.

Обращаю Ваше внимание, что вы можете указать максимально допустимое количество символов в элементе с использованием атрибута maxlength.

Поддержка браузерами

Синтаксис:

<input size = "number"> 

Значения атрибута

Отличия HTML 4.01 от HTML 5

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Использование атрибута size HTML тега <input></title>
	</head>
	<body>
		<form name = "myForm"> <!-- создаем форму --> 
			<input type = "text" size = "3" value = "3"><br> <!-- ширина элемента 3 символа -->
			<input type = "text" size = "5" value = "5"><br> <!-- ширина элемента 5 символов --> 
			<input type = "text" size = "10" value = "10"><br> <!-- ширина элемента 10 символов --> 
			<input type = "text" value = "20 (по умолчанию)"><br> <!-- ширина элемента 20 символов (по умолчанию) --> 
		</form>
	</body>
</html>

В данном примере мы создали форму (HTML тег <form>). Внутри формы мы поместили элементы управления <input> для ввода текстовой информации, для которых с помощью атрибута size мы указали различную ширину элементов (3 символа для первого, 5 символов для второго, 10 символов для третьего, для четвертого установлено значение по умолчанию 20 символов).

Результат нашего примера:

HTML тег input | назначение, синтаксис, атрибуты, примеры

Последнее обновление: 27.02.2009

Тег <input> (с англ. ввод данных) позволяет создавать элементы интерфейса: кнопки, текстовые поля, переключатели и флажки. Основной метод получения информации от пользователя (читателя) базируется на этом теге. В зависимости от атрибута type, отображается в виде различных элементов управления.
Строчный элемент.

HTML: 3.2 | 4 / XHTML: 1.0 | 1.1

Синтаксис

<form action="...">
<input type="..."/>
</form>

Атрибуты

Основные Вспомогательные События

Пример

Флаг

<input type="checkbox" checked="checked"/> флаг

Переключатель

<input type="radio"/> переключатель

Поле для отправки файла

<input type="file" value="имя файла"/>

Обычное текстовое поле

<input type="text" value="Логин"/>

Поле для ввода пароля

<input type="password" value="пароль"/>

Кнопка

<input type="button" value="Обычная кнопка"/>

Неактивная кнопка

<input type="button" value="Неактивная кнопка" disabled="disabled"/>

Рекомендации по использованию

• должен быть закрыт слешем (<input…/>)
• обязательных атрибутов нет
• по умолчанию тег <input> имеет тип type=»text»
• в таблицах стилей явно указывайте цвет фона полей, т.к. по умолчанию в браузере цвет фона полей может отличаться от белого
• в больших формах используйте атрибут tabindex для последовательного tab-обхода полей
• хорошим тоном является указание атрибута maxlength, чтобы пользователь не мог ввести заведомо больше символов, чем отведено в базе данных для этого поля (согласовывается с или задается программистами)
• некотрые браузеры подсвечивают поля в фокусе (Chrome, Safari)

Твой код:

Результат: