Как сделать кнопку отправить ссылкой?
Если выведем кнопку submit, то она не будет выглядеть как ссылка!
Сколько вариантов существует превращение сабмита в ссылку?
Превращаем type submit в ссылку.
submit и есть ссылка
Один из примеров... я рассказывал в теме submit за пределами формы и там как раз была ссылка ...Но некоторая проблема данного варианта, что javascript может быть отключен...
Поскольку я периодически и таким способом пользуюсь, то этот вариант пусть будет здесь...!
Итак:
Для того, чтобы сделать нам нужна форма...:
<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
<input type="submit" name="name2" class="submit-link" value="ссылка вместо кнопки отправить">
</form>
Далее... превратим "submit" в ссылку. Для этого напишем немного стилей...
1). Удалим border + background
2). Добавим нашему "submit-link" border-снизу + padding - снизу + cursor
border: none;
background: none;
border-bottom: 1px solid;
padding-bottom: 2px;
cursor: pointer;
}
Что нам еще нужно добавить к нашему "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>
