Autofocus html: Атрибут autofocus | htmlbook.ru — Главная

Содержание

Автофокус | WebReference

Фокус это активность элемента формы, позволяющая производить с ним какие-то действия. Для текстового поля можно вводить текст, для списка выбирать пункт с помощью клавиатуры и др. Автофокус — это автоматически установленный фокус поля формы. К примеру, при открытии google.ru вы можете сразу набирать текст в строке поиска без лишних манипуляций с мышью и клавиатурой.

Автофокус создаётся с помощью атрибута autofocus, который можно добавлять к следующим элементам: <button>, <input>, <keygen>, <select>, <textarea>. Для текстового поля синтаксис такой.

<input autofocus>

На странице должен быть только один элемент с автофокусом.

В примере 1 показано создание формы авторизации с автофокусом.

Пример 1. Использование автофокуса

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Автофокус</title> </head> <body> <form> <fieldset> <legend>Вход на сайт</legend> <p><input name=»login» autofocus></p> <p><input type=»password» name=»pass»></p> <p><input type=»submit» value=»Вход»></p> </fieldset> </form> </body> </html>

Результат примера показан на рис.

1. Браузер обычно выделяет поле с фокусом рамкой.

Рис. 1. Автофокус в текстовом поле

Поле с фокусом можно изменить через стили воспользовавшись псевдоклассом :focus, добавляя его к селектору input. Код HTML останется неизменным, появится только блок со стилями (пример 2).

