Итак, решение, на первый взгляд, простое:
<a href="#" onclick="document.getElementById('myform').submit(); return false;">Отправить</a>
Но тут же возникает (как ни странно :) следующий вопрос это, а если JS будет у посетителя отключен?
Изменим наш код на:
<input type="submit" value="Отправить" class="link" />
И добавим немного JS:
addEvent(window, 'load', windowLoad);
/* Кроссбраузерное добавление обработчика события */
function addEvent(obj, evType, fn){
if (obj.addEventListener) {
obj.addEventListener(evType, fn, false);
} else if (obj.attachEvent) {
obj.attachEvent('on' + evType, fn);
}
}
/* Получаем родительскую форму для элемента */
function getParentForm(obj) {
while ((obj = obj.parentNode)) {
if (obj.nodeName == 'FORM') {
break;
}
}
return obj;
}
/* Ищем все submit-кнопки с классом link и заменяем их на ссылки */
function windowLoad() {
var buttons = document.getElementsByTagName('input');
for (var i = 0; i < buttons.length ; i++) {
if (buttons[i].getAttribute('type') == 'submit' && buttons[i].className == 'link') {
var link = document.createElement('a');
link.appendChild(document.createTextNode(buttons[i].getAttribute('value')));
link.setAttribute('href', '#');
addEvent(link, 'click', linkClick);
var parent = buttons[i].parentNode;
parent.removeChild(buttons[i]);
parent.appendChild(link);
}
}
}
/* Отправляем форму по нажатию на ссылку */
function linkClick(e) {
var e = window.event || e;
var target = e.target || e.srcElement;
var parentForm = getParentForm(target);
parentForm.submit();
if (window.event) { e.returnValue = false; } else { e.preventDefault(); }
}
Теперь, если JS будет отключен, посетитель увидит вместо ссылки кнопку и все равно сможет отправить форму. Но мы на этом не остановимся. Заставим кнопку выглядеть как ссылка даже если отключен JS. Для того чтобы стилизировать кнопку изменим тег на
button, а span нужен для того чтобы можно было в Firefox добавить подчеркивание текста.<button type="submit" class="link"><span>Отправить</span></button>
Также изменим соответственно часть JS.
var buttons = document.getElementsByTagName('button');
for (var i = 0; i < buttons.length ; i++) {
if (buttons[i].getAttribute('type') == 'submit' && buttons[i].className == 'link') {
var link = document.createElement('a');
link.appendChild(document.createTextNode(buttons[i].firstChild.firstChild.nodeValue));
CSS будет выглядеть следующим образом:
button.link {
/* Первые два свойства нужны чтобы убрать отступы в IE */
overflow: visible;
width: auto;
/* Убираем отступы */
margin: 0;
padding: 0;
/* Убираем все элементы оформления кнопки */
background: none;
border: none;
/* Обычный для ссылок курсор */
cursor: pointer;
}
/* Ссылка обычно подчеркнута */
button.link span {
color: #00f;
text-decoration: underline;
}
Для Firefox можно еще добавить
-moz-user-select: text; чтобы текст кнопки можно было выделять, но я сомневаюсь в такой надобности.Остальные стили будут уже зависеть от конкретного дизайна.
Несколько примечаний:
- К кнопке не удастся применить псевдоклассы active, visited, а для IE6 и hover
- В IE6 не будут нормально работать несколько button для одной формы
- Без JS можно обойтись. Все зависит от того, насколько вам важна естественность ссылки
UPD
insa предложил еще один очень хороший вариант, единственный минус которого в том, что label не сможет получить фокус.
<form>
<input type="text" name="a" />
<input type="submit" id="push-me" style="display:none" />
</form>
<label for="push-me">fake submit</label>
UPD2
К сожалению, вариант, предложенный insa, не кроссбраузерный (читайте комментарии).
Ссылки по теме:
Рабочий пример можно посмотреть здесь.

