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

    Internet Explorer Chrome Opera Safari Firefox Android iOS
    3.0+ 1.0+ 4.0+ 1.0+ 1.0+ 1.0+ 1.0+

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

    HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

    Описание

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

    В зависимости от типа элемента атрибут value выступает в следующей роли:

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

    Синтаксис

    HTML
    <input type="..." value="значение">
    XHTML
    <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.

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

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

    value, чтобы после отправки на сервер, PHP мог определить, какой из переключателей был выбран.

    Тег option

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

    Пример

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

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

    :

    Пример

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

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

    :

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

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

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

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

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

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

    Атрибуты

    Атрибут Описание
    type Задает тип поля ввода. Варианты см. ниже.
    value Значение по умолчанию в поле ввода. В случае с кнопкой задает ее текст. Подробнее см. атрибут value.
    placeholder Подсказка в поле ввода, подробнее см. атрибут placeholder.
    name Имя поля ввода. Нужно для того, чтобы достать данные поля ввода в PHP. Для корректной работы формы имена полей ввода не должны совпадать друг с другом (в одной форме). Если они совпадают - в PHP придут данные того поля ввода, которое ниже в HTML коде.
    disabled Блокирует элемент формы (не только input, а практически любой), подробнее см. атрибут disabled.

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

    Значение Описание
    text Создает обычное текстовое поле ввода.
    password Создает текстовое поле ввода для пароля. Попробуйте вбить в него текст - он отобразится звездочками.
    checkbox Создает флажок чекбокс. Подробнее см. checkbox.
    radio Создает радио переключатель. Подробнее см. radio.
    hidden Создает скрытый инпут, который не будет виден на экране, но будет отправлять содержащиеся в атрибуте value данные на сервер.
    button Создает кнопку. Нажатие на эту кнопку не будет отправлять форму на сервер. Она может быть использована внутри ссылки или через JavaScript. По умолчанию кнопка не имеет текста (пример кнопки без текста: ), он задается с помощью value. См. также тег button, который также делает кнопку.
    submit Создает кнопку, которая будет отправлять данные на сервер. Текст кнопки зависит от браузера, его можно сменить с помощью value. См. также тег button, который также делает кнопку.
    reset Создает кнопку, которая очищает заполненную форму. Текст кнопки зависит от браузера, его можно сменить с помощью value.
    file Создает кнопку выбора файла. Дизайн этой кнопки запрещено менять через CSS (однако есть хитрые способы). Если вам требуется такое поле в форме, то тег form должен иметь атрибут enctype в значении multipart/form-data.

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

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

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

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

    Значение Описание
    email
    number
    url
    tel
    search
    color
    date
    month
    week
    datetime
    datetime-local
    range

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

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

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

    HTML тег <input>

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

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


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


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

    Синтаксис:

    <input size = "number"> 
    

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

    ЗначениеОписание
    numberЗадает ширину элемента <input> в символах (значение должно быть больше нуля). Значение по умолчанию 20.

    Отличия 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 символов).

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

    Пример использования атрибута size HTML тега <input>.HTML тег <input>

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

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

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

    HTML: 3.2 | 4 / XHTML: 1.0 | 1.1

    Синтаксис

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

    Атрибуты

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

    accept список типов содержимого, через запятую, которые сервер-обработчик формы будет корректно обрабатывать
    acceskey указываем горячую клавишу
    align задает выравнивание поля в форме
    • bottom — нижняя граница поля выравнивается по окружающему тексту (по умолчанию)
    • left — по левому краю окна. Текст обтекает справа
    • middle — центр картинки по базовой линии текущей строки
    • right — по правому краю окна. Текст обтекает слева
    • top — верх поля выравнивается по самому высокому элементу строки
    alt альтернативный текст для кнопки с изображением
    border толщина рамки.
    Отсутствует в спецификации HTML 4.01!
    checked флаг. Определяет переключатель как установленный <input type="checkbox" checked/>
    class определяет имя используемого класса
    dir определяет направление символов:
    • ltr — слева направо
    • rtl — справа налево
    disabled флаг. Делает элемент неактивным
    hspace отступ по горизонтали (по умолчанию 0)
    Отсутствует в спецификации HTML 4.01!
    id уникальный индетификатор
    ismap флаг, определяющий, что картинка является картой-изображением
    lang определяет язык отображаемого документа
    maxlength задает максимальное количество символов, которое может ввести пользователь в текстовое поле
    name уникальное имя элемента
    onblur потеря фокуса элементом
    onclick щелчек на элементе
    ondblclick двойной щелчек на элементе
    onchange потеря фокуса элементом при условии, что его содержимое изменилось
    onfocus получение фокуса элементом
    onkeydown нажатие клавиши, когда элемент имеет фокус
    onkeypress нажатие и освобождении клавиши, когда элемент имеет фокус
    onkeyup освобождение ранее нажатой клавиши, когда элемент имеет фокус
    onmousedown нажатие кнопки мыши, когда элемент имеет фокус
    onmousemove движение указателя мыши, когда элемент имеет фокус
    onmouseout смещение указателя мыши с элемента
    onmouseover помещение указателя мыши на элемент
    onmouseup освобождение ранее нажатой кнопки мыши, когда элемент имеет фокус
    onselect выделение какого-либо текста в текстовом поле
    readonly флаг. Запрещает изменение данных поля пользователем
    size ширина текстового поля в символах
    src URL файла с изображением
    style задает встроенную таблицу стилей
    tabindex порядок обхода элементов с помощью Tab
    title всплывающая подсказка
    type тип элемента управления
    • button — кнопка
    • checkbox — флаг
    • file — поле для ввода имени файла
    • hidden — скрытое поле. На странице не отображается
    • image — кнопка с изображением
    • password — текстовое поле в котором символы показываются звездочками
    • radio — переключатели. Выбор одного варианта из нескольких
    • range — слайдер (отсутствует в спецификации HTML 4.01, поддерживает Opera, Safari и Chrome)
    • reset — кнопка возврата данных формы к значениям по умолчанию
    • search — поле поиска (отсутствует в спецификации HTML 4.01, поддерживает Safari и Chrome)
    • submit — кнопка для отправки данных на сервер
    • text — текстовое поле
    usemap применяет к изображению карту <MAP>
    value значение элемента
    vspace отступ по вертикали (по умолчанию 0)
    Отсутствует в спецификации HTML 4.01!
    Пример

    Флаг

    <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)

    Твой код:
    <html> <head> <title></title> </head> <body> <div> <input type="checkbox" checked="checked"/> флаг </div> <div> <input type="radio"/> переключатель </div> <div> <input type="file" value="имя файла"/> </div> <div> <input type="text" value="Логин"/> </div> <div> <input type="password" value="пароль"/> </div> <div> <input type="button" value="Обычная кнопка"/> </div> <div> <input type="button" value="Неактивная кнопка" disabled="disabled"/> </div> </body> </html> Сделай код и жми тут

    Результат:
    большой полигон

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *