Вложить ссылку в input
Перенос текста с input в ссылку
Доброго времени суток, только что столкнулся с проблемой, дело в том что пробую реализовать.
Заполнить input по клику на ссылку
Добрый день, уважаемые форумчане ! Подскажите, как сделать подобное или в какую торону смотреть.
Очистка input по клик на ссылку
Подскажите пожалуйста, как очистить нужный мне input, по клику на ссылку <a href="">Очистить</a>.
Подставить в ссылку значение из input-a
Всем привет! Подскажите пожалуйста, как сотворить сие чудо. Есть input на странице, есть button.
2964 / 2593 / 1068
Регистрация: 15.12.2012
Сообщений: 9,832
Записей в блоге: 11
Сообщение было отмечено umbrrella как решение
Решение
umbrrella, примерно так:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
html lang="en"> head> meta charset="UTF-8"> title>Example/title> style> .block < position:relative; width:250px >.block>input < position:absolute; width: 100%; padding:10px; display:block >.block>a < position:absolute; top:10px; right:0; color:#000 >/style> /head> body> div class="block"> input type="text"> a href="">Не помню/a> /div> /body> /html>
Делаем кнопку input ссылкой
HTML -тег input предназначен для вывода разных полей и кнопок. Благодаря ему можно создавать элементы сайта, которые будут требовать от пользователя каких-то действий.
Но оказывается, созданная с помощью input, кнопка не предназначена для использования в качестве обычной ссылки. Но некоторые случаи требует от вебмастера использования html-тега input именно в качестве ссылки.
Оказывается исправить это вопиющие безобразием можно и к тому же не одним способом.
Самый надежный способ из всех – это использование чистого HTML без JS (Способ №1), так как ваш посетитель может использовать браузер с отключенным JavaScript или пользоваться каким-нибудь мобильным браузером, начисто лишенным понимания скриптов.
Способ №1 – чистый HTML
Выглядит это так:
Этот способ открывает ссылку в этом же окне. Если добавит к form target=»_blank» то откроется в новой
Способ №2 – с использованием JS
Работает это так:
В общем то внешних отличий мало, отличия только внутренние. Использование этого метода создания из input`а ссылки, я бы не рекомендовал, так как некоторые ваши посетители могут столкнутся с проблемой неработоспособности таких ссылок.
Не смотря на это у этого способа есть один существенный плюс: можно открыть ссылку в новой странице браузера.
Эти 2 нехитрые способа помогут использовать вам обычную HTML -кнопку в качестве ссылки. Я, честно, не знаю как такая ссылка будет передавать вес, но перенаправлять пользователей будет как надо.
Как кнопку сделать ссылкой?
В этом примере при щелчке по кнопке открывается веб-страница new.html в новой вкладке.
Одну форму нельзя вкладывать внутрь другой. Перед добавлением кнопки убедитесь что у вас только одна форма.
Использование CSS
Раз кнопку нельзя сделать ссылкой, то вообще отказываемся от и стилизуем ссылку, чтобы она стала похожа на кнопку. В примере 2 показан класс btn , при добавлении его к элементу ссылка меняет своё оформление.
Пример 2. Стилизация ссылки
Результат данного примера показан на рис. 1.
Рис. 1. Стилизация ссылки
Использование JavaScript
Для перехода к указанной веб-странице можно воспользоваться событием onclick, добавляя его к элементу . Внутри onclick пишем document.location , а в качестве значения адрес желаемой веб-страницы (пример 3). Обратите внимание на комбинацию кавычек, адрес веб-страницы берётся в одинарные кавычки.
Пример 3. Событие onclick
См. также
- Атрибуты
- Кнопки
- Кнопки
- Кнопки в Bootstrap 4
- Отправка данных формы
- Отправка данных формы
- Построение форм
- Событие onclick
- Создание кнопок
- Создание форм
- Сумасшедшие формы
- Формы
- Формы в Bootstrap 4
- Формы в HTML
Input как ссылка
Многогранный тег позволяет создавать поля ввода, кнопки, переключатели и другие интерактивные элементы.
Время чтения: 9 мин
Открыть/закрыть навигацию по статье
Контрибьюторы:
- Светлана Коробцева ,
- Валерий Махнюк ,
- Егор Могилей
Обновлено 12 января 2022
Кратко
Скопировать ссылку «Кратко» Скопировано
Тег позволяет создавать интерактивные элементы на сайте — поле для ввода текста, кнопка, ползунок, переключатель и другие.
Пример
Скопировать ссылку «Пример» Скопировано
Создадим поле для ввода текста в одну строчку и ограничим количество допустимых символов в нём:
type="text" name="name" required minlength="4" maxlength="8" size="10">label for="name">Введите название (от 4 до 8 символов):label> input type="text" id="name" name="name" required minlength="4" maxlength="8" size="10" >
Как понять
Скопировать ссылку «Как понять» Скопировано
— это контейнер для интерактивных элементов, с помощью которых пользователь может ввести данные, что-то выбрать, поставить галочку или нажать кнопку.
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Если хочется, чтобы введённые или выбранные в данные отправились на сервер, нужно поместить этот тег в либо связать этот элемент с формой через атрибут id .
Атрибут type определяет, какой вид примет элемент и какую функцию будет выполнять: например, для создания поля с паролем мы напишем type = «password» , чтобы сделать переключатель — type = «radio» , а для создания кнопки — type = «button» .
Благодаря огромному количеству вариантов и функций, которые задаются через type и другие атрибуты, стал одним из самых полезных и сложных тегов в HTML.
Атрибуты
Скопировать ссылку «Атрибуты» Скопировано
К элементу можно применить все глобальные атрибуты.
type
Скопировать ссылку «type» Скопировано
type — тип элемента : текстовое поле, кнопка, флажки выбора и так далее. Если не указать его, то элемент будет обычным текстовым полем text в одну строку.
Типы для ввода данных разных форматов:
- text — поле для ввода текста в одну строку. Если попробовать вставить текст из нескольких абзацев, то они всё равно сложатся в одну строчку.
- email — поле для ввода имейла. Браузер проверит, есть ли в нём знак «@» и домен.
- search — поле для поиска.
- tel — поле для ввода номера телефона.
- url — поле для ввода URL-адреса.
- password — ввод пароля. По мере ввода символы будут меняться на звёздочки ***. Можно задать минимальное и максимальное количество символов с помощью атрибутов minlength и maxlength .
- number — ввод числа.
Типы для различных кнопок:
- submit — простая кнопка для отправки формы.
- button — обычная кнопка.
- image — кнопка «Отправить» в виде картинки. Чтобы задать адрес картинки, используйте атрибут src , а для альтернативного текста — атрибут alt . Чтобы скорректировать размер изображения в пикселях, используйте атрибуты height и width .
- reset — кнопка, которая сбрасывает всё, что пользователь ввёл в поля текущей формы ранее.
Типы для ввода дат:
- date — ввод даты без времени: год, месяц и дата.
- datetime — local — ввод даты и времени в текущем часовом поясе, когда зоны UTC не указываются.
- month — ввод месяца и года, без указания часового пояса.
- week — ввод номера недели.
- time — ввод времени без указания часового пояса.
- checkbox — флажки, или чекбокс, с несколькими вариантами на выбор.
- radio — круглая кнопка-переключатель для выбора одного из нескольких вариантов.
- range — ползунок для выбора чисел из заданного диапазона.
- color — виджет для выбора цвета. Иногда его называют колорпикер (от английского colorpicker).
- file — выбор файла для отправки.
И отдельно стоит значение hidden . Поле ввода с этим значением атрибута type не видно на странице, но в то же время оно отправляет своё значение на сервер.
Большое преимущество установки правильного значения для type — в мобильных браузерах будет появляться «специальная» клавиатура, упрощающая и улучшающая пользовательский опыт. Так, для у пользователя отобразится клавиатура, содержащая лишь цифры и специальные символы, нужные для корректного ввода номера телефона. Пример такой клавиатуры можно увидеть на картинке ниже:
value
Скопировать ссылку «value» Скопировано
value — значение элемента , которое отправляется на сервер в формате «имя=значение». Имя задаётся атрибутом name , а значение — value . Например, .
- Если — кнопка ( ), то value будет надписью на ней. Значение value для кнопки ( ) не передаётся на сервер.
- Если — кнопка в виде картинки ( ), то value будет передано в виде двух значений координат нажатия относительно изображения имя . x и имя . y , где имя — это значение атрибута name .
- Если — текстовое поле ( ), то value задаст текст, который появится в этом поле при загрузке страницы. Пользователь сможет его удалить или отредактировать.
- Если вы вставляете флажок или переключатель ( ), то value задаст уникальное значение элемента, по умолчанию on .
Прочие атрибуты
Скопировать ссылку «Прочие атрибуты» Скопировано
- name — уникальное имя элемента. Обычно имя нужно, чтобы связать с формой и отправить данные на сервер.
- required — делает поле для ввода обязательным для заполнения. Пользователь не сможет нажать «Отправить», пока не введёт сюда данные. А если попробует, то браузер выведет сообщение о необходимости заполнить поле.
- disabled — отключает элемент. Пользователь не сможет, например, ввести текст или выбрать нужный параметр, а сам элемент будет отображаться в сером цвете, как неактивный.
- autocomplete — разрешает автозаполнение. Автозаполнение — это когда браузер предлагает сохранить, например, пароль или номер банковской карты, чтобы данные подставлялись при следующем входе. Подробнее можно прочитать в статье про autocomplete .
- autofocus — фокусируется на элементе сразу после загрузки страницы. Это значит, что пользователю не нужно специально нажимать на этот элемент, чтобы начать в нём что-то писать. В фокусе может быть только один элемент на странице. Но это не может быть элемент типа hidden .
- form — связывает отдельно стоящий элемент с формой. Для этого укажите в качестве значения имя идентификатора, который задан нужному тегу . Например, так form = «special — form» . Этот атрибут позволяет разместить в любом месте на странице за пределами . Если его не указать, элемент будет связан с ближайшей формой.
- list — связывает с элементом через его ID. В элементе указывают значения, которые пользователь может выбрать, когда вбивает текст в пустое поле. Допустим, вы ввели букву «М» в поле ввода города, и браузер предложил варианты из : «Москва», «Минск» и так далее. Этот атрибут не подходит для таких типов , как hidden , password , checkbox , radio , file и любых кнопок.
- readonly — не позволяет пользователю как-либо изменять элемент, оставляя его при этом рабочим. Применимо только для текстовых полей.
- step — указывает шаг, с которым будет изменяться значение поля. Задаётся в числовом формате и работает с любым из перечисленных типов: number , range , date и datetime — local .
- min , max — указывают минимальные и максимальные числовые значения соответственно для полей с типами number и range . Минимальные и максимальные значения даты в формате ГГГГ — ММ — ДД для полей с типами date и datetime — local .
- size — указывает ширину поля для ввода в символах.
- placeholder — это короткая подсказка (слово или фраза), предназначенная для помощи пользователю при вводе данных, когда поле для ввода пустует.
- pattern — задаёт регулярное выражение, по которому проверяется значение элемента .
- multiple — указывает, что пользователь может выбрать больше одного значения.
Подсказки
Скопировать ссылку «Подсказки» Скопировано
�� Чтобы даже те, кто использует специальные средства для чтения с экрана (скринридеры), могли точно понять, что делает тот или иной , используйте этот тег в паре с label .
Ещё пример
Скопировать ссылку «Ещё пример» Скопировано
Вот так будет выглядеть простая форма, собранная из нескольких элементов . Мы поместили их все в контейнер , чтобы данные, которые введёт пользователь, можно было отправить на сервер:
Текстовое поле в одну строчку: Радиокнопки: Вариант 1 Вариант 2 Вариант 3 Большое текстовое поле: form name="test" method="post" action="input1.php"> label> Текстовое поле в одну строчку: input type="text" size="40"> label> fieldset> Радиокнопки: label class="radio-label"> input type="radio" name="browser" value="ie" id="ie"> Вариант 1 label> label class="radio-label"> input type="radio" name="browser" value="opera" id="opera"> Вариант 2 label> label class="radio-label"> input type="radio" name="browser" value="firefox" id="firefox"> Вариант 3 label> fieldset> label> Большое текстовое поле: textarea name="comment" cols="40" rows="3">textarea> label> div> input type="reset" value="Очистить"> input type="submit" value="Отправить"> div> form>
На практике
Скопировать ссылку "На практике" Скопировано
Дока Дог советует
Скопировать ссылку "Дока Дог советует" Скопировано
�� У есть несколько полезных CSS-псевдоклассов. Например, может иметь разные стили в обычном, сфокусированном и выключенном виде. А если между этими видами добавлять анимацию, можно сделать даже красиво. Например, как поля в Bootstrap, когда ты нажимаешь на , он начинает плавно подсвечиваться обводкой.
�� Если вы используете или , можно сами инпуты вообще скрыть: переключение будет работать при нажатии на лейбл. Так можно сделать очень красивые чекбоксы и радиокнопки на чистом CSS. Например, я как-то сделал чекбоксы на сайте в стиле классических переключалок из iOS.