СКРИПТЫ
ТЕГИ:
php (282)
js (144)
html (132)
css (99)
html tags (58)
jquery (39)
edit text (37)
php array (30)
form html (29)
fonts (22)
foto (21)
forum (19)
ruweb.net (19)
atom (19)
html book (17)
board (17)
Показать еще :
php file (16)
js method (16)
hosting (16)
svg (16)
link (15)
htaccess (13)
osclass (13)
color (13)
table (12)
path (12)
php date (11)
online (11)
yandex (11)
js delete (11)
icon (11)
jsphp (11)
input (11)
notepad (11)
form (10)
php img (10)
url (10)
mouse (9)
info (9)
img (7)
cookie (7)
comment (7)
task (7)
ftp (7)
php url (7)
dosite (6)
click (6)
hover (6)
js url (6)
reg.ru (5)
chart (5)
php get (5)
adminka (5)
value (5)
mb (5)
js id (4)
bbcode (4)
submit (4)
js form (4)
browser (4)
select (4)
search (4)
js copy (4)
iframe (4)
symbols (4)
captcha (3)
https (3)
js post (3)
vk (3)
scandir (3)
js time (3)
ssl (3)
vs code (3)
height (2)
details (2)
youtube (2)
tag hr (2)
sitemap (2)
title (2)
ukoz (2)
cursor (2)
console (2)
seo (2)
js vars (2)
video (2)
smile (1)
windows (1)
numbers (1)
archive (1)
header (1)
books (1)
domen (1)
padding (1)

Как сделать кнопку отправить ссылкой?

"submit ссылка" или Как сделать "кнопку отправить" ссылкой?.
Если выведем кнопку submit, то она не будет выглядеть как ссылка!

Сколько вариантов существует превращение сабмита в ссылку?

Превращаем type submit в ссылку.

  1. submit и есть ссылка
  2. Кнопка submit как ссылка

  1. submit и есть ссылка

    Один из примеров... я рассказывал в теме submit за пределами формы и там как раз была ссылка ...

    Но некоторая проблема данного варианта, что javascript может быть отключен...

    Поскольку я периодически и таким способом пользуюсь, то этот вариант пусть будет здесь...!

    Итак:

    Для того, чтобы сделать нам нужна форма...:

    <form id="form-id" method="post">
    <input value="name" name="name">
    </form>

    Далее создадим ссылку на которую навесим submit()

    <a onclick="document.getElementById('form-id').submit();" style="cursor:pointer"> Ссылка вместо submit</a>

    Пример ссылка вместо кнопки submit

    Для того, чтобы проверить... как работает ссылка вместо submit

    =========================

    Ссылка вместо submit



  2. Кнопка submit как ссылка.

    И второй вариант - сделаем кнопку отправить ссылкой:

    Для этого нам опять понадобится тег form с input с типом submit

    <form method="post">
    <input type="submit" name="name2" class="submit-link" value="ссылка вместо кнопки отправить">
    </form>

    Далее... превратим "submit" в ссылку. Для этого напишем немного стилей...
    1). Удалим border + background
    2). Добавим нашему "submit-link" border-снизу + padding - снизу + cursor

    input.submit-link {
    border: none;
    background: none;
    border-bottom: 1px solid;
    padding-bottom: 2px;
    cursor: pointer;
    }

    Что нам еще нужно добавить к нашему "submit-link"? Правильно! hover :

    input.submit-link:hover {
    border-bottom: 1px solid #ff000000;
    padding-bottom: 2px;
    }

    Пример: ссылка вместо кнопки отправить

    Чтобы проверить... как работает "ссылка вместо кнопки отправить" - нажмите по ссылке ниже:


    Соберем весь код "submit-link" в одном месте:

    <style>

    input.submit-link:hover {

    border-bottom: 1px solid #ff000000;

    padding-bottom: 2px;

    }

    input.submit-link {

    border: none;

    background: none;

    border-bottom: 1px solid;

    padding-bottom: 2px;

    cursor: pointer;

    }

    </style>

    <form method="post">

    <input type="submit" name="name2" class="submit-link">

    </form>

Пользуйтесь на здоровье! Не забудьте сказать спасибо
Теги :
submit ссылкой
html submit ссылка
сабмит ссылкой

Сообщение системы комментирования :

01.09.2021

Форма пока доступна только админу... скоро все заработает...надеюсь...

Последние комментарии :
Марат :
17.10.2021 39:28
Давно не делал и страницу и видео в один день... чет, как-то выжитый как…
подробнее.
Марат :
10.10.2021 17:20
Добавлен новый смайл
подробнее.
Марат :
05.10.2021 26:37
Страница sitemap.html восстановлена. Но будут вводиться только страницы…
подробнее.
Марат :
04.10.2021 38:22
Добавил несколько вариантов поставить смайл на страницу своего сайта! 3 варианта! Кроме варианта скачать…
подробнее.
Марат :
17.09.2021 28:02
Установка Яндекс поиск на сайт! Контент обновлен на 100%. Такое ощущение, что старый текст не я…
подробнее.
Марат :
07.09.2021 23:21
Частенько приходится исправлять ошибки и вот...как-то я обратил внимание на надпись: "нажми ctrl enter" на сайте и…
подробнее.
ruweb