Пример 2. Изменение вида поля с фокусом

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Автофокус</title> <style> input { border: 1px solid #666; /* Параметры рамки */ } input:focus { box-shadow: 0 0 5px 1px #00a8de; /* Свечение вокруг поля */ background: #fffac0; /* Цвет фона */ } </style> </head> <body> <form> <fieldset> <legend>Вход на сайт</legend> <p><input name=»login» autofocus></p> <p><input type=»password» name=»pass»></p> <p><input type=»submit» value=»Вход»></p> </fieldset> </form> </body> </html>

Результат данного примера показан на рис.

2. Как только поле получает фокус или, другими словами, в него можно вводить текст, то цвет фона у поля меняется и вокруг появляется голубое свечение. Оно сделано с помощью тени соответствующего цвета через свойство box-shadow.

Рис. 2. Вид поля при получении фокуса

автофокус

формы

Автор: Влад Мержевич

Последнее изменение: 11.03.2020

Редакторы: Влад Мержевич

Блокирование элементов форм

Ctrl+←

Подсказывающий текст
Ctrl+→

Тег | HTML справочник

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


		1.0+	1.0+	3.0+	1.2+

Описание

HTML тег <keygen> используется для генерации пары ключей — закрытого и открытого для форм. Сами ключи необходимы для шифрования и расшифровки данных.

При отправке формы, закрытый ключ сохраняется на локальном компьютере, а открытый ключ передается на сервер вместе с формой.

Атрибуты

autofocus:

Определяет, что фокус должен быть автоматически задан элементу при загрузке страницы. Значения для логического атрибута autofocus можно задавать следующими способами:


<keygen autofocus>
<keygen autofocus="autofocus">
<keygen autofocus="">

Примечание: атрибут autofocus не поддерживается в IE и Firefox.

challenge:

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

disabled:

Указывает, что элемент должен быть выключен (выключенный элемент является неактивным). Значения для логического атрибута disabled можно задавать следующими способами:


<keygen disabled>
<keygen disabled="disabled">
<keygen disabled="">

form:

Определяет форму с которой связан элемент <keygen>.

В качестве значения атрибута выступает идентификатор элемента <form>. Этот атрибут позволяет размещать элемент <keygen> в произвольном месте документа, а не только в качестве потомка элемента <form>.

Если атрибут form не указан, то элемент <keygen> должен быть потомком элемента <form>.

Примечание: атрибут form не поддерживается в IE.

keytype:

Указывает тип создаваемого ключа. Атрибут keytype используется только совместно с атрибутами name и challenge.

rsa — алгоритм безопасности RSA, пользователю может быть предоставлен выбор между высокой и средней степенью защиты (значение по умолчанию).
dsa — алгоритм безопасности DSA, пользователю может быть предоставлен выбор размера ключа.
ec — алгоритм безопасности EC, пользователю может быть предоставлен выбор между высокой и средней степенью защиты.

Примечание: атрибут keytype не поддерживается в IE и Safari.

name:

Определяет имя для элемента, которое отправляется вместе с данными формы.

Примечание: атрибут keytype не поддерживается в IE.

Тег <keygen> так же поддерживает Глобальные атрибуты и События

Стиль по умолчанию

Нет.

Пример


<form action="demo_keygen.asp" method="get">
  Имя пользователя: <input type="text" name="usr_name">
  Шифрование: <keygen name="защита">
  <input type="submit">
</form>

Результат данного примера в окне браузера:

Атрибут автофокуса HTML

❮ Назад Все атрибуты HTML Далее ❯

Определение и использование

Атрибут autofocus является логическим атрибутом.

При наличии указывает, что элемент должен автоматически получать фокус при загрузке страницы.

Относится к

Атрибут autofocus можно использовать для следующих элементов:

Элементы	Атрибут
<кнопка>	автофокус
<ввод>	автофокус
<выбрать>	автофокус
<текстовое поле>	автофокус

Примеры

Пример кнопки

Кнопка с автофокусом:

Попробуйте сами »

Пример ввода

0002 Разрешить автоматически получать фокус поля ввода «Имя» при загрузке страницы:

Попробуйте сами »

Пример Textarea

Текстовая область с автофокусом:

<br/> На w3schools.com вы узнаете, как сделать веб-сайт . Мы предлагаем бесплатные обучающие программы по всем технологиям веб-разработки. <br/>

Попробуйте сами »

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

Атрибут autofocus имеет следующую поддержку браузера для каждого элемента:

Элемент
форма	5,0	10,0	4,0	5,0	9,6
ввод	5,0	10,0	4,0	5,0	9,6
текстовая область	Да	10,0	4,0	Да	Да

❮ Предыдущий Все атрибуты HTML Далее ❯

НОВИНКА

Мы только что запустили
Видео W3Schools

Узнать

ВЫБОР ЦВЕТА

КОД ИГРЫ

Играть в игру

Лучшие учебники

Учебник по HTML
Учебник по CSS
Учебник по JavaScript
Как сделать учебник
Учебник по SQL
Учебник по Python
Учебник по W3.

CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

900 Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры

Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

| О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.

Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

HTML DOM Свойство автофокуса ввода текста

❮ Объект ввода текста

Пример

Узнать, автоматически ли фокусируется текстовое поле при загрузке страницы:

var x = document.getElementById(«myPassword»).autofocus;

Попробуйте сами »

Определение и использование

Свойство autofocus устанавливает или возвращает значение, должно ли текстовое поле автоматически получать фокус при загрузке страницы или нет.

Это свойство отражает атрибут автофокуса HTML.

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

Свойство
автофокус	Да	10,0	Да	Да	Да

Синтаксис

Вернуть свойство автофокуса:

textObject . autofocus

Установите свойство автофокуса:

textObject .autofocus = true|false

Значения свойств

Значение	Описание
истина\|ложь	Указывает, должно ли текстовое поле получать фокус при загрузке страницы или нет. true — текстовое поле получает фокус ложь — по умолчанию. Текстовое поле не получает фокус

Технические характеристики

Возвращаемое значение:	Логическое значение, возвращает true, если текстовое поле автоматически получает фокус при загрузке страницы, в противном случае возвращает false

Связанные страницы

Ссылка на HTML: HTML AutoFocus attribute

❮ Входной текст Объект

Новый

Мы только что запустили
W3Schools Videos

Explore Now

9018 W3Schools Videos

КОД ИГРЫ

Играть в игру

Лучшие учебники

Учебник по HTML
Учебник по CSS
Учебник по JavaScript
Как сделать учебник
Учебник по SQL
Учебник по Python
Учебник по W3.CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

Лучшие примеры

| О

W3Schools оптимизирован для обучения и обучения.

Autofocus html: Атрибут autofocus | htmlbook.ru

Автофокус | WebReference

Тег | HTML справочник

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

Описание

Атрибуты

Стиль по умолчанию

Пример

Атрибут автофокуса HTML

Определение и использование

Относится к

Примеры

Пример кнопки

Пример ввода

Пример Textarea

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

ВЫБОР ЦВЕТА

КОД ИГРЫ

Лучшие учебники

Основные примеры

| О

HTML DOM Свойство автофокуса ввода текста

Пример

Определение и использование

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

Синтаксис

Значения свойств

Технические характеристики

Связанные страницы

КОД ИГРЫ

Лучшие учебники

Лучшие примеры

| О

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