phpjshtmlcssblog

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

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

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

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

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

Скопировать ссылку



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



Скопировать ссылку



Кнопка 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>

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

01.09.2021

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